Chrome 25 Beta: Content Security Policy and Shadow DOM

Monday, January 14, 2013

Earlier today we released Chrome 25 on the Beta channel, and last week we introduced the Beta channel for Chrome for Android. To kick off the new year, we’ve packed these releases full of developer features. You’ll find all the updates described here in both the desktop and Android releases unless otherwise noted.

Unprefixed support for Content Security Policy
Content Security Policy (CSP) helps you reduce the risk of cross-site scripting and other content injection attacks. Starting in today’s Beta release, you can use the unprefixed Content-Security-Policy HTTP header to define a whitelist of trusted content sources. The browser will only execute or render resources from those sources. For example:


Prefixed support for Shadow DOM
Web Components is a set of cutting edge standards that will make it possible to build reusable widgets for the web. Shadow DOM is a key part of Web Components that enables DOM tree encapsulation. Without it, widgets may inadvertently break pages by using conflicting CSS selectors, class or id names, or JavaScript variables.

To get started, try the prefixed webkitCreateShadowRoot API available in today’s Beta release. Here’s an example from the HTML5 Rocks Shadow DOM Tutorial:


We think Shadow DOM is an important step forward for the web, so we've submitted a comprehensive test suite to the W3C to help ensure compatibility between implementations.

Other platform features
In addition to the highlights above, today’s Beta release introduces various other web platform features:
Last week’s Beta release of Chrome for Android also brought many features already available on other Chrome versions to Android as well. These features are described in detail in the announcement on the Chromium blog.

DevTools
Chrome Developer Tools help you debug the web. We’re rolling out several updates to desktop DevTools in today’s Beta release:
  • console.clear() helps keep your console clean.
  • The top toolbar is icon-free, though icons can be re-enabled in settings.
  • A timeline setting was added: “Show CPU activity on the ruler.” console.log formatting accepts multiple styles. For example: console.log("%cblue! %cgreen!", "color: blue;", "color: green;").
  • The docking toggle switches between most recent modes; “Dock to Right” is now the default alternative.
  • Emulate the media type to view print stylesheets and @media blocks.
  • The CodeMirror editor, replacing the default DevTools editor in Sources Panel, was updated to v3.
Stay in the loop

Visit chromestatus.com for a complete overview of Chrome’s developer features, and circle +Google Chrome Developers for more frequent updates.

We’ll update this post if things change, but at this point all these features are expected to land in the next Stable release. We’ve got a lot more in store for you this year, so get coding!

Post a Comment