Comply with CSP

If you're unfamiliar with Content Security Policy (CSP), An Introduction to Content Security Policy 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 Chrome extension Content Security Policy as it's the foundation for the packaged app CSP. For brevity's sake, we don't repeat the same information here.

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.

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.

What is the CSP for packaged apps?

The content security policy for packaged apps restricts you from doing the following:

You can’t use inline scripting in your packaged app pages. The restriction bans both <script> blocks and event handlers (<button onclick=”...”>).
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.
You can’t use string-to-JavaScript methods like eval() and function().

This is implemented via the following policy value:

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

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.

How to comply with CSP

All JavaScript and all resources should be local (everything gets packaged in your packaged app).

"But then how do I..."

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

Use templating libraries

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.

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 Sandbox local content).

Access remote resources

You can fetch remote resources via XMLHttpRequest and serve them via blob:, data:, or filesystem: URLs (see Referencing external resources).

Video and audio can be loaded from remote services because they have good fallback behavior when offline or under spotty connectivity.

Embed web content

Instead of using an iframe, you can call out to an external URL using an object tag (see Embed external web pages).