Chrome Extension - Content Security Policy - executing inline code

Question

I am using an external JavaScript lib in my chrome extension. I has inline execution, so I get following kind of error

(The error I get on console)

Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension://". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

The error message clearly says there is a work-around possible.

Chrome-Content Security Policy says not possible. Many related question cited this link.

Blog This blogger says it is possible, but probably this is applicable to only older chrome extension.

Any work around possible?

PS: don't wanna/can't change the entire library I am using.

EDIT: how to use hash or nonce to enable inline execution.

Similar questions have been asked, but I guess something has been missed. — Amit G, Sep 02 '14 at 14:06

score 31 · Accepted Answer · edited May 23 '17 at 12:00

31

~~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.

edited May 23 '17 at 12:00

Community

1
1

answered Sep 02 '14 at 14:58

Xan

74,770
16
179
206

2

+1; to clarify for the OP: the CSP specification allows this restriction to be relaxed (hence the suggestion to add `unsafe-eval`), but what Chrome extensions allow in a CSP is narrower than the general CSP spec. – apsillers Sep 02 '14 at 15:10
@Xan - agree to 'unsafe-inline' will have not effect. But I believe there are still other ways - hash/nonce, as pointed out by error message. – Amit G Sep 03 '14 at 04:49
@AmitG If you insist on disagreeing with documentation, it's your choice. – Xan Sep 03 '14 at 06:21
1

This answer no longer applies, see my answer with the updated state [here](http://stackoverflow.com/a/38555325/1698058). – Chris Hunt Jul 24 '16 at 22:13
1

@ChrisHunt Thanks for the updated answer on this, I included new information in my answer. – Xan Jul 24 '16 at 22:18
Hash seems to be the only method that works – lovelikelando Feb 28 '21 at 23:25

score 21 · Answer 2 · edited May 23 '17 at 12:32

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:

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:

What about executing JS inline with a anchor href like `Hello`. I've tried `rRMdkshZyJlCmDX27XnL7g3zXaxv7ei6Sg+yt4R3svU=` and `97l24HYIWEdSIQ8PoMHzpxiGCZuyBDXtN19RPKFsOgk=` with no luck. — kspearrin, Sep 21 '16 at 20:27
the solution using `manifest.json` worked for me; the meta tag version did not work. — Yvonne Aburrow, Nov 16 '17 at 14:32
I get a 'content_security_policy': Ignored insecure CSP value "sha256-TTV2e1hDY8O7+uUJbANScTuJ3ibjGZ9SqN6LdxfzDCs=" in directive 'script-src'. — john k, Jun 28 '20 at 19:26

score 20 · Answer 3 · answered Oct 31 '19 at 12:11

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

Copy pasted from https://stackoverflow.com/a/36349056/4753489 — Divyang Desai, Jul 21 '23 at 09:30

score 5 · Answer 4 · answered Sep 09 '20 at 18:58

5

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.

answered Sep 09 '20 at 18:58

ned

383
2
9

1

can you show an example with sha256 I get that it's invalid as well with this. – Joseph Astrahan Oct 09 '21 at 03:33

score 1 · Answer 5 · answered Feb 26 '19 at 15:46

I've got this problem after I added a simple checkbox on the login page to toggle password visibility and here is how I have fixed my problem, hope it helps;

I've stopped using my checkbox's onclick event, which was causing this problem in incognito mode of chrome and instead gave an id to my checkbox.

Before

<div class="form__row">
        <div class="form__controls">
            <label class="checkbox"><input type="checkbox" onclick="togglePasswordVisibility()"> Show password</label>
        </div>
    </div>

After

<div class="form__row">
        <div class="form__controls">
            <label class="checkbox"><input type="checkbox" id="checkboxTogglePasswordVisibility"> Show password</label>
        </div>
    </div>

I've created a Script.js file and added an event listener method into it to handle onclick event of my checkbox to do the job.

Remember to reference your js file, if you haven't, yet. You can simply reference it like this.

<script src="../Scripts/Script.js"></script>

And here is the event listener that I've added into my Script.js.

$(document).ready(function () {
    addEventListenerForCheckboxTogglePasswordVisibility()
});

function addEventListenerForCheckboxTogglePasswordVisibility() {
    var checkbox = document.getElementById("checkboxTogglePasswordVisibility");
    if (checkbox !== null) {
        checkbox.addEventListener('click', togglePasswordVisibility);
    }
}

function togglePasswordVisibility() {
    var passwordElement = document.getElementById("password");
    if (passwordElement.type === "password") {
        passwordElement.type = "text";
    } else {
        passwordElement.type = "password";
    }
}

Error before the fix;

score 1 · Answer 6 · answered May 27 '20 at 23:02

1

You can config the csp nonce like this


Content-Security-Policy: script-src 'nonce-xyz123'; style-src 'nonce-xyz123';


<script src="https://www.paypal.com/sdk/js?client-id=sb" data-csp-nonce="xyz-123">

https://developer.paypal.com/docs/checkout/troubleshoot/support/#mobile

answered May 27 '20 at 23:02

Phat Tran

3,404
1
19
22

when I try this every other .js file in my manifest refuses to load because it violates this policy – john k Jun 28 '20 at 19:30
agreed this doesn't work for me either... same thing violates the policy – Joseph Astrahan Oct 09 '21 at 03:31
Do you have an example of this working with the paypal sdk currently? – Joseph Astrahan Oct 09 '21 at 03:32
Hi @JosephAstrahan, I'm no longer work on this project. May be the rule was changed – Phat Tran Oct 11 '21 at 07:46

Chrome Extension - Content Security Policy - executing inline code

6 Answers6

Update

Hash usage for `<script>` elements

Linked

Chrome Extension - Content Security Policy - executing inline code

6 Answers6

Update

Hash usage for <script> elements

Linked

Hash usage for `<script>` elements