chrome/common/extensions/docs/apps/sandboxingEval.html - Issue 10810054: Describing the `sandbox` workflow for extension developers.

Unified Diff: chrome/common/extensions/docs/apps/sandboxingEval.html

Issue 10810054: Describing the `sandbox` workflow for extension developers. (Closed) Base URL: http://git.chromium.org/git/chromium.git@trunk

Patch Set: TODO + Rebuild. Created 8 years, 5 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

Index: chrome/common/extensions/docs/apps/sandboxingEval.html

diff --git a/chrome/common/extensions/docs/apps/sandboxingEval.html b/chrome/common/extensions/docs/apps/sandboxingEval.html

new file mode 100644

index 0000000000000000000000000000000000000000..236c977ae2a4745fe900eb750691bcec6a9ce17d

--- /dev/null

+++ b/chrome/common/extensions/docs/apps/sandboxingEval.html

@@ -0,0 +1,410 @@

+<!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc. Note:

+ 1) The <head> information in this page is significant, should be uniform

+ across api docs and should be edited only with knowledge of the

+ templating mechanism.

+ 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a

+ browser, it will be re-generated from the template, json schema and

+ authored overview content.

+ 4) The <body>.innerHTML is also generated by an offline step so that this

+ page may easily be indexed by search engines.

+--><html xmlns="http://www.w3.org/1999/xhtml"><head>

+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

+ <link href="../css/print.css" rel="stylesheet" type="text/css" media="print">

+ <script type="text/javascript" src="../../../../third_party/jstemplate/jstemplate_compiled.js">

+ </script>

+ <script type="text/javascript" src="../../../../../third_party/json_minify/minify-sans-regexp.js">

+ </script>

+ <script type="text/javascript" src="../js/api_page_generator.js"></script>

+ <script type="text/javascript" src="../js/bootstrap.js"></script>

+ <script type="text/javascript" src="../js/sidebar.js"></script>

+ <title>Using eval in Chrome Extensions. Safely. - Google Chrome Extensions - Google Code</title></head>

+ <body doc-family="apps"> <link href="../css/ApiRefStyles_apps.css" rel="stylesheet" type="text/css">

+ <link href="../css/prettify.css" rel="stylesheet" type="text/css">

+ <link href="../css/shared.css" rel="stylesheet" type="text/css">

+ <div id="devModeWarning" class="displayModeWarning">

+ You are viewing extension docs in chrome via the 'file:' scheme: are you expecting to see local changes when you refresh? You'll need run chrome with --allow-file-access-from-files.

+ </div>

+ <div id="branchWarning" class="displayModeWarning">

+ <span>WARNING: This is the <span id="branchName">BETA</span> documentation.

+ It may not work with the stable release of Chrome.</span>

+ <select id="branchChooser">

+ <option>Choose a different version...

+ </option><option value="">Stable

+ </option><option value="beta">Beta

+ </option><option value="dev">Dev

+ </option><option value="trunk">Trunk

+ </option></select>

+ </div>

+ <div id="unofficialWarning" class="displayModeWarning">

+ <span>WARNING: This is unofficial documentation. It may not work with the

+ current release of Chrome.</span>

+ <button id="goToOfficialDocs">Go to the official docs</button>

+ </div>

+ <div id="gc-container" class="labs">

+

+ <!-- In particular, sub-templates that recurse, must be used by allowing

+ jstemplate to make a copy of the template in this section which

+ are not operated on by way of the jsskip="true" -->

+

+ <a id="top"></a>

+ <div id="skipto">

+ <a href="#gc-pagecontent">Skip to page content</a>

+ <a href="#gc-toc">Skip to main navigation</a>

+ </div>

+

+ <table id="header" width="100%" cellspacing="0" border="0">

+ <tbody><tr>

+ <td valign="middle"><a href="http://code.google.com/"><img src="../images/chrome_logo.gif" alt="Google Code" style="border:0; margin:0;"></a></td>

