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='../extensions/contentSecurityPolicy.html'> | 6 <a href='../extensions/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 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
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 id="creating_and_using">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='/extensions/samples.html#3c6dfba67f6a7480d931b5a4a646c151ad1a049b'>sa
ndboxing |
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 id="list_files">List files in manifest</h3> | 71 <h3 id="list_files">List files in manifest</h3> |
72 | 72 |
73 <p> | 73 <p> |
(...skipping 10 matching lines...) Expand all Loading... |
84 "pages": ["sandbox.html"] | 84 "pages": ["sandbox.html"] |
85 }, | 85 }, |
86 ... | 86 ... |
87 }</pre> | 87 }</pre> |
88 | 88 |
89 <h3 id="load_file">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='/extensions/examples/howto/sandbox/sandbox.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='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='/extensions/examples/howto/sandbox/eventpage.html'>eventpag
e.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='/extensions/examples/howto/sandbox/eventp
age.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 |
100 executing the <code>postMessage</code> method on its | 100 executing the <code>postMessage</code> method on its |
101 <code>contentWindow</code>. The message is an object containing two | 101 <code>contentWindow</code>. The message is an object containing two |
102 properties: <code>context</code> and <code>command</code>. We'll dive into | 102 properties: <code>context</code> and <code>command</code>. We'll dive into |
103 both in a moment. | 103 both in a moment. |
104 </p> | 104 </p> |
105 | 105 |
106 <pre>chrome.browserAction.onClicked.addListener(function() { | 106 <pre>chrome.browserAction.onClicked.addListener(function() { |
107 var iframe = document.getElementById('theFrame'); | 107 var iframe = document.getElementById('theFrame'); |
(...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after 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 |