| OLD | NEW |
|---|
| 1 <div id="pageData-name" class="pageData">Content Security Policy (CSP)</div> | 1 <div id="pageData-name" class="pageData">Content Security Policy (CSP)</div> |
| 2 <div id="pageData-showTOC" class="pageData">true</div> | 2 <div id="pageData-showTOC" class="pageData">true</div> |
| 3 | 3 |
| 4 <p> | 4 <p> |
| 5 In order to mitigate a large class of potental cross-site scripting issues, | 5 In order to mitigate a large class of potental 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.html"> |
| 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 |
| (...skipping 75 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 86 // do something awesome! | 86 // do something awesome! |
| 87 } | 87 } |
| 88 | 88 |
| 89 function totallyAwesome() { | 89 function totallyAwesome() { |
| 90 // do something TOTALLY awesome! | 90 // do something TOTALLY awesome! |
| 91 } | 91 } |
| 92 | 92 |
| 93 function clickHandler(element) { | 93 function clickHandler(element) { |
| 94 setTimeout(<strong>"awesome(); totallyAwesome()"</strong>, 1000); | 94 setTimeout(<strong>"awesome(); totallyAwesome()"</strong>, 1000); |
| 95 } | 95 } |
| 96 |
| 97 function main() { |
| 98 // Initialization work goes here. |
| 99 } |
| 96 </script> | 100 </script> |
| 97 </head> | 101 </head> |
| 98 <body> | 102 <body onload="main();"> |
| 99 <button <strong>onclick="clickHandler(this)"</strong>> | 103 <button <strong>onclick="clickHandler(this)"</strong>> |
| 100 Click for awesomeness! | 104 Click for awesomeness! |
| 101 </button> | 105 </button> |
| 102 </body> | 106 </body> |
| 103 </html></pre> | 107 </html></pre> |
| 104 | 108 |
| 105 <p> | 109 <p> |
| 106 Three things will need to change in order to make this work the way you expect | 110 Three things will need to change in order to make this work the way you expect |
| 107 it to: | 111 it to: |
| 108 </p> | 112 </p> |
| 109 | 113 |
| 110 <ul> | 114 <ul> |
| 111 <li> | 115 <li> |
| 112 The <code>clickHandler</code> definition needs to move into an external | 116 The <code>clickHandler</code> definition needs to move into an external |
| 113 JavaScript file (<code>popup.js</code> would be a good target). | 117 JavaScript file (<code>popup.js</code> would be a good target). |
| 114 </li> | 118 </li> |
| 115 <li> | 119 <li> |
| 116 The inline event handler definition must be rewritten in terms of | 120 <p>The inline event handler definitions must be rewritten in terms of |
| 117 <code>addEventListener</code> and extracted into <code>popup.js</code>. | 121 <code>addEventListener</code> and extracted into <code>popup.js</code>.</p> |
| 122 <p>If you're currently kicking off your program's execution via code like |
| 123 <code><body onload="main();"></code>, consider replacing it by hooking |
| 124 into the document's <code>DOMContentLoaded</code> event, or the window's |
| 125 <code>load</code> event, depending on your needs. Below we'll use the |
| 126 former, as it generally triggers more quickly.</p> |
| 118 </li> | 127 </li> |
| 119 <li> | 128 <li> |
| 120 The <code>setTimeout</code> call will need to be rewritten to avoid | 129 The <code>setTimeout</code> call will need to be rewritten to avoid |
| 121 converting the string <code>"awesome(); totallyAwesome()"</code> into | 130 converting the string <code>"awesome(); totallyAwesome()"</code> into |
| 122 JavaScript for execution. | 131 JavaScript for execution. |
| 123 </li> | 132 </li> |
| 124 </ul> | 133 </ul> |
| 125 | 134 |
| 126 <p> | 135 <p> |
| 127 Those changes might look something like the following: | 136 Those changes might look something like the following: |
| 128 </p> | 137 </p> |
| 129 | 138 |
| 130 <pre>popup.js: | 139 <pre>popup.js: |
| 131 ========= | 140 ========= |
| 132 | 141 |
| 133 function awesome() { | 142 function awesome() { |
| 134 // Do something awesome! | 143 // Do something awesome! |
| 135 } | 144 } |
| 136 | 145 |
| 137 function totallyAwesome() { | 146 function totallyAwesome() { |
| 138 // do something TOTALLY awesome! | 147 // do something TOTALLY awesome! |
| 139 } | 148 } |
| 140 | 149 |
| 141 <strong> | 150 <strong>function awesomeTask() { |
| 142 function awesomeTask() { | |
| 143 awesome(); | 151 awesome(); |
| 144 totallyAwesome(); | 152 totallyAwesome(); |
| 145 } | 153 }</strong> |
| 146 </strong> | |
| 147 | 154 |
| 148 function clickHandler(e) { | 155 function clickHandler(e) { |
| 149 setTimeout(<strong>awesomeTask</strong>, 1000); | 156 setTimeout(<strong>awesomeTask</strong>, 1000); |
| 150 } | 157 } |
| 151 | 158 |
| 159 function main() { |
| 160 // Initialization work goes here. |
| 161 } |
| 162 |
| 152 // Add event listeners once the DOM has fully loaded by listening for the | 163 // Add event listeners once the DOM has fully loaded by listening for the |
| 153 // `DOMContentLoaded` event on the document, and adding your listeners to | 164 // `DOMContentLoaded` event on the document, and adding your listeners to |
| 154 // specific elements when it triggers. | 165 // specific elements when it triggers. |
| 155 document.addEventListener('DOMContentLoaded', function () { | 166 <strong>document.addEventListener('DOMContentLoaded', function () {</strong> |
| 156 document.querySelector('button').addEventListener('click', clickHandler); | 167 document.querySelector('button').addEventListener('click', clickHandler); |
| 168 main(); |
| 157 }); | 169 }); |
| 158 | 170 </pre> |
| 159 popup.html: | 171 <pre>popup.html: |
| 160 =========== | 172 =========== |
| 161 | 173 |
| 162 <!doctype html> | 174 <!doctype html> |
| 163 <html> | 175 <html> |
| 164 <head> | 176 <head> |
| 165 <title>My Awesome Popup!</title> | 177 <title>My Awesome Popup!</title> |
| 166 <script <strong>src="popup.js"</strong>></script> | 178 <script <strong>src="popup.js"</strong>></script> |
| 167 </head> | 179 </head> |
| 168 <body> | 180 <body> |
| 169 <button>Click for awesomeness!</button> | 181 <button>Click for awesomeness!</button> |
| (...skipping 102 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 272 | 284 |
| 273 <p> | 285 <p> |
| 274 You may, of course, tighten this policy to whatever extent your extension | 286 You may, of course, tighten this policy to whatever extent your extension |
| 275 allows in order to increase security at the expense of convenience. To specify | 287 allows in order to increase security at the expense of convenience. To specify |
| 276 that your extension can only load resources of <em>any</em> type (images, etc) | 288 that your extension can only load resources of <em>any</em> type (images, etc) |
| 277 from its own package, for example, a policy of <code>default-src 'self'</code> | 289 from its own package, for example, a policy of <code>default-src 'self'</code> |
| 278 would be appropriate. The <a href="samples.html#mappy">Mappy</a> sample | 290 would be appropriate. The <a href="samples.html#mappy">Mappy</a> sample |
| 279 extension is a good example of an extension that's been locked down above and | 291 extension is a good example of an extension that's been locked down above and |
| 280 beyond the defaults. | 292 beyond the defaults. |
| 281 </p> | 293 </p> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 10832110:
Docs: Clarifying the CSP-friendly replacement for <body onload="XXX">. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src