Chromium Code Reviews| OLD | NEW |
|---|---|
| 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 Loading... | |
| 91 <code><script></code> blocks <strong>and</strong> inline event handlers | 91 <code><script></code> blocks <strong>and</strong> inline event handlers |
| 92 (e.g. <code><button onclick="..."></code>). | 92 (e.g. <code><button onclick="..."></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 <!doctype html> | 106 <!doctype html> |
| 107 <html> | 107 <html> |
| 108 <head> | 108 <head> |
| 109 <title>My Awesome Popup!</title> | 109 <title>My Awesome Popup!</title> |
| 110 <script> | 110 <script> |
| 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 Loading... | |
| 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 <!doctype html> | 196 <!doctype html> |
| 197 <html> | 197 <html> |
| 198 <head> | 198 <head> |
| 199 <title>My Awesome Popup!</title> | 199 <title>My Awesome Popup!</title> |
| 200 <script <strong>src="popup.js"</strong>></script> | 200 <script <strong>src="popup.js"</strong>></script> |
| 201 </head> | 201 </head> |
| 202 <body> | 202 <body> |
| 203 <button>Click for awesomeness!</button> | 203 <button>Click for awesomeness!</button> |
| 204 </body> | 204 </body> |
| 205 </html> | 205 </html> |
| (...skipping 10 matching lines...) Expand all Loading... | |
| 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 <!doctype html> | 227 <!doctype html> |
| 228 <html> | 228 <html> |
| 229 <head> | 229 <head> |
| 230 <title>My Awesome Popup!</title> | 230 <title>My Awesome Popup!</title> |
| 231 <script src="<strong>http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jq uery.min.js</strong>"></script> | 231 <script src="<strong>http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jq uery.min.js</strong>"></script> |
| 232 </head> | 232 </head> |
| 233 <body> | 233 <body> |
| 234 <button>Click for awesomeness!</button> | 234 <button>Click for awesomeness!</button> |
| 235 </body> | 235 </body> |
| 236 </html> | 236 </html> |
| 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 <!doctype html> | 244 <!doctype html> |
| 245 <html> | 245 <html> |
| 246 <head> | 246 <head> |
| 247 <title>My Awesome Popup!</title> | 247 <title>My Awesome Popup!</title> |
| 248 <script src="<strong>jquery.min.js</strong>"></script> | 248 <script src="<strong>jquery.min.js</strong>"></script> |
| 249 </head> | 249 </head> |
| 250 <body> | 250 <body> |
| 251 <button>Click for awesomeness!</button> | 251 <button>Click for awesomeness!</button> |
| 252 </body> | 252 </body> |
| 253 </html></pre> | 253 </html></pre> |
| (...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 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> |
| OLD | NEW |