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.
Content Security Policy
(CSP) is a mechanism to help prevent websites from inadvertently executing malicious content. A website specifies a CSP using an HTTP header sent from the server. The CSP is mostly concerned with specifying legitimate sources of various types of content, such as scripts or embedded plugins. For example, a website can use it to specify that the browser should only execute JavaScript served from the website itself, and not from any other sources. A CSP can also instruct the browser to disallow potentially unsafe practices, such as the use of
eval()
.
Like websites, extensions can load content from different sources. For example, a browser action's popup is specified as an HTML document, and it can include JavaScript and CSS from different sources, just like a normal web page:
<!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:
content_security_policy
manifest.json key, but there are restrictions on the policies that are allowed. See
content_security_policy
.
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:
Under the default CSP you may only load <script> and <object> resources that are local to the extension. For example, consider a line like this in an extension's document:
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
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:
content_security_policy
key to allow the remote origin you need.
Under the default CSP extensions are not allowed to evaluate strings as JavaScript. This means that the following are not permitted:
eval("console.log('some output');");
window.setTimeout("alert('Hello World!');", 500);
var f = new Function("console.log('foo');");
Under the default CSP inline JavaScript is not executed. This disallows both JavaScript placed directly in
<script>
tags and inline event handlers, meaning that the following are not permitted:
<script>console.log("foo");</script>
<div onclick="console.log('click')">Click me!</div>
If you are currently using code like
<body onload="main()">
to run your script when the page has loaded, listen for
DOMContentLoaded
or
load
代替。
最后修改： , 由 MDN 贡献者