WebExtensions 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
This article explains briefly what a CSP is, what the default policy is and what it means for a WebExtension, and how a WebExtension 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, WebExtensions 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 WebExtensions by default. See default content security policy.
- the WebExtension'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
Default content security policy
The default content security policy for WebExtensions is:
"script-src 'self'; object-src 'self';"
This will be applied to any WebExtension that has not explicitly set its own content security policy using the
content_security_policy manifest.json key. It has the following consequences:
Location of script and object resources
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 add-on, and refer to this version of the resource
content_security_policykey to allow the remote origin you need.
eval() and friends
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>