can't execute inline event handler because it violates the Content Security Policy directive

Question

I'm trying to create an alarm/timer extension. Never used extensions before and run into this problem error message:

"Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' https://apis.google.com". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution."

It appears to be referring to the 'onended' event in my background.js code.

I found this which is a similar problem:

How to fix chrome-extension inline JavaScript invocation error?

I'm not sure how to get the fixes to work though on account of me being very newbie.

I tried adding this to my manifest.json file but it didn't do anything: "content_security_policy":"script-src 'self' https://apis.google.com; object-src 'self'"

I then read some of this but unsure how to actually get the hash of the code: https://www.w3.org/TR/2015/CR-CSP2-20150721/#script-src-hash-usage

The above link says:

"You can obtain the digest of a string on the command line simply via the openssl program"

I'm not sure where/what the openssl program is though. How would i go about getting this hash?

What should the text look like in the manifest.json "content_security_policy": for this hash information?

chrome.runtime.onMessage.addListener(function(response){

  myInterval = setInterval(function(){

  var audio = new Audio("Gentle-wake-alarm-clock.mp3");
  audio.setAttribute("onended",
  "function(){alert('your ' + response + ' second alert has ended')}");
  audio.play();
  clearInterval(myInterval);
  }, response * 1000);

})

my manifest.json file:

{
    "name": "timer",
    "version": "1.0",
    "description": "Build a timer!",
    "manifest_version": 2,
    "permissions": ["storage"],
    "options_page": "options.html",

    "browser_action": {
      "default_popup": "timerpopup.html",
      "default_icon": "green alarm.png"
    },

    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },

    "content_security_policy":"script-src 'self' https://apis.google.com; object-src 'self'"


}

You need to use external JavaScript. Put script tags in your head like ``. On your external `background.js` page it's like `addEventListener('load', function(){ /* run JavaScript in here */ });` By the way, you don't assign event listeners with `.setAttribute()`. — StackSlave, Jun 02 '19 at 08:59

score 1 · Accepted Answer · answered Jun 02 '19 at 08:37

It might be easier to just not use an inline event handler and use addEventListener instead. You may also use setTimeout instead of setInterval to avoid having to call clearInterval:

chrome.runtime.onMessage.addListener(function(response) {
  myTimeout = setTimeout(function() {
    var audio = new Audio("Gentle-wake-alarm-clock.mp3");
    audio.addEventListener('ended', function() {
      alert('your ' + response + ' second alert has ended');
    });
    audio.play();
  }, response * 1000);
});

If you aren't using clearInterval / clearTimeout anywhere else, you can also remove the myTimeout =.

can't execute inline event handler because it violates the Content Security Policy directive

1 Answers1