Content Security Policy
Extensions developed with WebExtension APIs have a Content Security Policy (CSP) applied to them by default. This restricts the sources from which they can load <script> and <object> resources, and disallows potentially unsafe practices such as the use of
eval().This article explains briefly what a CSP is, what the default policy is and what it means for an extension, and how an extension can change the default CSP.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <!--Some HTML content here--> <!-- Include a third-party script. See also https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity. --> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"> </script> <!-- Include my popup's own script--> <script src="popup.js"></script> </body> </html>
Compared to a website, extensions have access to additional privileged APIs, so if they are compromised by malicious code, the risks are greater. For this reason:
- a fairly strict content security policy is applied to extensions by default. See default content security policy.
- the extension's author can change the default policy using the
content_security_policymanifest.json key, but there are restrictions on the policies that are allowed. See
The default content security policy for extensions is:
"script-src 'self'; object-src 'self';"
This will be applied to any extension that has not explicitly set its own content security policy using the
content_security_policy manifest.json key. It has the following consequences:
This will no longer load the requested resource: it will fail silently, and any object which you expected to be present from the resource will not be found. There are two main solutions to this:
- download the resource, package it in your extension, and refer to this version of the resource
- use the
content_security_policykey to allow the remote origin you need.
window.setTimeout("alert('Hello World!');", 500);
var f = new Function("console.log('foo');");
<script> tags and inline event handlers, meaning that the following are not permitted:
<div onclick="console.log('click')">Click me!</div>