| <h1>Comply with CSP</h1> |
| |
| |
| <p> |
| If you're unfamiliar with Content Security Policy (CSP), |
| <a href="http://www.html5rocks.com/en/tutorials/security/content-security-policy/">An Introduction to Content Security Policy</a> |
| is a good starting point. |
| It covers the broader web platform view of CSP; |
| packaged apps CSP isn't as flexible. |
| You should read the |
| <a href="/extensions/contentSecurityPolicy.html">Chrome extension Content Security Policy</a> |
| as it's the foundation for the packaged app CSP. |
| For brevity's sake, |
| we don't repeat the same information here. |
| </p> |
| |
| <p> |
| CSP is a policy to mitigate against cross-site scripting issues, |
| and we all know that cross-scripting is bad. |
| We aren’t going to try and convince you |
| that CSP is a warm-and-fuzzy new policy. |
| There's work involved; |
| you'll need to learn how to do fundamental tasks differently. |
| </p> |
| |
| <p> |
| The purpose of this doc is to tell you |
| exactly what the CSP policy is for packaged apps, |
| what you need to do to comply with it, |
| and how you can still do those fundamental tasks |
| in a way that is CSP–compliant. |
| </p> |
| |
| <h2 id="what">What is the CSP for packaged apps?</h2> |
| |
| <p>The content security policy for packaged apps restricts |
| you from doing the following:</p> |
| |
| <ul> |
| <li>You can’t use inline scripting in your packaged app pages. |
| The restriction bans both <script> blocks and |
| event handlers (<button onclick="...">).</li> |
| <li>You can’t reference any external resources in any of your app files |
| (except for video and audio resources). |
| You can’t embed external resources in an iframe.</li> |
| <li>You can’t use string-to-JavaScript methods like |
| <code>eval()</code> and <code>new Function()</code>.</li> |
| </ul> |
| |
| <p>This is implemented via the following policy value:</p> |
| |
| <pre> |
| default-src 'self'; |
| connect-src *; |
| style-src 'self' data: chrome-extension-resource: 'unsafe-inline'; |
| img-src 'self' data: chrome-extension-resource:; |
| frame-src 'self' data: chrome-extension-resource:; |
| font-src 'self' data: chrome-extension-resource:; |
| media-src *; |
| </pre> |
| |
| <p> |
| Your packaged app can only refer to scripts and objects |
| within your app, with the exception of media files |
| (apps can refer to video and audio outside the package). |
| Chrome extensions will let you relax the default Content Security Policy; |
| packaged apps won’t. |
| </p> |
| |
| <h2 id="how">How to comply with CSP</h2> |
| |
| <p> |
| All JavaScript and all resources should be local |
| (everything gets packaged in your packaged app). |
| </p> |
| |
| <h2 id="but">"But then how do I..."</h2> |
| |
| <p> |
| It's very possible that you are using templating libraries |
| and many of these won’t work with CSP. |
| You may also want to access external resources in your app |
| (external images, content from websites). |
| </p> |
| |
| <h3 id="templating">Use templating libraries</h3> |
| |
| <p> |
| Use a library that offers precompiled templates |
| and you’re all set. |
| You can still use a library that doesn’t offer precompilation, |
| but it will require some work on your part and there are restrictions. |
| </p> |
| |
| <p> |
| You will need to use sandboxing to isolate any content |
| that you want to do ‘eval’ things to. |
| Sandboxing lifts CSP on the content that you specify. |
| If you want to use the very powerful Chrome APIs in your packaged app, |
| your sandboxed content can't directly interact with these APIs |
| (see <a href="app_external.html#sandboxing">Sandbox local content</a>). |
| </p> |
| |
| <h3 id="remote_resources">Access remote resources</h3> |
| |
| <p> |
| You can fetch remote resources via <code>XMLHttpRequest</code> |
| and serve them via <code>blob:</code>, <code>data:</code>, |
| or <code>filesystem:</code> URLs |
| (see <a href="app_external.html#external">Referencing external resources</a>). |
| </p> |
| |
| <p> |
| Video and audio can be loaded from remote services |
| because they have good fallback behavior when offline or under spotty connectivity. |
| </p> |
| |
| <h3 id="embed_content">Embed web content</h3> |
| |
| <p> |
| Instead of using an iframe, |
| you can call out to an external URL using an object tag |
| (see <a href="app_external.html#webview">Embed external web pages</a>). |
| </p> |
| |
| <p class="backtotop"><a href="#top">Back to top</a></p> |