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