Content Security Policy and Remote Scripts

Google Chrome is targeting toward more secure web, and one of the major step in this is by also enforcing Content Security Policy at the Chrome Extensions level. This is enabled in all the manifest version 2 Extension, and the manifest version 1 is slowly being phased out (you get warning about it being deprecated soon when installing it).

This new policy applies two of the following main limitations on the content scripts:
– Inline JavaScript will not be executed
– Only local script and and object resources are loaded

For more details on this, please check:
http://developer.chrome.com/trunk/contentSecurityPolicy.html

I was working on upgrading my Dynamic Language Tools extension, and though applying first rule of using the Inline scripts was comparatively easy (for tips and pitfalls on this, please check JavaScript eval function and Content Security Policy). But I found the other policy “Only local script and and object resources are loaded” was quite limiting and confusing. I was using the Google AJAX APIs in my extension, and since these are just the JavaScript files, I can download them and integrate most of them directly in the extension, but then this would mean that I will have to update my extension with every update of Google API. This is something which I hate most.

I was using the following code in my extension background page:

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
 
<script type="text/javascript">
// Load the Necessary APIs
googleElementsLoaded = false;
googleLanguageLoaded = false;
 
// Load the necessary Google APIs
google.load("language", "1", { "callback" : function() {googleLanguageLoaded = true}});
 
// Load Google Transliteration package
google.load("elements", "1", {packages: ["keyboard", "transliteration"], callback: function() {googleElementsLoaded = true}});
</script>

And as I was afraid, when I run the extension after upgrading the manifest to version 2, it throw the following error:

After doing some research, I found that it’s possible to load remote scripts too (phew!), but with two conditions:
– It must be served on the HTTPS.
– You need to explicitly add this relaxation in the manifest file.

Both of the steps were quite easy for me. For the first, I simply changed the script source from “http://www.google.com/jsapi” to “https://www.google.com/jsapi”, and then added the following line in the manifest file:

1

"content_security_policy": "script-src 'self' https://www.google.com; object-src 'self'",

Which simply means that I’m allowing it to load the scripts from extension local folder, and from www.google.com. Simply reload the extension after doing these changes and you are good to go.

Tags: Content Security Policy, Inline Script, Remote Script

This entry was posted on Saturday, September 15th, 2012 at 10:14 pm and is filed under Google Products, JavaScript. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.