chrome/common/extensions/docs/templates/articles/app_csp.html

<h1>Content Security Policy</h1>


<p>
If you're not familiar 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.
That document covers the broader web platform view of CSP;
Chrome App CSP isn't as flexible.
You should also read the
<a href="/extensions/contentSecurityPolicy.html">Chrome extension Content Security Policy</a>,
as it's the foundation for the Chrome 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-site 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 document is to tell you
exactly what the CSP policy is for Chrome 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&ndash;compliant.
</p>

<h2 id="what">What is the CSP for Chrome Apps?</h2>

<p>The content security policy for Chrome Apps restricts
you from doing the following:</p>

<ul>
	<li>You can’t use inline scripting in your Chrome App pages.
		The restriction bans both &lt;script> blocks and
		event handlers (&lt;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 Chrome 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;
Chrome 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 Chrome 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 Chrome 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>