Chrome Extension - Content Security Policy - executing inline code

You have something in your code like this:

<button onclick="myFunction()"> Show password</button>

In a nutshell this is not allowed in chrome apps and extensions.

Change this to the following and it will work:

html:

<button id="myButton"> Show password</button>
<script src="script.js"></script>

script.js:

document.getElementById("myButton").addEventListener("click", myFunction); function myFunction(){ console.log('asd'); }

Long story:

In chrome apps, Content Security Policy does not allow inline javascript. So you have to put your javascript in a .js file and include it in your HTML.

Further reading: https://developer.chrome.com/extensions/contentSecurityPolicy


Copied from my answer to a similar question here. For recent versions of Chrome (46+) the current answer is no longer true. unsafe-inline still has no effect (in both the manifest and in meta header tags), but per the documentation, you can use the technique described here to relax the restriction.

Hash usage for <script> elements

The script-src directive lets developers whitelist a particular inline script by specifying its hash as an allowed source of script.

Usage is straightforward. The server computes the hash of a particular script block’s contents, and includes the base64 encoding of that value in the Content-Security-Policy header:

Content-Security-Policy: default-src 'self';
                     script-src 'self' https://example.com 'sha256-base64 encoded hash'

As an example, consider:

manifest.json: 

{
  "manifest_version": 2,
  "name": "csp test",
  "version": "1.0.0",
  "minimum_chrome_version": "46",
  "content_security_policy": "script-src 'self' 'sha256-WOdSzz11/3cpqOdrm89LBL2UPwEU9EhbDtMy2OciEhs='",
  "background": {
    "page": "background.html"
  }
}

background.html: 

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script>alert('foo');</script>
  </body>
</html>

Result:
alert dialog from inline script

I also tested putting the applicable directive in a meta tag instead of the manifest. While the CSP indicated in the console message did include the content of the tag, it would not execute the inline script (in Chrome 53).

new background.html: 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-WOdSzz11/3cpqOdrm89LBL2UPwEU9EhbDtMy2OciEhs='">
  </head>
  <body>
    <script>alert('foo');</script>
  </body>
</html>

Result:
console error messages about content security policy


nonce is specifically ignored by Chrome Extensions as unsafe. As of Sep 2020 (v.85) only the 'sha256..' option works. But is inconvenient since the hash changes with every html file update.


No, this is not possible to relax this policy. unsafe-inline is specifically ignored by Chrome Extensions since manifest version 2.

Documentation (emphasis mine):

There is no mechanism for relaxing the restriction against executing inline JavaScript. In particular, setting a script policy that includes 'unsafe-inline' will have no effect.

The error message mentions several possible ways, but the docs are clear that no CSP will allow inline scripting, and ignoring unsafe-inline is but one of the measures.

Update

As of Chrome 46, inline scripts can be whitelisted by specifying the base64-encoded hash of the source code in the policy. This hash must be prefixed by the used hash algorithm (sha256, sha384 or sha512). See Hash usage for elements for an example.

See this answer for more in-depth look at whitelisting.

Tags:

Google Chrome

Google Chrome Extension

Content Security Policy

Recent Posts