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.
The content security policy for packaged apps restricts you from doing the following:
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.
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 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).
You can fetch remote resources via
and serve them via
(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.
Instead of using an iframe, you can call out to an external URL using an object tag (see Embed external web pages).