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'> |
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 |
11 disabled. Chrome Apps have an | 11 disabled. Chrome Apps have an |
12 <a href='contentSecurityPolicy.html'>even more strict | 12 <a href='contentSecurityPolicy'>even more strict |
13 policy</a>, and we're quite happy with the security properties these policies | 13 policy</a>, and we're quite happy with the security properties these policies |
14 provide. | 14 provide. |
15 </p> | 15 </p> |
16 | 16 |
17 <p> | 17 <p> |
18 We recognize, however, that a variety of libraries use <code>eval()</code> and | 18 We recognize, however, that a variety of libraries use <code>eval()</code> and |
19 <code>eval</code>-like constructs such as <code>new Function()</code> for | 19 <code>eval</code>-like constructs such as <code>new Function()</code> for |
20 performance optimization and ease of expression. Templating libraries are | 20 performance optimization and ease of expression. Templating libraries are |
21 especially prone to this style of implementation. While some (like | 21 especially prone to this style of implementation. While some (like |
22 <a href='http://angularjs.org/'>Angular.js</a>) support CSP out of the box, | 22 <a href='http://angularjs.org/'>Angular.js</a>) support CSP out of the box, |
(...skipping 30 matching lines...) Expand all 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='/extensions/samples.html#sandboxed-frame'>sandboxing | 63 <a href='/extensions/samples#sandboxed-frame'>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 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 13 matching lines...) Expand all Loading... |
87 ... | 87 ... |
88 } | 88 } |
89 </pre> | 89 </pre> |
90 | 90 |
91 <h3 id="load_file">Load the sandboxed file</h3> | 91 <h3 id="load_file">Load the sandboxed file</h3> |
92 | 92 |
93 <p> | 93 <p> |
94 In order to do something interesting with the sandboxed file, we need to load | 94 In order to do something interesting with the sandboxed file, we need to load |
95 it in a context where it can be addressed by the extension's code. Here, | 95 it in a context where it can be addressed by the extension's code. Here, |
96 <a href='/extensions/examples/howto/sandbox/sandbox.html'>sandbox.html</a> | 96 <a href='/extensions/examples/howto/sandbox/sandbox.html'>sandbox.html</a> |
97 has been loaded into the extension's <a href='event_pages.html'>Event | 97 has been loaded into the extension's <a href='event_pages'>Event |
98 Page</a> (<a href='/extensions/examples/howto/sandbox/eventpage.html'>eventpag
e.html</a>) | 98 Page</a> (<a href='/extensions/examples/howto/sandbox/eventpage.html'>eventpag
e.html</a>) |
99 via an <code>iframe</code>. <a href='/extensions/examples/howto/sandbox/eventp
age.js'>eventpage.js</a> | 99 via an <code>iframe</code>. <a href='/extensions/examples/howto/sandbox/eventp
age.js'>eventpage.js</a> |
100 contains code that sends a message into the sandbox whenever the browser | 100 contains code that sends a message into the sandbox whenever the browser |
101 action is clicked by finding the <code>iframe</code> on the page, and | 101 action is clicked by finding the <code>iframe</code> on the page, and |
102 executing the <code>postMessage</code> method on its | 102 executing the <code>postMessage</code> method on its |
103 <code>contentWindow</code>. The message is an object containing two | 103 <code>contentWindow</code>. The message is an object containing two |
104 properties: <code>context</code> and <code>command</code>. We'll dive into | 104 properties: <code>context</code> and <code>command</code>. We'll dive into |
105 both in a moment. | 105 both in a moment. |
106 </p> | 106 </p> |
107 | 107 |
(...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
180 // case 'somethingElse': | 180 // case 'somethingElse': |
181 // ... | 181 // ... |
182 } | 182 } |
183 }); | 183 }); |
184 </script> | 184 </script> |
185 </pre> | 185 </pre> |
186 | 186 |
187 <p> | 187 <p> |
188 Back in the Event Page, we'll receive this message, and do something | 188 Back in the Event Page, we'll receive this message, and do something |
189 interesting with the <code>html</code> data we've been passed. In this case, | 189 interesting with the <code>html</code> data we've been passed. In this case, |
190 we'll just echo it out via a <a href='desktop_notifications.html'>Desktop | 190 we'll just echo it out via a <a href='desktop_notifications'>Desktop |
191 Notification</a>, but it's entirely possible to use this HTML safely as part | 191 Notification</a>, but it's entirely possible to use this HTML safely as part |
192 of the extension's UI. Inserting it via <code>innerHTML</code> doesn't pose a | 192 of the extension's UI. Inserting it via <code>innerHTML</code> doesn't pose a |
193 significant security risk, as even a complete compromise of the sandboxed code | 193 significant security risk, as even a complete compromise of the sandboxed code |
194 through some clever attack would be unable to inject dangerous script or | 194 through some clever attack would be unable to inject dangerous script or |
195 plugin content into the high-permission extension context. | 195 plugin content into the high-permission extension context. |
196 </p> | 196 </p> |
197 | 197 |
198 <p> | 198 <p> |
199 This mechanism makes templating straightforward, but it of course isn't | 199 This mechanism makes templating straightforward, but it of course isn't |
200 limited to templating. Any code that doesn't work out of the box under a | 200 limited to templating. Any code that doesn't work out of the box under a |
201 strict Content Security Policy can be sandboxed; in fact, it's often useful | 201 strict Content Security Policy can be sandboxed; in fact, it's often useful |
202 to sandbox components of your extensions that <em>would</em> run correctly in | 202 to sandbox components of your extensions that <em>would</em> run correctly in |
203 order to restrict each piece of your program to the smallest set of privileges | 203 order to restrict each piece of your program to the smallest set of privileges |
204 necessary for it to properly execute. The | 204 necessary for it to properly execute. The |
205 <a href="http://www.youtube.com/watch?v=GBxv8SaX0gg">Writing Secure Web Apps | 205 <a href="http://www.youtube.com/watch?v=GBxv8SaX0gg">Writing Secure Web Apps |
206 and Chrome Extensions</a> presentation from Google I/O 2012 gives some good | 206 and Chrome Extensions</a> presentation from Google I/O 2012 gives some good |
207 examples of these technique in action, and is worth 56 minutes of your time. | 207 examples of these technique in action, and is worth 56 minutes of your time. |
208 </p> | 208 </p> |
OLD | NEW |