Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(482)

Side by Side Diff: chrome/common/extensions/docs/templates/articles/sandboxingEval.html

Issue 219213007: Remove .html extension from links (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 8 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 unified diff | Download patch
OLDNEW
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 18 matching lines...) Expand all
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# 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 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>
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". The manifest entry looks like this:
79 </p> 79 </p>
80 80
81 <pre data-filename="manifest.json"> 81 <pre data-filename="manifest.json">
82 { 82 {
83 ..., 83 ...,
84 "sandbox": { 84 "sandbox": {
85 "pages": ["sandbox.html"] 85 "pages": ["sandbox"]
86 }, 86 },
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'>sandbox</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'>eventpage</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
108 <pre data-filename="eventpage.js"> 108 <pre data-filename="eventpage.js">
(...skipping 12 matching lines...) Expand all
121 the <a href="https://developer.mozilla.org/en/DOM/window.postMessage"> 121 the <a href="https://developer.mozilla.org/en/DOM/window.postMessage">
122 <code>postMessage</code> documentation on MDN 122 <code>postMessage</code> documentation on MDN
123 </a>. It's quite complete and worth reading. In particular, note that data can 123 </a>. It's quite complete and worth reading. In particular, note that data can
124 only be passed back and forth if it's serializable. Functions, for instance, 124 only be passed back and forth if it's serializable. Functions, for instance,
125 are not. 125 are not.
126 </p> 126 </p>
127 127
128 <h3 id="do_something">Do something dangerous</h3> 128 <h3 id="do_something">Do something dangerous</h3>
129 129
130 <p> 130 <p>
131 When <code>sandbox.html</code> is loaded, it loads the Handlebars library, and 131 When <code>sandbox</code> is loaded, it loads the Handlebars library, and
132 creates and compiles an inline template in the way Handlebars suggests: 132 creates and compiles an inline template in the way Handlebars suggests:
133 </p> 133 </p>
134 134
135 <pre data-filename="sandbox.html"> 135 <pre data-filename="sandbox">
136 &lt;script src="handlebars-1.0.0.beta.6.js"&gt;&lt;/script&gt; 136 &lt;script src="handlebars-1.0.0.beta.6.js"&gt;&lt;/script&gt;
137 &lt;script id="hello-world-template" type="text/x-handlebars-template"&gt; 137 &lt;script id="hello-world-template" type="text/x-handlebars-template"&gt;
138 &lt;div class="entry"&gt; 138 &lt;div class="entry"&gt;
139 &lt;h1&gt;Hello, &#123&#123thing&#125&#125!&lt;/h1&gt; 139 &lt;h1&gt;Hello, &#123&#123thing&#125&#125!&lt;/h1&gt;
140 &lt;/div&gt; 140 &lt;/div&gt;
141 &lt;/script&gt; 141 &lt;/script&gt;
142 &lt;script&gt; 142 &lt;script&gt;
143 var templates = []; 143 var templates = [];
144 var source = document.getElementById('hello-world-template').innerHTML; 144 var source = document.getElementById('hello-world-template').innerHTML;
145 templates['hello'] = Handlebars.compile(source); 145 templates['hello'] = Handlebars.compile(source);
(...skipping 11 matching lines...) Expand all
157 <p> 157 <p>
158 We'll make this template available for use by setting up a message listener 158 We'll make this template available for use by setting up a message listener
159 that accepts commands from the Event Page. We'll use the <code>command</code> 159 that accepts commands from the Event Page. We'll use the <code>command</code>
160 passed in to determine what ought to be done (you could imagine doing more 160 passed in to determine what ought to be done (you could imagine doing more
161 than simply rendering; perhaps creating templates? Perhaps managing them in 161 than simply rendering; perhaps creating templates? Perhaps managing them in
162 some way?), and the <code>context</code> will be passed into the template 162 some way?), and the <code>context</code> will be passed into the template
163 directly for rendering. The rendered HTML will be passed back to the Event 163 directly for rendering. The rendered HTML will be passed back to the Event
164 Page so the extension can do something useful with it later on: 164 Page so the extension can do something useful with it later on:
165 </p> 165 </p>
166 166
167 <pre data-filename="sandbox.html"> 167 <pre data-filename="sandbox">
168 &lt;script&gt; 168 &lt;script&gt;
169 window.addEventListener('message', function(event) { 169 window.addEventListener('message', function(event) {
170 var command = event.data.command; 170 var command = event.data.command;
171 var name = event.data.name || 'hello'; 171 var name = event.data.name || 'hello';
172 switch(command) { 172 switch(command) {
173 case 'render': 173 case 'render':
174 event.source.postMessage({ 174 event.source.postMessage({
175 name: name, 175 name: name,
176 html: templates[name](event.data.context) 176 html: templates[name](event.data.context)
177 }, event.origin); 177 }, event.origin);
178 break; 178 break;
179 179
180 // case 'somethingElse': 180 // case 'somethingElse':
181 // ... 181 // ...
182 } 182 }
183 }); 183 });
184 &lt;/script&gt; 184 &lt;/script&gt;
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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698