chrome/common/extensions/docs/server2/templates/articles/contentSecurityPolicy.html - Issue 10832110: Docs: Clarifying the CSP-friendly replacement for <body onload="XXX">.

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

Issue 10832110: Docs: Clarifying the CSP-friendly replacement for <body onload="XXX">. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src

Patch Set: Rebuilt. Created 8 years, 4 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 | Annotate | Revision Log

« no previous file with comments | « chrome/common/extensions/docs/extensions/contentSecurityPolicy.html ('k') | chrome/common/extensions/docs/static/contentSecurityPolicy.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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 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