CODEWITHSUNDEEP
angulargoogle-chrome-extensioncontent-security-policy
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29159

Update to angular 12 gives CSP unsafe-eval error in chrome extention

I have a working chrome extension which uses angular 11. I just updated it to 12 and now I get

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

So, I figured that if it used to work in Angular 11, it should be possible to get it to work in Angular 12.

So, in my manifest I already have:

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'

I tried adding the unsafe-hashes to the angular's index.html

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-hashes' 'sha256-oFP6B0o0upf5CwDxtOuL0J68WAdmyZUBtL/g8VBQ9wE='; style-src 'self'; base-uri 'self';">

But this doesn't fix that error (even more errors)

It is a public repository, the branch with the update can be found here

Any suggestions how to fix this?

Upvotes: 0

Views: 5024

Answers (1)

Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29159

In this post I found something that fixed the issue

enter image description here

Then run the production build

$> ng build --configuration production

and it works :) If there are better solutions please let me know!

Upvotes: 7

Related Questions