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: Mihai's + Meggin's feedback. 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..c25b7b02d857562d61da045639e29ade803b1de8

--- /dev/null

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

@@ -0,0 +1,403 @@

+<!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.com/">Angular.js</a>) support CSP out of the box,

Jorge Lucangeli Obes 2012/07/26 18:28:05 .org

Mike West 2012/07/27 07:58:57 Done.

+ 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="#TODO">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 it 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="#TODO">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="#TODO">eventpage.html</a>) via an <code>iframe</code>.

+ <a href="#TODO">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 <a href="#TODO">sandbox.html</a> 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="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

Jorge Lucangeli Obes 2012/07/26 18:28:05 The risks introduced by innerHTML don't completely

Mike West 2012/07/27 07:58:57 Good point. We should be careful about the securit

+ security risk, as we're protected in this context from unintentional execution

+ of inline script.

+</p>

+<p>

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

+ limited to templating. For example, the

+ <a href="https://github.com/GoogleChrome/chrome-app-samples/blob/master/regex-tester/">Regex Tester</a>

+ application uses <code>eval</code> to dynamically generate and test regular

+ expressions. It's built similarly, and would also be good for you to take a

+ look at before building your own sandboxed application or extension.

+</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') | chrome/common/extensions/docs/static/sandboxingEval.html » ('J')