| OLD | NEW | 
|---|
| 1 <h1>Using eval in Chrome Extensions. Safely.</h1> | 1 <h1>Using eval in Chrome Extensions. Safely.</h1> | 
| 2 | 2 | 
| 3 | 3 | 
| 4 <p> | 4 <p> | 
| 5   Chrome's extension system enforces a fairly strict default | 5   Chrome's extension system enforces a fairly strict default | 
| 6   <a href='contentSecurityPolicy.html'> | 6   <a href='contentSecurityPolicy.html'> | 
| 7     <strong>Content Security Policy (CSP)</strong> | 7     <strong>Content Security Policy (CSP)</strong> | 
| 8   </a>. The policy restrictions are straightforward: script must be moved | 8   </a>. The policy restrictions are straightforward: script must be moved | 
| 9   out-of-line into separate JavaScript files, inline event handlers must be | 9   out-of-line into separate JavaScript files, inline event handlers must be | 
| 10   converted to use <code>addEventListener</code>, and <code>eval()</code> is | 10   converted to use <code>addEventListener</code>, and <code>eval()</code> is | 
| (...skipping 15 matching lines...) Expand all  Loading... | 
| 26   problematic than expected</a> for developers. | 26   problematic than expected</a> for developers. | 
| 27 </p> | 27 </p> | 
| 28 | 28 | 
| 29 <p> | 29 <p> | 
| 30   This document introduces sandboxing as a safe mechanism to include these | 30   This document introduces sandboxing as a safe mechanism to include these | 
| 31   libraries in your projects without compromising on security. For brevity, | 31   libraries in your projects without compromising on security. For brevity, | 
| 32   we'll be using the term <em>extensions</em> throughout, but the concept | 32   we'll be using the term <em>extensions</em> throughout, but the concept | 
| 33   applies equally to applications. | 33   applies equally to applications. | 
| 34 </p> | 34 </p> | 
| 35 | 35 | 
| 36 <h2>Why sandbox?</h2> | 36 <h2 id="why_sandbox">Why sandbox?</h2> | 
| 37 | 37 | 
| 38 <p> | 38 <p> | 
| 39   <code>eval</code> is dangerous inside an extension because the code it | 39   <code>eval</code> is dangerous inside an extension because the code it | 
| 40   executes has access to everything in the extension's high-permission | 40   executes has access to everything in the extension's high-permission | 
| 41   environment. A slew of powerful <code>chrome.*</code> APIs are available that | 41   environment. A slew of powerful <code>chrome.*</code> APIs are available that | 
| 42   could severely impact a user's security and privacy; simple data exfiltration | 42   could severely impact a user's security and privacy; simple data exfiltration | 
| 43   is the least of our worries. The solution on offer is a sandbox in which | 43   is the least of our worries. The solution on offer is a sandbox in which | 
| 44   <code>eval</code> can execute code without access either to the extension's | 44   <code>eval</code> can execute code without access either to the extension's | 
| 45   data or the extension's high-value APIs. No data, no APIs, no problem. | 45   data or the extension's high-value APIs. No data, no APIs, no problem. | 
| 46 </p> | 46 </p> | 
| 47 | 47 | 
| 48 <p> | 48 <p> | 
| 49   We accomplish this by listing specific HTML files inside the extension package | 49   We accomplish this by listing specific HTML files inside the extension package | 
| 50   as being sandboxed. Whenever a sandboxed page is loaded, it will be moved to a | 50   as being sandboxed. Whenever a sandboxed page is loaded, it will be moved to a | 
| 51   <a href='http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.
     html#sandboxed-origin-browsing-context-flag'>unique origin</a>, | 51   <a href='http://www.whatwg.org/specs/web-apps/current-work/multipage/origin-0.
     html#sandboxed-origin-browsing-context-flag'>unique origin</a>, | 
| 52   and will be denied access to <code>chrome.*</code> APIs. If we load this | 52   and will be denied access to <code>chrome.*</code> APIs. If we load this | 
| 53   sandboxed page into our extension via an <code>iframe</code>, we can pass it | 53   sandboxed page into our extension via an <code>iframe</code>, we can pass it | 
| 54   messages, let it act upon those messages in some way, and wait for it to pass | 54   messages, let it act upon those messages in some way, and wait for it to pass | 
| 55   us back a result. This simple messaging mechanism gives us everything we need | 55   us back a result. This simple messaging mechanism gives us everything we need | 
| 56   to safely include <code>eval</code>-driven code in our extension's workflow. | 56   to safely include <code>eval</code>-driven code in our extension's workflow. | 
| 57 </p> | 57 </p> | 
| 58 | 58 | 
| 59 <h2>Creating and using a sandbox.</h2> | 59 <h2 id="creating_and_using">Creating and using a sandbox.</h2> | 
| 60 | 60 | 
| 61 <p> | 61 <p> | 
| 62   If you'd like to dive straight into code, please grab the | 62   If you'd like to dive straight into code, please grab the | 
| 63   <a href='http://code.google.com/chrome/extensions/samples.html#3c6dfba67f6a748
     0d931b5a4a646c151ad1a049b'>sandboxing | 63   <a href='http://code.google.com/chrome/extensions/samples.html#3c6dfba67f6a748
     0d931b5a4a646c151ad1a049b'>sandboxing | 
