Chrome extension "Refused to evaluate a string as JavaScript because 'unsafe-eval'

javascript json google-chrome-extension content-security-policy

35,626

Solution 1

I had this message because Chrome doesn't allow inline scripts and inline events handler (like onClick) anymore: they have to be moved to an external JS file (e.g. popup.js) and addEventListener() has to be used to associate events to DOM objects.

For example:

<body onload="initialize()">
<button onclick="handleClick()" id="button1">

has to be replaced by:

window.addEventListener("load", initialize);
document.getElementById("button1").addEventListener("click",handleClick);

In your case, I don't see any JS in the HTML but there are a few things you could try:

move popup.js include just before the .
correct the html (double head).
remove the content_scripts section from the manifest. Content scripts are supposed to be executed against the content of the page, they are not the JS file included in the page or browser action popup. The browser action section should suffice.

See Chrome extension manifest V2 notes

Solution 2

I had a very similar problem. I was not using any Inline Scripts or Inline Event Handlers but still getting that error. Turned out, jQuery internally tries to evaluate the response of such requests which is not allowed in Chrome Extensions. In my case, I was using $.ajax() with dataType: 'json'. I resolved the issue by changing dataType to text and then manually parsing JSON using JSON.parse().

Also it is relevant to mention that most of the jQuery APIs try to execute scripts included in a given html string while parsing which causes similar errors when used in a Chrome Extension. Explicit escaping of scripts in responses is required in such cases. Here is a quote from jQuery parseHTML() 's documentation:

Most jQuery APIs that accept HTML strings will run scripts that are included in the HTML. jQuery.parseHTML does not run scripts in the parsed HTML unless keepScripts is explicitly true. However, it is still possible in most environments to execute scripts indirectly, for example via the attribute. The caller should be aware of this and guard against it by cleaning or escaping any untrusted inputs from sources such as the URL or cookies. For future compatibility, callers should not depend on the ability to run any script content when keepScripts is unspecified or false.

Please note that those points cause problems when used in a Chrome Extension due to Chrome's restriction about inline script evaluation. They might not hold true in general.

35,626

Vitaly Menchikovsky

By day: worked at Amdocs for 2 years as FE & BE Dev(JAVA,Backbone...), Now working at Gala coral as a FE dev with Backbone. Know also JS,Angular,redux,react, ionic, Java, Bootstrup,auto testing cucumber,firebase. Hobbies: know LR, photo Shop, and professional photography.

Updated on July 16, 2022

Comments

Vitaly Menchikovsky almost 2 years
I have an error:

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

chrome-extension://ldbpohccneabbobcklhiakmbhoblcpof/popup.html:1

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

the code popup.js
```
$(document).ready(function() {
     $.getJSON('http://.......alerts.json', function(data) {
        alert('HELLO');
      });
});
```
Manifest:
```
{
  "manifest_version": 2,

  "name": "Alert",
  "description": "This extension for  .",
  "version": "2.0",
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "permissions": [
    "http://www.......il/"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [ {
    "js": [ "jquery.min.js", "popup.js" ],
    "matches": [ "http://*/*", "https://*/*"]
  }]
}
```
Popup:
```
<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        min-width: 357px;
        overflow-x: hidden;
      }

      img {
        margin: 5px;
        border: 2px solid black;
        vertical-align: middle;
        width: 75px;
        height: 75px;
      }
    </style>
     <head>
     <script src='jquery.min.js'></script>
     <script src='popup.js'></script>
</head>
  </head>
  <body>
  </body>
</html>
```
- Xan almost 10 years
  
  I edited your question for proper formatting, and took the liberty of removing the second question - it's a different question, please separate those.
- Xan almost 10 years
  
  Your problem probably lies in your popup.html file, there's nothing wrong with the JS file.
- Vitaly Menchikovsky almost 10 years
  
  added the popup.html. please advice
- Xan almost 10 years
  
  Why does it have a double <head>?
- Vitaly Menchikovsky almost 10 years
  
  thnx working but still have issue on console Refused to execute inline script 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.
- Scott almost 10 years
  
  What version of jQuery are you using?
Xan over 9 years

Not relevant to this case. He is probably using an older version of jQuery that has CSP problems.
marcelocra over 8 years

I believe Chrome does accept them now. Just hasn't figured out how to use yet. Take a look here: developer.chrome.com/extensions/…