Javascript – Chrome extension Content Security Policy directive error

content-security-policygoogle-chromegoogle-chrome-extensionhtmljavascript

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>

Best Answer

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.

Related Topic