+ <td valign="middle" width="100%" style="padding-left:0.6em;">

+ <form action="http://www.google.com/cse" id="cse" style="margin-top:0.5em">

+ <div id="gsc-search-box">

+ <input type="hidden" name="cx" value="002967670403910741006:61_cvzfqtno">

+ <input type="hidden" name="ie" value="UTF-8">

+ <input id="gsc-search-input" type="text" name="q" value="" size="55">

+ <button class="gsc-search-button" type="submit" name="sa">

+ <img class="gsc-search-button-lens" src="../images/search.png" alt="Search">

+ </button>

+ <br>

+ <span class="greytext">e.g. "event page" or "alarms"</span>

+ </div>

+ </form>

+ <script type="text/javascript" src="https://www.google.com/jsapi"></script>

+ <script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>

+ <script type="text/javascript" src="https://www.google.com/coop/cse/t13n?form=cse&t13n_langs=en"></script>

+ <script type="text/javascript" src="https://www.google.com/coop/cse/brand?form=cse&lang=en"></script>

+ </td>

+ </tr>

+ </tbody></table>

+ <div id="codesiteContent" class="">

+ <a id="gc-topnav-anchor"></a>

+ <div id="gc-topnav">

+ <h1>Packaged Apps</h1>

+ <ul id="home" class="gc-topnav-tabs">

+ <li id="home_link">

+ <a href="about_apps.html" title="Packaged Apps home page"><span>Home</span></a>

+ </li>

+ <li id="docs_link">

+ <a href="develop_apps.html" title="Packaged apps developer documentation"><span>Docs</span></a>

+ </li>

+ <li id="samples_link">

+ <a href="https://github.com/GoogleChrome/chrome-app-samples" title="Packaged apps samples repository"><span>Samples</span></a>

+ </li>

+ <li id="group_link">

+ <a href="http://groups.google.com/a/chromium.org/group/chromium-apps" title="Google Chrome Apps developer forum"><span>Group</span></a>

+ </li>

+ <li id="so_link">

+ <a href="http://stackoverflow.com/questions/tagged/google-chrome-extension" title="[google-chrome-extension] tag on Stack Overflow"><span>Questions?</span></a>

+ </li>

+ </ul>

+ </div>

+ <div class="g-section g-tpl-170">

+

+ <div class="g-unit g-first" id="gc-toc">

+ <ul>

+ <li><h2>Getting Started</h2>

+ <ul>

+ <li><a href="about_apps.html">What Are Packaged Apps?</a></li>

+ <li><a href="app_architecture.html">Understand the Architecture</a></li>

+ <li><a href="first_app.html">Create Your First App</a></li>

+ </ul>

+ </li>

+ <li><h2>Developing</h2>

+ <ul>

+ <li><a href="develop_apps.html">Before You Start</a></li>

+ <li><span>The Fundamentals</span>

+ <ul>

+ <li><a href="app_lifecycle.html">Manage App Lifecycle</a></li>

+ <li><a href="app_storage.html">Manage Data</a></li>

+ <li><a href="offline_apps.html">Offline First</a></li>

+ <li><a href="app_external.html">Embed Content</a></li>

+ </ul>

+ </li>

+ <li><span>Security & Privacy</span>

+ <ul>

+ <li><a href="app_identity.html">Identify User</a></li>

+ <li><a href="app_csp.html">Comply with CSP</a></li>

+ </ul>

+ </li>

+ <li><span>Advanced Technologies</span>

+ <ul>

+ <li><a href="app_network.html">Network Communications</a></li>

+ <li><a href="app_hardware.html">Access Hardware Devices</a></li>

+ <li><a href="app_intents.html">Connect Apps with Web Intents</a></li>

+ </ul>

+ </li>

+ <li><a href="app_frameworks.html">MVC Architecture</a></li>

+ </ul>

+ </li>

+ <li><h2>Deploying</h2>

+ <ul>

+ <li><a href="publish_app.html">Publish</a></li>

