26 Nov 2014, 09:30

Around the Web - November 2014

DNS

HTTPS

MySQL

HTML5/CSS/Responsive Web Design

  • 7 CSS Units you may not know about : rem, vh, vm, vmin, vmax, ex and ch. I did not know the two latter. Some more examples for the vh/vm and vmin/vmax.
  • About rem and em more specially, if you want to move from a fixed approach (ie pixel one) to a more fluid/adaptive one (em/rem), you should read this article  and then this one which explain the issue with pixels and the new way to manage it. You can also use em/rem for positionning content ; em/rem are not only about text.
  • 5 obsolete features in HTML5: hgroups tag, pubdate and scope attributes, command and center elements. With the good way to implement them and/or some workaround if you still need them.
  • RWD adoption 2014 : top 100/1000/10.000 sites are evaluated - from to what extend is RWD implemented to mobile site vs RWD benchmarks in terms of performance.
  • 6 technologies that will change the web platform : asm.js, paralleljs, ECMAScript 6, web components, installable webapps, CSS Grid layout
  • The state of Web Animation 2014 : Between the post-Flash area and the Web Animation API to be implemented in all browsers, a review of current challenges and polyfill to bring animations into the browsers. Comments are also worth to read to get more resources.
  • If you are interested in a book about RWD, seems the latest book from A book apart may interested you : Responsible responsive web design (related review)

Browser

Web Performance

  • M6 Tech team made a review of their participation to Velocity conf (day 1, day 2, day 3), a web performance oriented conference. Even if their synthesis is in French, related slides and video are in English. You can also find the one of 2013 (day 1, day 2, day 3)

AngularJS

