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

Side by Side Diff: chrome/common/extensions/docs/templates/articles/contentSecurityPolicy.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>Content Security Policy (CSP)</h1> 1 <h1>Content Security Policy (CSP)</h1>
2 2
3 3
4 <p> 4 <p>
5 In order to mitigate a large class of potential cross-site scripting issues, 5 In order to mitigate a large class of potential cross-site scripting issues,
6 Chrome's extension system has incorporated the general concept of 6 Chrome's extension system has incorporated the general concept of
7 <a href="http://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specif ication.dev.html"> 7 <a href="http://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specif ication.dev">
8 <strong>Content Security Policy (CSP)</strong> 8 <strong>Content Security Policy (CSP)</strong>
9 </a>. This introduces some fairly strict policies that will make extensions 9 </a>. This introduces some fairly strict policies that will make extensions
10 more secure by default, and provides you with the ability to create and 10 more secure by default, and provides you with the ability to create and
11 enforce rules governing the types of content that can be loaded and executed 11 enforce rules governing the types of content that can be loaded and executed
12 by your extensions and applications. 12 by your extensions and applications.
13 </p> 13 </p>
14 14
15 <p> 15 <p>
16 In general, CSP works as a black/whitelisting mechanism for resources loaded 16 In general, CSP works as a black/whitelisting mechanism for resources loaded
17 or executed by your extensions. Defining a reasonable policy for your 17 or executed by your extensions. Defining a reasonable policy for your
18 extension enables you to carefully consider the resources that your extension 18 extension enables you to carefully consider the resources that your extension
19 requires, and to ask the browser to ensure that those are the only resources 19 requires, and to ask the browser to ensure that those are the only resources
20 your extension has access to. These policies provide security over and above 20 your extension has access to. These policies provide security over and above
21 the <a href="declare_permissions.html">host permissions</a> your extension 21 the <a href="declare_permissions">host permissions</a> your extension
22 requests; they're an additional layer of protection, not a replacement. 22 requests; they're an additional layer of protection, not a replacement.
23 </p> 23 </p>
24 24
25 <p> 25 <p>
26 On the web, such a policy is defined via an HTTP header or <code>meta</code> 26 On the web, such a policy is defined via an HTTP header or <code>meta</code>
27 element. Inside Chrome's extension system, neither is an appropriate 27 element. Inside Chrome's extension system, neither is an appropriate
28 mechanism. Instead, an extension's policy is defined via the extension's 28 mechanism. Instead, an extension's policy is defined via the extension's
29 <a href="manifest.html"><code>manifest.json</code></a> file as follows: 29 <a href="manifest"><code>manifest.json</code></a> file as follows:
30 </p> 30 </p>
31 31
32 <pre data-filename="manifest.json"> 32 <pre data-filename="manifest.json">
33 { 33 {
34 ..., 34 ...,
35 "content_security_policy": "[POLICY STRING GOES HERE]" 35 "content_security_policy": "[POLICY STRING GOES HERE]"
36 ... 36 ...
37 } 37 }
38 </pre> 38 </pre>
39 39
40 <p class="note"> 40 <p class="note">
41 For full details regarding CSP's syntax, please take a look at 41 For full details regarding CSP's syntax, please take a look at
42 <a href="http://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specif ication.dev.html#syntax"> 42 <a href="http://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specif ication.dev#syntax">
43 the Content Security Policy specification 43 the Content Security Policy specification
44 </a>, and the <a href="http://www.html5rocks.com/en/tutorials/security/content -security-policy/"> 44 </a>, and the <a href="http://www.html5rocks.com/en/tutorials/security/content -security-policy/">
45 "An Introduction to Content Security Policy" 45 "An Introduction to Content Security Policy"
46 </a> article on HTML5Rocks. 46 </a> article on HTML5Rocks.
47 </p> 47 </p>
48 48
49 <h2 id="restrictions">Default Policy Restrictions</h2> 49 <h2 id="restrictions">Default Policy Restrictions</h2>
50 50
51 <p> 51 <p>
52 Packages that do not define a <a href="manifestVersion.html"> 52 Packages that do not define a <a href="manifestVersion">
53 <code>manifest_version</code> 53 <code>manifest_version</code>
54 </a> have no default content security policy. Those that select 54 </a> have no default content security policy. Those that select
55 <code>manifest_version</code> 2, have a default content security policy 55 <code>manifest_version</code> 2, have a default content security policy
56 of: 56 of:
57 </p> 57 </p>
58 58
59 <pre>script-src 'self'; object-src 'self'</pre> 59 <pre>script-src 'self'; object-src 'self'</pre>
60 60
61 <p> 61 <p>
62 This policy adds security by limiting extensions and applications in three 62 This policy adds security by limiting extensions and applications in three
(...skipping 28 matching lines...) Expand all
91 <code>&lt;script&gt;</code> blocks <strong>and</strong> inline event handlers 91 <code>&lt;script&gt;</code> blocks <strong>and</strong> inline event handlers
92 (e.g. <code>&lt;button onclick="..."&gt;</code>). 92 (e.g. <code>&lt;button onclick="..."&gt;</code>).
93 </p> 93 </p>
94 94
95 <p> 95 <p>
96 The first restriction wipes out a huge class of cross-site scripting attacks 96 The first restriction wipes out a huge class of cross-site scripting attacks
97 by making it impossible for you to accidentally execute script provided by a 97 by making it impossible for you to accidentally execute script provided by a
98 malicious third-party. It does, however, require you to write your code with a 98 malicious third-party. It does, however, require you to write your code with a
99 clean separation between content and behavior (which you should of course do 99 clean separation between content and behavior (which you should of course do
100 anyway, right?). An example might make this clearer. You might try to write a 100 anyway, right?). An example might make this clearer. You might try to write a
101 <a href="browserAction.html#popups">Browser Action's popup</a> as a single 101 <a href="browserAction#popups">Browser Action's popup</a> as a single
102 <code>popup.html</code> containing: 102 <code>popup</code> containing:
103 </p> 103 </p>
104 104
mkearney1 2014/04/09 19:43:30 Keep .html in as it refers to filename.
105 <pre data-filename="popup.html"> 105 <pre data-filename="popup">
106 &lt;!doctype html&gt; 106 &lt;!doctype html&gt;
107 &lt;html&gt; 107 &lt;html&gt;
108 &lt;head&gt; 108 &lt;head&gt;
109 &lt;title&gt;My Awesome Popup!&lt;/title&gt; 109 &lt;title&gt;My Awesome Popup!&lt;/title&gt;
110 &lt;script&gt; 110 &lt;script&gt;
111 function awesome() { 111 function awesome() {
112 // do something awesome! 112 // do something awesome!
113 } 113 }
114 114
115 function totallyAwesome() { 115 function totallyAwesome() {
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after
185 } 185 }
186 186
187 // Add event listeners once the DOM has fully loaded by listening for the 187 // Add event listeners once the DOM has fully loaded by listening for the
188 // `DOMContentLoaded` event on the document, and adding your listeners to 188 // `DOMContentLoaded` event on the document, and adding your listeners to
189 // specific elements when it triggers. 189 // specific elements when it triggers.
190 <strong>document.addEventListener('DOMContentLoaded', function () {</strong> 190 <strong>document.addEventListener('DOMContentLoaded', function () {</strong>
191 document.querySelector('button').addEventListener('click', clickHandler); 191 document.querySelector('button').addEventListener('click', clickHandler);
192 main(); 192 main();
193 }); 193 });
194 </pre> 194 </pre>
195 <pre data-filename="popup.html"> 195 <pre data-filename="popup">
mkearney1 2014/04/09 19:43:30 Keep .html in as it refers to filename.
196 &lt;!doctype html&gt; 196 &lt;!doctype html&gt;
197 &lt;html&gt; 197 &lt;html&gt;
198 &lt;head&gt; 198 &lt;head&gt;
199 &lt;title&gt;My Awesome Popup!&lt;/title&gt; 199 &lt;title&gt;My Awesome Popup!&lt;/title&gt;
200 &lt;script <strong>src="popup.js"</strong>&gt;&lt;/script&gt; 200 &lt;script <strong>src="popup.js"</strong>&gt;&lt;/script&gt;
201 &lt;/head&gt; 201 &lt;/head&gt;
202 &lt;body&gt; 202 &lt;body&gt;
203 &lt;button&gt;Click for awesomeness!&lt;/button&gt; 203 &lt;button&gt;Click for awesomeness!&lt;/button&gt;
204 &lt;/body&gt; 204 &lt;/body&gt;
205 &lt;/html&gt; 205 &lt;/html&gt;
(...skipping 10 matching lines...) Expand all
216 executes the code you've specifically approved, preventing an active network 216 executes the code you've specifically approved, preventing an active network
217 attacker from maliciously redirecting your request for a resource. 217 attacker from maliciously redirecting your request for a resource.
218 </p> 218 </p>
219 219
220 <p> 220 <p>
221 Instead of writing code that depends on jQuery (or any other library) loading 221 Instead of writing code that depends on jQuery (or any other library) loading
222 from an external CDN, consider including the specific version of jQuery in 222 from an external CDN, consider including the specific version of jQuery in
223 your extension package. That is, instead of: 223 your extension package. That is, instead of:
224 </p> 224 </p>
225 225
226 <pre data-filename="popup.html"> 226 <pre data-filename="popup">
mkearney1 2014/04/09 19:43:30 Keep .html in as it refers to filename.
227 &lt;!doctype html&gt; 227 &lt;!doctype html&gt;
228 &lt;html&gt; 228 &lt;html&gt;
229 &lt;head&gt; 229 &lt;head&gt;
230 &lt;title&gt;My Awesome Popup!&lt;/title&gt; 230 &lt;title&gt;My Awesome Popup!&lt;/title&gt;
231 &lt;script src="<strong>http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jq uery.min.js</strong>"&gt;&lt;/script&gt; 231 &lt;script src="<strong>http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jq uery.min.js</strong>"&gt;&lt;/script&gt;
232 &lt;/head&gt; 232 &lt;/head&gt;
233 &lt;body&gt; 233 &lt;body&gt;
234 &lt;button&gt;Click for awesomeness!&lt;/button&gt; 234 &lt;button&gt;Click for awesomeness!&lt;/button&gt;
235 &lt;/body&gt; 235 &lt;/body&gt;
236 &lt;/html&gt; 236 &lt;/html&gt;
237 </pre> 237 </pre>
238 238
239 <p> 239 <p>
240 Download the file, include it in your package, and write: 240 Download the file, include it in your package, and write:
241 <p> 241 <p>
242 242
243 <pre data-filename="popup.html"> 243 <pre data-filename="popup">
mkearney1 2014/04/09 19:43:30 Keep .html in as it refers to filename.
244 &lt;!doctype html&gt; 244 &lt;!doctype html&gt;
245 &lt;html&gt; 245 &lt;html&gt;
246 &lt;head&gt; 246 &lt;head&gt;
247 &lt;title&gt;My Awesome Popup!&lt;/title&gt; 247 &lt;title&gt;My Awesome Popup!&lt;/title&gt;
248 &lt;script src="<strong>jquery.min.js</strong>"&gt;&lt;/script&gt; 248 &lt;script src="<strong>jquery.min.js</strong>"&gt;&lt;/script&gt;
249 &lt;/head&gt; 249 &lt;/head&gt;
250 &lt;body&gt; 250 &lt;body&gt;
251 &lt;button&gt;Click for awesomeness!&lt;/button&gt; 251 &lt;button&gt;Click for awesomeness!&lt;/button&gt;
252 &lt;/body&gt; 252 &lt;/body&gt;
253 &lt;/html&gt;</pre> 253 &lt;/html&gt;</pre>
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after
304 304
305 <p class="note"> 305 <p class="note">
306 Note that both <code>script-src</code> and <code>object-src</code> are defined 306 Note that both <code>script-src</code> and <code>object-src</code> are defined
307 by the policy. Chrome will not accept a policy that doesn't limit each of 307 by the policy. Chrome will not accept a policy that doesn't limit each of
308 these values to (at least) <code>'self'</code>. 308 these values to (at least) <code>'self'</code>.
309 </p> 309 </p>
310 310
311 <p> 311 <p>
312 Making use of Google Analytics is the canonical example for this sort of 312 Making use of Google Analytics is the canonical example for this sort of
313 policy definition. It's common enough that we've provided an Analytics 313 policy definition. It's common enough that we've provided an Analytics
314 boilerplate of sorts in the <a href="samples.html#event-tracking-with-google-a nalytics">Event Tracking 314 boilerplate of sorts in the <a href="samples#event-tracking-with-google-analyt ics">Event Tracking
315 with Google Analytics</a> sample extension, and a 315 with Google Analytics</a> sample extension, and a
316 <a href="tut_analytics.html">brief tutorial</a> that goes into more detail. 316 <a href="tut_analytics">brief tutorial</a> that goes into more detail.
317 </p> 317 </p>
318 318
319 <h3 id="relaxing-eval">Evaluated JavaScript</h3> 319 <h3 id="relaxing-eval">Evaluated JavaScript</h3>
320 320
321 <p> 321 <p>
322 The policy against <code>eval()</code> and its relatives like 322 The policy against <code>eval()</code> and its relatives like
323 <code>setTimeout(String)</code>, <code>setInterval(String)</code>, and 323 <code>setTimeout(String)</code>, <code>setInterval(String)</code>, and
324 <code>new Function(String)</code> can be relaxed by adding 324 <code>new Function(String)</code> can be relaxed by adding
325 <code>'unsafe-eval'</code> to your policy: 325 <code>'unsafe-eval'</code> to your policy:
326 </p> 326 </p>
327 327
328 <pre data-filename="manifest.json"> 328 <pre data-filename="manifest.json">
329 "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" 329 "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
330 </pre> 330 </pre>
331 331
332 <p> 332 <p>
333 However, we strongly recommend against doing this. These functions are 333 However, we strongly recommend against doing this. These functions are
334 notorious XSS attack vectors. 334 notorious XSS attack vectors.
335 </p> 335 </p>
336 336
337 <h2 id="tightening">Tightening the default policy</h2> 337 <h2 id="tightening">Tightening the default policy</h2>
338 338
339 <p> 339 <p>
340 You may, of course, tighten this policy to whatever extent your extension 340 You may, of course, tighten this policy to whatever extent your extension
341 allows in order to increase security at the expense of convenience. To specify 341 allows in order to increase security at the expense of convenience. To specify
342 that your extension can only load resources of <em>any</em> type (images, etc) 342 that your extension can only load resources of <em>any</em> type (images, etc)
343 from its own package, for example, a policy of <code>default-src 'self'</code> 343 from its own package, for example, a policy of <code>default-src 'self'</code>
344 would be appropriate. The <a href="samples.html#mappy">Mappy</a> sample 344 would be appropriate. The <a href="samples#mappy">Mappy</a> sample
345 extension is a good example of an extension that's been locked down above and 345 extension is a good example of an extension that's been locked down above and
346 beyond the defaults. 346 beyond the defaults.
347 </p> 347 </p>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698