+ </ul>

+ </li>

+ <li><h2>Reference</h2>

+ <ul>

+ <li><a href="manifest.html">Manifest Files</a></li>

+ <li><a href="api_index.html">Chrome JavaScript APIs</a></li>

+ <li><a href="api_other.html">Supported Libraries</a></li>

+ <li><a href="app_deprecated.html">Disabled Web Features</a></li>

+ </ul>

+ </li>

+ <li><h2><a href="https://github.com/GoogleChrome/chrome-app-samples">Samples</a></h2></li>

+ <li><h2><a href="app_known_issues.html">Known Issues</a></h2></li>

+ </ul>

+ </div>

+ <script>

+ initToggles();

+ </script>

+ <div class="g-unit" id="gc-pagecontent">

+ <div id="pageTitle">

+ <h1 class="page_title">Using eval in Chrome Extensions. Safely.</h1>

+ </div>

+

+ <div id="toc">

+ <h2>Contents</h2>

+ <ol>

+ <li>

+ <a href="#H2-0">Why sandbox?</a>

+ <ol>

+ </ol>

+ </li><li>

+ <a href="#H2-1">Creating and using a sandbox.</a>

+ <ol>

+ <li>

+ <a href="#H3-2">List files in manifest</a>

+ </li><li>

+ <a href="#H3-3">Load the sandboxed file</a>

+ </li><li>

+ <a href="#H3-4">Do something dangerous</a>

+ </li><li>

+ <a href="#H3-5">Pass the result back</a>

+ </li>

+ </ol>

+ </li>

+ </ol>

+ </div>

+

+

+

+ <div id="static"><div id="pageData-name" class="pageData">Using eval in Chrome Extensions. Safely.</div>

+<div id="pageData-showTOC" class="pageData">true</div>

+<p>

+ Chrome's extension system enforces a fairly strict default

+ <a href="contentSecurityPolicy.html">

+ <strong>Content Security Policy (CSP)</strong>

+ </a>. The policy restrictions are straightforward: script must be moved

+ out-of-line into separate JavaScript files, inline event handlers must be

+ converted to use <code>addEventListener</code>, and <code>eval()</code> is

+ disabled. Chrome Apps have an

+ <a href="http://developer.chrome.com/trunk/apps/app_csp.html">even more strict

+ policy</a>, and we're quite happy with the security properties these policies

+ provide.

+</p>

+<p>

+ We recognize, however, that a variety of libraries use <code>eval()</code> and

+ <code>eval</code>-like constructs such as <code>new Function()</code> for

+ performance optimization and ease of expression. Templating libraries are

+ especially prone to this style of implementation. While some (like

+ <a href="http://angularjs.org/">Angular.js</a>) support CSP out of the box,

+ many popular frameworks haven't yet updated to a mechanism that is compatible

+ with extensions' <code>eval</code>-less world. Removing support for that

+ functionality has therefore proven <a href="http://crbug.com/107538">more

+ problematic than expected</a> for developers.

+</p>

+<p>

+ This document introduces sandboxing as a safe mechanism to include these

+ libraries in your projects without compromising on security. For brevity,

+ we'll be using the term <em>extensions</em> throughout, but the concept

+ applies equally to applications.

+</p>

+<a name="H2-0"></a><h2>Why sandbox?</h2>

+<p>

+ <code>eval</code> is dangerous inside an extension because the code it

+ executes has access to everything in the extension's high-permission

+ environment. A slew of powerful <code>chrome.*</code> APIs are available that

+ could severely impact a user's security and privacy; simple data exfiltration

+ is the least of our worries. The solution on offer is a sandbox in which

+ <code>eval</code> can execute code without access either to the extension's

+ data or the extension's high-value APIs. No data, no APIs, no problem.

+</p>

+<p>

+ We accomplish this by listing specific HTML files inside the extension package

+ as being sandboxed. Whenever a sandboxed page is loaded, it will be moved to a

