CODEWITHSUNDEEP
javascripthtmlgoogle-chromegoogle-chrome-extensioncontent-security-policy
user3397388
user3397388

Reputation: 241

Chrome extension Content Security Policy directive error

I'm trying to make radio stream chrome extension but there is a problem. When I run my script in browser like normal JS+HTML+CSS it works, but when I try runing it like Chrome extension I get this 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.

After that I added this to my manifest:

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

But after that I was getting error message(error in manifest line with code above)

This is my manifest:

{
   "background": {
      "scripts": [ "jquery.js", "jquery-ui.js", "plate.js" ]
        },

   "browser_action": {
      "default_icon": "Images/action-normal.png",
      "default_popup": "player.html",
      "default_title": ""
   },
   "description": "Chrome Player",
   "manifest_version": 2,
   "name": "Radio Chrome Player",
   "permissions": [ "http://www.radio-station.com/" ],
   "version": "1.0"

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

}

This is the main html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script src="main.js"></script>
<script>$(function(){$("#radioplayere").plate({playlist: [{file:"http://RADIO_STATION_STREAM_URL/;"}], phpGetter: "http://hostingshoutcast.com/stream/plate/php/plate.php"});});</script>
</head>
<body>
<div id="radioplayer">If you are seeing this then an error has occurred!</div>
</body>
</html>

Upvotes: 21

Views: 45678

Answers (4)

Abhijit Padhy
Abhijit Padhy

Reputation: 142

Adding CSP in manifest.json file removes the error. It worked for my react app. I guess missing ' , ' is the issue for your code, otherwise add the below line and then try.

"csp": "script-src 'self' 'unsafe-inline'; object-src 'self'"

content security policy

Upvotes: -1

Sam Su
Sam Su

Reputation: 6822

For me, the reason is that I'm using an older version (such as v1.7) of jQuery that has CSP problems, choose a new version (v2.1.3).

Upvotes: 1

Eleanor Zimmermann
Eleanor Zimmermann

Reputation: 432

I know I'm a bit late to this, but based on OP's comments to Xan's answer, another component of solving the issue would be to adjust the AJAX call that is implied.

I was getting the same error and adjusted my API call to be:

dataType: 'json'

instead of:

dataType: 'jsonp'

(Solved the issue, granted, one will still need to remove any inline scripting.)

Upvotes: 1

Xan
Xan

Reputation: 77482

Your problems are as follows:

  1. Chrome CSP forbids inline code, and this is not subject to override. Your 'unsafe-eval' does not address the issue, and 'unsafe-inline' that would've helped will be ignored by Chrome.

    You need to get rid of inline code:

    <script>$(function(){$("#radioplayere").plate({playlist: [{file:"http://RADIO_STATION_STREAM_URL/;"}], phpGetter: "http://hostingshoutcast.com/stream/plate/php/plate.php"});});</script>

    This needs to be moved in a js file.

  2. There is a typo in your manifest.json, you forgot a comma:

    "version": "1.0",

    In general, using a JSON validator can help you catch those errors.

Upvotes: 19

Related Questions