CODEWITHSUNDEEP
javascriptevents
Steve
Steve

Reputation: 655

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

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'"


}

Upvotes: 0

Views: 1845

Answers (1)

Snow
Snow

Reputation: 4097

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

Upvotes: 1

Related Questions