+ <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.html#sandboxed-origin-browsing-context-flag">unique origin</a>,

+ and will be denied access to <code>chrome.*</code> APIs. If we load this

+ sandboxed page into our extension via an <code>iframe</code>, we can pass it

+ messages, let it act upon those messages in some way, and wait for it to pass

+ us back a result. This simple messaging mechanism gives us everything we need

+ to safely include <code>eval</code>-driven code in our extension's workflow.

+</p>

+<a name="H2-1"></a><h2>Creating and using a sandbox.</h2>

+<p>

+ If you'd like to dive straight into code, please grab the

+ <a href="http://code.google.com/chrome/extensions/samples.html#3c6dfba67f6a7480d931b5a4a646c151ad1a049b">sandboxing

+ sample extension and take off</a>. It's a working example of a tiny messaging

+ API built on top of the <a href="http://handlebarsjs.com">Handlebars</a>

+ templating library, and it should give you everything you need to get going.

+ For those of you who'd like a little more explanation, let's walk through that

+ sample together here.

+</p>

+<a name="H3-2"></a><h3>List files in manifest</h3>

+<p>

+ Each file that ought to be run inside a sandbox must be listed in the

+ extension manifest by adding a <code>sandbox</code> property. This is a

+ critical step, and it's easy to forget, so please double check that your

+ sandboxed file is listed in the manifest. In this sample, we're sandboxing the

+ file cleverly named "sandbox.html". The manifest entry looks like this:

+</p>

+<pre>{

+ ...,

+ "sandbox": {

+ "pages": ["sandbox.html"]

+ },

+ ...

+}</pre>

+<a name="H3-3"></a><h3>Load the sandboxed file</h3>

+<p>

+ In order to do something interesting with the sandboxed file, we need to load

+ it in a context where it can be addressed by the extension's code. Here,

+ <a href="http://code.google.com/chrome/extensions/examples/howto/sandbox/sandbox.html">sandbox.html</a>

+ has been loaded into the extension's <a href="http://code.google.com/chrome/extensions/dev/event_pages.html">Event

+ Page</a> (<a href="http://code.google.com/chrome/extensions/examples/howto/sandbox/eventpage.html">eventpage.html</a>)

+ via an <code>iframe</code>. <a href="http://code.google.com/chrome/extensions/examples/howto/sandbox/eventpage.js">eventpage.js</a>

+ contains code that sends a message into the sandbox whenever the browser

+ action is clicked by finding the <code>iframe</code> on the page, and

+ executing the <code>postMessage</code> method on its

+ <code>contentWindow</code>. The message is an object containing two

+ properties: <code>context</code> and <code>command</code>. We'll dive into

+ both in a moment.

+</p>

+<pre>chrome.browserAction.onClicked.addListener(function() {

+ var iframe = document.getElementById('theFrame');

+ var message = {

+ command: 'render',

+ context: {thing: 'world'}

+ };

+ iframe.contentWindow.postMessage(message, '*');

+});</pre>

+<p class="note">

+ For general information about the <code>postMessage</code> API, take a look at

+ the <a href="https://developer.mozilla.org/en/DOM/window.postMessage">

+ <code>postMessage</code> documentation on MDN

+ </a>. It's quite complete and worth reading. In particular, note that data can

+ only be passed back and forth if it's serializable. Functions, for instance,

+ are not.

+</p>

+<a name="H3-4"></a><h3>Do something dangerous</h3>

+<p>

+ When <code>sandbox.html</code> is loaded, it loads the Handlebars library, and

+ creates and compiles an inline template in the way Handlebars suggests:

+</p>

+<pre><script src="handlebars-1.0.0.beta.6.js"></script>

+ <script id="hello-world-template" type="text/x-handlebars-template">

+ <div class="entry">

+ <h1>Hello, {{thing}}!</h1>

+ </div>

+ </script>

+ <script>

+ var templates = [];

+ var source = document.getElementById('hello-world-template').innerHTML;

