Extensions Docs Server: Doc conversion script

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

+<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="http://code.google.com/chrome/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&ndash;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 &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>function()</code>.</li>
+</ul>
+
+<p>This is implemented via the following policy value:</p>
+
+<pre>
+default-src 'self';
+connect-src *;
+style-src 'self' blob: data: filesystem: 'unsafe-inline';
+img-src 'self' blob: data: filesystem:;
+frame-src 'self' blob: data: filesystem:;
+font-src 'self' blob: data: filesystem:;
+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>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>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>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#objecttag">Embed external web pages</a>).
+</p>
+
+<p class="backtotop"><a href="#top">Back to top</a></p>