| 64   sample extension and take off</a>. It's a working example of a tiny messaging | 64   sample extension and take off</a>. It's a working example of a tiny messaging | 
| 65   API built on top of the <a href='http://handlebarsjs.com'>Handlebars</a> | 65   API built on top of the <a href='http://handlebarsjs.com'>Handlebars</a> | 
| 66   templating library, and it should give you everything you need to get going. | 66   templating library, and it should give you everything you need to get going. | 
| 67   For those of you who'd like a little more explanation, let's walk through that | 67   For those of you who'd like a little more explanation, let's walk through that | 
| 68   sample together here. | 68   sample together here. | 
| 69 </p> | 69 </p> | 
| 70 | 70 | 
| 71 <h3>List files in manifest</h3> | 71 <h3 id="list_files">List files in manifest</h3> | 
| 72 | 72 | 
| 73 <p> | 73 <p> | 
| 74   Each file that ought to be run inside a sandbox must be listed in the | 74   Each file that ought to be run inside a sandbox must be listed in the | 
| 75   extension manifest by adding a <code>sandbox</code> property. This is a | 75   extension manifest by adding a <code>sandbox</code> property. This is a | 
| 76   critical step, and it's easy to forget, so please double check that your | 76   critical step, and it's easy to forget, so please double check that your | 
| 77   sandboxed file is listed in the manifest. In this sample, we're sandboxing the | 77   sandboxed file is listed in the manifest. In this sample, we're sandboxing the | 
| 78   file cleverly named "sandbox.html". The manifest entry looks like this: | 78   file cleverly named "sandbox.html". The manifest entry looks like this: | 
| 79 </p> | 79 </p> | 
| 80 | 80 | 
| 81 <pre>{ | 81 <pre>{ | 
| 82   ..., | 82   ..., | 
| 83   "sandbox": { | 83   "sandbox": { | 
| 84      "pages": ["sandbox.html"] | 84      "pages": ["sandbox.html"] | 
| 85   }, | 85   }, | 
| 86   ... | 86   ... | 
| 87 }</pre> | 87 }</pre> | 
| 88 | 88 | 
| 89 <h3>Load the sandboxed file</h3> | 89 <h3 id="load_file">Load the sandboxed file</h3> | 
| 90 | 90 | 
| 91 <p> | 91 <p> | 
| 92   In order to do something interesting with the sandboxed file, we need to load | 92   In order to do something interesting with the sandboxed file, we need to load | 
| 93   it in a context where it can be addressed by the extension's code. Here, | 93   it in a context where it can be addressed by the extension's code. Here, | 
| 94   <a href='http://code.google.com/chrome/extensions/examples/howto/sandbox/sandb
     ox.html'>sandbox.html</a> | 94   <a href='http://code.google.com/chrome/extensions/examples/howto/sandbox/sandb
     ox.html'>sandbox.html</a> | 
| 95   has been loaded into the extension's <a href='http://code.google.com/chrome/ex
     tensions/dev/event_pages.html'>Event | 95   has been loaded into the extension's <a href='http://code.google.com/chrome/ex
     tensions/dev/event_pages.html'>Event | 
