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

Unified Diff: chrome/common/extensions/docs/extensions/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

« no previous file with comments | « chrome/common/extensions/docs/examples/howto/sandbox/sandbox.html ('k') | chrome/common/extensions/docs/samples.json » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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

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

new file mode 100644

index 0000000000000000000000000000000000000000..e670905fd8a04faf20631c880f893edd519fe31f

--- /dev/null

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

@@ -0,0 +1,430 @@

+<!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="extensions"> <link href="../css/ApiRefStyles.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/code_labs_logo.gif" height="43" width="161" alt="Google Code Labs" 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 type="text" name="q" value="" size="55">

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

+ <br>

+ <span class="greytext">e.g. "page action" or "tabs"</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>Google Chrome Extensions (<a href="http://code.google.com/labs/">Labs</a>)</h1>

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

+ <li id="home_link">

+ <a href="index.html" title="Google Chrome Extensions home page">Home</a>

+ </li>

+ <li id="docs_link">

+ <a href="docs.html" title="Official Google Chrome Extensions documentation">Docs</a>

+ </li>

+ <li id="faq_link">

+ <a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions">FAQ</a>

+ </li>

+ <li id="samples_link">

+ <a href="samples.html" title="Sample extensions (with source code)">Samples</a>

+ </li>

+ <li id="group_link">

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

+ </li>

+ <li id="so_link">

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

+ </li>

+ </ul>

+ </div>

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

+

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

+ <ul>

+ <li><a href="getstarted.html">Getting Started</a></li>

+ <li><a href="overview.html">Overview</a></li>

+ <li><a href="whats_new.html">What's New?</a></li>

+ <li><h2><a href="devguide.html">Developer's Guide</a></h2>

+ <ul>

+ <li>Browser UI

+ <ul>

+ <li><a href="browserAction.html">Browser Actions</a></li>

+ <li><a href="contextMenus.html">Context Menus</a></li>

+ <li><a href="notifications.html">Desktop Notifications</a></li>

+ <li><a href="omnibox.html">Omnibox</a></li>

+ <li><a href="options.html">Options Pages</a></li>

+ <li><a href="override.html">Override Pages</a></li>

+ <li><a href="pageAction.html">Page Actions</a></li>

+ </ul>

+ </li>

+ <li>Browser Interaction

+ <ul>

+ <li><a href="bookmarks.html">Bookmarks</a></li>

+ <li><a href="cookies.html">Cookies</a></li>

+ <li><a href="devtools.html">Developer Tools</a></li>

+ <li><a href="events.html">Events</a></li>

+ <li><a href="history.html">History</a></li>

+ <li><a href="management.html">Management</a></li>

+ <li><a href="tabs.html">Tabs</a></li>

+ <li><a href="windows.html">Windows</a></li>

+ </ul>

+ </li>

+ <li>Implementation

+ <ul>

+ <li><a href="a11y.html">Accessibility</a></li>

+ <li><a href="background_pages.html">Background Pages</a></li>

+ <li><a href="content_scripts.html">Content Scripts</a></li>

+ <li><a href="xhr.html">Cross-Origin XHR</a></li>

+ <li><a href="i18n.html">Internationalization</a></li>

+ <li><a href="messaging.html">Message Passing</a></li>

+ <li><a href="permissions.html">Optional Permissions</a></li>

+ <li><a href="npapi.html">NPAPI Plugins</a></li>

+ </ul>

+ </li>

+ <li>Finishing

+ <ul>

+ <li><a href="hosting.html">Hosting</a></li>

+ <li><a href="external_extensions.html">Other Deployment Options</a></li>

+ </ul>

+ </li>

+ </ul>

+ </li>

+ <li><h2><a href="apps.html">Packaged Apps</a></h2></li>

+ <li><h2><a href="tutorials.html">Tutorials</a></h2>

+ <ul>

+ <li><a href="tut_debugging.html">Debugging</a></li>

+ <li><a href="tut_analytics.html">Google Analytics</a></li>

+ <li><a href="tut_oauth.html">OAuth</a></li>

+ </ul>

+ </li>

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

+ <ul>

+ <li>Formats

+ <ul>

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

+ <li><a href="match_patterns.html">Match Patterns</a></li>

+ </ul>

+ </li>

+ <li><a href="permission_warnings.html">Permission Warnings</a></li>

+ <li><a href="api_index.html">chrome.* APIs</a></li>

+ <li><a href="api_other.html">Other APIs</a></li>

+ </ul>

+ </li>

+ <li><h2><a href="samples.html">Samples</a></h2></li>

+ <div class="line"> </div>

+ <li><h2>More</h2>

+ <ul>

+ <li><a href="http://code.google.com/chrome/webstore/docs/index.html">Chrome Web Store</a></li>

+ <li><a href="http://code.google.com/chrome/apps/docs/developers_guide.html">Hosted Apps</a></li>

+ <li><a href="themes.html">Themes</a></li>

+ </ul>

+ </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 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 | « chrome/common/extensions/docs/examples/howto/sandbox/sandbox.html ('k') | chrome/common/extensions/docs/samples.json » ('j') | no next file with comments »