| OLD | NEW |
|---|
| (Empty) | |
| 1 <h1 class="page_title">Comply with CSP</h1> |
| 2 <div id="pageData-showTOC" class="pageData">true</div> |
| 3 <p> |
| 4 If you're unfamiliar with Content Security Policy (CSP), |
| 5 <a href="http://www.html5rocks.com/en/tutorials/security/content-security-policy
/">An Introduction to Content Security Policy</a> |
| 6 is a good starting point. |
| 7 It covers the broader web platform view of CSP; |
| 8 packaged apps CSP isn't as flexible. |
| 9 You should read the |
| 10 <a href="http://code.google.com/chrome/extensions/contentSecurityPolicy.html">Ch
rome extension Content Security Policy</a> |
| 11 as it's the foundation for the packaged app CSP. |
| 12 For brevity's sake, |
| 13 we don't repeat the same information here. |
| 14 </p> |
| 15 <p> |
| 16 CSP is a policy to mitigate against cross-site scripting issues, |
| 17 and we all know that cross-scripting is bad. |
| 18 We aren’t going to try and convince you |
| 19 that CSP is a warm-and-fuzzy new policy. |
| 20 There's work involved; |
| 21 you'll need to learn how to do fundamental tasks differently. |
| 22 </p> |
| 23 <p> |
| 24 The purpose of this doc is to tell you |
| 25 exactly what the CSP policy is for packaged apps, |
| 26 what you need to do to comply with it, |
| 27 and how you can still do those fundamental tasks |
| 28 in a way that is CSP–compliant. |
| 29 </p> |
| 30 <h2 id="what">What is the CSP for packaged apps?</h2> |
| 31 <p>The content security policy for packaged apps restricts |
| 32 you from doing the following:</p> |
| 33 <ul> |
| 34 <li>You can’t use inline scripting in your packaged app pages. |
| 35 The restriction bans both <script> blocks and |
| 36 event handlers (<button onclick=”...”>).</li> |
| 37 <li>You can’t reference any external resources in any of your app files |
| 38 (except for video and audio resources). |
| 39 You can’t embed external resources in an iframe.</li> |
| 40 <li>You can’t use string-to-JavaScript methods like |
| 41 <code>eval()</code> and <code>function()</code>.</li> |
| 42 </ul> |
| 43 <p>This is implemented via the following policy value:</p> |
| 44 <pre> |
| 45 default-src 'self'; |
| 46 connect-src *; |
| 47 style-src 'self' blob: data: filesystem: 'unsafe-inline'; |
| 48 img-src 'self' blob: data: filesystem:; |
| 49 frame-src 'self' blob: data: filesystem:; |
| 50 font-src 'self' blob: data: filesystem:; |
| 51 media-src *; |
| 52 </pre> |
| 53 <p> |
| 54 Your packaged app can only refer to scripts and objects |
| 55 within your app, with the exception of media files |
| 56 (apps can refer to video and audio outside the package). |
| 57 Chrome extensions will let you relax the default Content Security Policy; |
| 58 packaged apps won’t. |
| 59 </p> |
| 60 <h2 id="how">How to comply with CSP</h2> |
| 61 <p> |
| 62 All JavaScript and all resources should be local |
| 63 (everything gets packaged in your packaged app). |
| 64 </p> |
| 65 <h2 id="but">"But then how do I..."</h2> |
| 66 <p> |
| 67 It's very possible that you are using templating libraries |
| 68 and many of these won’t work with CSP. |
| 69 You may also want to access external resources in your app |
| 70 (external images, content from websites). |
| 71 </p> |
| 72 <h3>Use templating libraries</h3> |
| 73 <p> |
| 74 Use a library that offers precompiled templates |
| 75 and you’re all set. |
| 76 You can still use a library that doesn’t offer precompilation, |
| 77 but it will require some work on your part and there are restrictions. |
| 78 </p> |
| 79 <p> |
| 80 You will need to use sandboxing to isolate any content |
| 81 that you want to do ‘eval’ things to. |
| 82 Sandboxing lifts CSP on the content that you specify. |
| 83 If you want to use the very powerful Chrome APIs in your packaged app, |
| 84 your sandboxed content can't directly interact with these APIs |
| 85 (see <a href="app_external.html#sandboxing">Sandbox local content</a>). |
| 86 </p> |
| 87 <h3>Access remote resources</h3> |
| 88 <p> |
| 89 You can fetch remote resources via <code>XMLHttpRequest</code> |
| 90 and serve them via <code>blob:</code>, <code>data:</code>, |
| 91 or <code>filesystem:</code> URLs |
| 92 (see <a href="app_external.html#external">Referencing external resources</a>). |
| 93 </p> |
| 94 <p> |
| 95 Video and audio can be loaded from remote services |
| 96 because they have good fallback behavior when offline or under spotty connectivi
ty. |
| 97 </p> |
| 98 <h3>Embed web content</h3> |
| 99 <p> |
| 100 Instead of using an iframe, |
| 101 you can call out to an external URL using an object tag |
| 102 (see <a href="app_external.html#objecttag">Embed external web pages</a>). |
| 103 </p> |
| 104 <p class="backtotop"><a href="#top">Back to top</a></p> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 10832042:
Extensions Docs Server: Doc conversion script (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src