| 96   Page</a> (<a href='http://code.google.com/chrome/extensions/examples/howto/san
     dbox/eventpage.html'>eventpage.html</a>) | 96   Page</a> (<a href='http://code.google.com/chrome/extensions/examples/howto/san
     dbox/eventpage.html'>eventpage.html</a>) | 
| 97   via an <code>iframe</code>. <a href='http://code.google.com/chrome/extensions/
     examples/howto/sandbox/eventpage.js'>eventpage.js</a> | 97   via an <code>iframe</code>. <a href='http://code.google.com/chrome/extensions/
     examples/howto/sandbox/eventpage.js'>eventpage.js</a> | 
| 98   contains code that sends a message into the sandbox whenever the browser | 98   contains code that sends a message into the sandbox whenever the browser | 
| 99   action is clicked by finding the <code>iframe</code> on the page, and | 99   action is clicked by finding the <code>iframe</code> on the page, and | 
| (...skipping 14 matching lines...) Expand all  Loading... | 
| 114 | 114 | 
| 115 <p class="note"> | 115 <p class="note"> | 
| 116   For general information about the <code>postMessage</code> API, take a look at | 116   For general information about the <code>postMessage</code> API, take a look at | 
| 117   the <a href="https://developer.mozilla.org/en/DOM/window.postMessage"> | 117   the <a href="https://developer.mozilla.org/en/DOM/window.postMessage"> | 
| 118     <code>postMessage</code> documentation on MDN | 118     <code>postMessage</code> documentation on MDN | 
| 119   </a>. It's quite complete and worth reading. In particular, note that data can | 119   </a>. It's quite complete and worth reading. In particular, note that data can | 
| 120   only be passed back and forth if it's serializable. Functions, for instance, | 120   only be passed back and forth if it's serializable. Functions, for instance, | 
| 121   are not. | 121   are not. | 
| 122 </p> | 122 </p> | 
| 123 | 123 | 
| 124 <h3>Do something dangerous</h3> | 124 <h3 id="do_something">Do something dangerous</h3> | 
| 125 | 125 | 
| 126 <p> | 126 <p> | 
| 127   When <code>sandbox.html</code> is loaded, it loads the Handlebars library, and | 127   When <code>sandbox.html</code> is loaded, it loads the Handlebars library, and | 
| 128   creates and compiles an inline template in the way Handlebars suggests: | 128   creates and compiles an inline template in the way Handlebars suggests: | 
| 129 </p> | 129 </p> | 
| 130 | 130 | 
| 131 <pre><script src="handlebars-1.0.0.beta.6.js"></script> | 131 <pre><script src="handlebars-1.0.0.beta.6.js"></script> | 
| 132  <script id="hello-world-template" type="text/x-handlebars-template"> | 132  <script id="hello-world-template" type="text/x-handlebars-template"> | 
| 133    <div class="entry"> | 133    <div class="entry"> | 
| 134      <h1>Hello, {{thing}}!</h1> | 134      <h1>Hello, {{thing}}!</h1> | 
| 135    </div> | 135    </div> | 
| 136  </script> | 136  </script> | 
| 137  <script> | 137  <script> | 
| 138    var templates = []; | 138    var templates = []; | 
| 139    var source = document.getElementById('hello-world-template').innerHTML; | 139    var source = document.getElementById('hello-world-template').innerHTML; | 
| 140    templates['hello'] = Handlebars.compile(source); | 140    templates['hello'] = Handlebars.compile(source); | 
| 141  </script></pre> | 141  </script></pre> | 
| 142 | 142 | 
| 143 <p> | 143 <p> | 
| 144   This doesn't fail! Even though <code>Handlebars.compile</code> ends up using | 144   This doesn't fail! Even though <code>Handlebars.compile</code> ends up using | 
| 145   <code>new Function</code>, things work exactly as expected, and we end up with | 145   <code>new Function</code>, things work exactly as expected, and we end up with | 
| 146   a compiled template in <code>templates[‘hello']</code>. | 146   a compiled template in <code>templates[‘hello']</code>. | 
| 147 </p> | 147 </p> | 
| 148 | 148 | 
| 149 <h3>Pass the result back</h3> | 149 <h3 id="pass_result">Pass the result back</h3> | 
| 150 | 150 | 
| 151 <p> | 151 <p> | 
| 152   We'll make this template available for use by setting up a message listener | 152   We'll make this template available for use by setting up a message listener | 
| 153   that accepts commands from the Event Page. We'll use the <code>command</code> | 153   that accepts commands from the Event Page. We'll use the <code>command</code> | 
| 154   passed in to determine what ought to be done (you could imagine doing more | 154   passed in to determine what ought to be done (you could imagine doing more | 
| 155   than simply rendering; perhaps creating templates? Perhaps managing them in | 155   than simply rendering; perhaps creating templates? Perhaps managing them in | 
| 156   some way?), and the <code>context</code> will be passed into the template | 156   some way?), and the <code>context</code> will be passed into the template | 
| 157   directly for rendering. The rendered HTML will be passed back to the Event | 157   directly for rendering. The rendered HTML will be passed back to the Event | 
| 158   Page so the extension can do something useful with it later on: | 158   Page so the extension can do something useful with it later on: | 
| 159 </p> | 159 </p> | 
| (...skipping 29 matching lines...) Expand all  Loading... | 
| 189   This mechanism makes templating straightforward, but it of course isn't | 189   This mechanism makes templating straightforward, but it of course isn't | 
| 190   limited to templating. Any code that doesn't work out of the box under a | 190   limited to templating. Any code that doesn't work out of the box under a | 
| 191   strict Content Security Policy can be sandboxed; in fact, it's often useful | 191   strict Content Security Policy can be sandboxed; in fact, it's often useful | 
| 192   to sandbox components of your extensions that <em>would</em> run correctly in | 192   to sandbox components of your extensions that <em>would</em> run correctly in | 
| 193   order to restrict each piece of your program to the smallest set of privileges | 193   order to restrict each piece of your program to the smallest set of privileges | 
| 194   necessary for it to properly execute. The | 194   necessary for it to properly execute. The | 
| 195   <a href="http://www.youtube.com/watch?v=GBxv8SaX0gg">Writing Secure Web Apps | 195   <a href="http://www.youtube.com/watch?v=GBxv8SaX0gg">Writing Secure Web Apps | 
| 196   and Chrome Extensions</a> presentation from Google I/O 2012 gives some good | 196   and Chrome Extensions</a> presentation from Google I/O 2012 gives some good | 
| 197   examples of these technique in action, and is worth 56 minutes of your time. | 197   examples of these technique in action, and is worth 56 minutes of your time. | 
| 198 </p> | 198 </p> | 
| OLD | NEW | 
|---|