React (Facebook)

  • React through the ages : an interesting introduction (from origin to what's coming) about React, a JS library to build user interfaces.

05 Feb 2014, 09:30

And your next IDE is the browser

This week, I would not even speak about Cloud 9 or Codio but about Chrome DevTools :

Video is back from May 2013 but below a 20 minutes video from Paul Irish (Google employee) about Chrome DevTools and how it ease your frontend dev tasks. A lot of progress has been done since but with the video and the demo he made, you got the idea.

Mozilla has also its own Firefox DevTools but seems one step behind unfortunately on some points and complementary on some others.

Code-school made a partnership with Google to provide a "Discover DevTools" courses (didn't watch yet but will since I watched this video)

26 Jun 2013, 23:24

Content Security Policy (CSP)

On a similar topic as CORS and the same origin police I wrote some months ago, there is another initiative called Content Security Policy which is defined as follow in the Mozilla Developper Network CSP Page :

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware.

Principle

The idea behind is that you will "whitelist" the code you accept to render whether it is hosted on third party serivces (like facebook or google buttons) up to inline code within your page (yes, I mean the CSS and JS code you add with the <style> and <script> tags)

What does it look like ?

It's so far only a HTTP Header called "Content-Security-Policy" you will have to set ; for the 1.1 Specs, it will also be a "meta" tags you can set in your HTML.

You will define then the diffrent directives you want to have, depending on your needs :

  • connect-src limits the origins to which you can connect (via XHR, WebSockets, and EventSource).
  • font-src specifies the origins that can serve web fonts. Google’s Web Fonts could be enabled via font-src https://themes.googleusercontent.com
  • frame-src lists the origins that can be embedded as frames. For example: frame-src https://youtube.com would enable embedding YouTube videos, but no other origins.
  • img-src defines the origins from which images can be loaded.
  • media-src restricts the origins allowed to deliver video and audio.
  • object-src allows control over Flash and other plugins.
  • script-src lists the origin of scripts that would be loaded
  • style-src is script-src’s counterpart for stylesheets.

Let's see an example :

Content-Security-Policy: script-src 'self' https://apis.google.com

It would mean that :

  • any script loaded from my domain and from https://apis.google.com will be loaded.
  • If you try to load jquery from code.jquery.com in your html, it will not be loaded as this host has not been whitelisted.

Another example to illustrate to what extend you can fine tune this directive :

Content-Security-Policy: default-src 'none'; script-src https://cdn.mybank.net; style-src https://cdn.mybank.net; img-src https://cdn.mybank.net; connect-src https://api.mybank.com; frame-src 'self'

It would mean that :

  • You will not load any code hosted on your domain
  • Script, Style and Image files can only be loaded fomr https://cdn.mybank.net
  • You can connect via Ajax or similar only to https://api.mybank.com/
  • and load frame only from your domain
  • Outside of this rules, all other code/content will never be loaded.

Last one, if you want your site to load all the required files for social widgets (like Facebook, Twiitter, Google ones), the directive would be :

Content-Security-Policy: default-src 'self'; script-src https://apis.google.com https://platform.twitter.com; frame-src https://plusone.google.com https://facebook.com https://platform.twitter.com

Inline CSS / JS Code

Sometime you do have some Javascript / CSS code in your html. Even if you defined "self" as default-src, it will prevent from loading indline JS/CSS code and also prevent "eval()" to be computed.

So the best practice is of course to put your CSS / JS code in external files. However, if you can't, you will have to add the "unsafe-inline" and "unsafe-eval" directives. Of course, it's strongly disrecommended. Indeed, if anyone can inject code in your page, then it will do whatever he wants.

Reporting & Monitoring

Introducing CSP may hurt your site to some extend  as you may forgot to declare some required resources and of course you may be interested to know if someone tries to inject code. CSP also provides some directives for these two needs.

First, for debug purposes, you have the "report-only" directive that would report files to be excluded but will not block them ; you will then use :

Content-Security-Policy-Report-Only: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;

Once you are fine and go in production, you want to know what happens in reality and prevent malicious code to be loaded. Just do as follow :

Content-Security-Policy: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;

For both cases, once the rule is hit, the browser will POST the information to your report uri and you will have something like :

{
  "csp-report": {
    "document-uri": "http://example.org/page.html",
    "referrer": "http://evil.example.com/",
    "blocked-uri": "http://evil.example.com/evil.js",
    "violated-directive": "script-src 'self' https://apis.google.com",
    "original-policy": "script-src 'self' https://apis.google.com; report-uri http://example.org/my_amazing_csp_report_parser"
  }
}

Current support in browsers

  • Firefox from Firefox 23 (next stable release) and later. Firefox for Android and Firefox OS soon to follow.
  • Chrome :  25 and later
  • Internet Explorer : 10 and later (sandbox directive only)

How if differs from CORS ?

CORS also aims to mitigate the "same origin policy" issue by allowing which sites can load your content. CSP is the opposite as you would define which hosts you want to load content from and will go deeper as it allows a fine grained control on the loaded/computed code.

I would say CSP it really security focused whereas CORS was more to ease developper tasks to load content from another place.

More resources on CSP

[Edit 1] : An example on how to play safely in sanboxed iframes.

19 Jun 2013, 23:13

Firefox 23 to block by default Mixed Active Content

What is the issue ?

A few definitions to start with :

  • Mixed content is when within a https page some content are displayed coming from a http one. The consequence is that the whole page is not encrypted and that it could be used for Man in the middle attack or other malicious code.
  • Mixed passive content (aka Mixed Display Content) : it is content that will not impact/alter your page except the portion of the page it is rendered ; you can safely think about images, video, audio and such contents. They are called inactive as when they are loaded, they will not change the behaviour of the page.
  • Mixed active content (aka Mixed Script Cotent) ; this content, on the opposite, has the ability to change the way the page is rendered and thus potentially get data from the user. It is about Javascript, CSS files, XHR requests (ajax), iframes or fonts

So from Firefox 23, only the Mixed Active Content would be blocked by default and reported to the user, which may allow you to load the blocked content. Mixed passive content will be still authorised

How can I test it ?

You can test before Firefox 23 is released by going to : about:config => promise => set "security.mixed_content.block_active_content" to true

You can also see it with the dev tools, you may see some [MIXED CONTENT] warnings in the web debug console.

How are you impacted you will ask ?

So if for your site you use https url, you definitely have to run some tests to check if you have some mixed content and fix it especillay if you have mixed active content.

Regarding Firefox Release

  • Current stable  release is Firefox 21
  • Firefox 22 is to be released on 24th June
  • No date yet for Firefox 23 but it will be for Q3 I think

Source