+ templates['hello'] = Handlebars.compile(source);

+ </script></pre>

+<p>

+ This doesn't fail! Even though <code>Handlebars.compile</code> ends up using

+ <code>new Function</code>, things work exactly as expected, and we end up with

+ a compiled template in <code>templates[‘hello']</code>.

+</p>

+<a name="H3-5"></a><h3>Pass the result back</h3>

+<p>

+ We'll make this template available for use by setting up a message listener

+ that accepts commands from the Event Page. We'll use the <code>command</code>

+ passed in to determine what ought to be done (you could imagine doing more

+ than simply rendering; perhaps creating templates? Perhaps managing them in

+ some way?), and the <code>context</code> will be passed into the template

+ directly for rendering. The rendered HTML will be passed back to the Event

+ Page so the extension can do something useful with it later on:

+</p>

+<pre>window.addEventListener('message', function(event) {

+ var command = event.data.command;

+ var name = event.data.name || 'hello';

+ switch(command) {

+ case 'render':

+ event.source.postMessage({

+ name: name,

+ html: templates[name](event.data.context)

+ }, event.origin);

+ break;

+ // case 'somethingElse':

+ // ...

+ }

+});</pre>

+<p>

+ Back in the Event Page, we'll receive this message, and do something

+ interesting with the <code>html</code> data we've been passed. In this case,

+ we'll just echo it out via a <a href="http://code.google.com/chrome/extensions/notifications.html">Desktop

+ Notification</a>, but it's entirely possible to use this HTML safely as part

+ of the extension's UI. Inserting it via <code>innerHTML</code> doesn't pose a

+ significant security risk, as even a complete compromise of the sandboxed code

+ through some clever attack would be unable to inject dangerous script or

+ plugin content into the high-permission extension context.

+</p>

+<p>

+ This mechanism makes templating straightforward, but it of course isn't

+ limited to templating. Any code that doesn't work out of the box under a

+ strict Content Security Policy can be sandboxed; in fact, it's often useful

+ to sandbox components of your extensions that <em>would</em> run correctly in

+ order to restrict each piece of your program to the smallest set of privileges

+ necessary for it to properly execute. The

+ <a href="http://www.youtube.com/watch?v=GBxv8SaX0gg">Writing Secure Web Apps

+ and Chrome Extensions</a> presentation from Google I/O 2012 gives some good

+ examples of these technique in action, and is worth 56 minutes of your time.

+</p>

+</div>

+

+

+ </div>

+ </div>

+ </div>

+ <div id="gc-footer" --="">

+ <div class="text">

+ <p>

+ Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>,

+ the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons

+ Attribution 3.0 License</a>, and code samples are licensed under the

+ <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>.

+ </p>

+ <p>

+ </p>

+

+<script src="https://www.google-analytics.com/urchin.js" type="text/javascript"></script>

+<script src="https://www.google-analytics.com/ga.js" type="text/javascript"></script>

+<script src="../js/prettify.js" type="text/javascript"></script>

+<script>

+ // Auto syntax highlight all pre tags.

+ var pres = document.querySelectorAll('pre');

+ for (var i = 0, pre; pre = pres[i]; ++i) {

+ pre.className += ' prettyprint';

+ };

+ prettyPrint();

+</script>

+<script type="text/javascript">

+ // chrome doc tracking

+ try {

+ var engdocs = _gat._getTracker("YT-10763712-2");

+ engdocs._trackPageview();

+ } catch(err) {}

+ // code.google.com site-wide tracking

+ try {

+ _uacct="UA-18071-1";

+ _uanchor=1;

+ _uff=0;

+ urchinTracker();

+ }

+ catch(e) {/* urchinTracker not available. */}

+</script>

+

+ </div>

+ </div>

+ </div>

+</body></html>

« no previous file with comments | « no previous file | chrome/common/extensions/docs/examples/howto/sandbox.zip » ('j') | no next file with comments »