Chrome extension Content Security Policy directive error

StackOverflow https://stackoverflow.com/questions/23216884

Question

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>
Was it helpful?

Solution

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.

OTHER TIPS

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

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

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top