I have an external script attached to an HTML/EJS page. The script populates images to a page using the 'createElement' and 'setAttribute' mands. In addition I create an 'onclick' attribute so as to run a function when one of those created images is 'clicked'. The code of the external '.js' file is similar to the following:

addEventListener("load", initialize);

const vitals = document.querySelector('#passed');

const _convert = vitals.dataset.pix.split(",");  
  //convert the passed ('dataset') string into an array...

function initialize() {

...

  //**ADD THE PHOTO...

  _item = document.createElement("img"); 
  _item.setAttribute("id", "pix_" + _str);
  _item.setAttribute("src", "/gallery/photo/" + _convert[_count]);
  _item.setAttribute("onclick", "reRouter(this);");  
  _item.setAttribute("alt", "picture of " + _str);
  _item.setAttribute("width", '100%');
  document.getElementById("group_" + _tally).appendChild(_item);

...

}

function reRouter(_sent) {

//do stuff based upon the 'clicked' image...
//the Content Security Policy error is thrown ONLY upon a click of an image created in the 'initialize' function above...WHY?

}

The 'initialize' function seems to run properly, the page is populated with the images from the indicated folder, as desired. However when I perform a 'mouse click' on one of those images I get a Content Security Policy violation, as follows:

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

Why would a mouse click throw such an error? It is odd that the 'initialize' function runs fine, and does NOT throw the error...it happens only upon the 'click' of the mouse on an image. Any advice greatly appreciated.

I have an external script attached to an HTML/EJS page. The script populates images to a page using the 'createElement' and 'setAttribute' mands. In addition I create an 'onclick' attribute so as to run a function when one of those created images is 'clicked'. The code of the external '.js' file is similar to the following:

addEventListener("load", initialize);

const vitals = document.querySelector('#passed');

const _convert = vitals.dataset.pix.split(",");  
  //convert the passed ('dataset') string into an array...

function initialize() {

...

  //**ADD THE PHOTO...

  _item = document.createElement("img"); 
  _item.setAttribute("id", "pix_" + _str);
  _item.setAttribute("src", "/gallery/photo/" + _convert[_count]);
  _item.setAttribute("onclick", "reRouter(this);");  
  _item.setAttribute("alt", "picture of " + _str);
  _item.setAttribute("width", '100%');
  document.getElementById("group_" + _tally).appendChild(_item);

...

}

function reRouter(_sent) {

//do stuff based upon the 'clicked' image...
//the Content Security Policy error is thrown ONLY upon a click of an image created in the 'initialize' function above...WHY?

}

The 'initialize' function seems to run properly, the page is populated with the images from the indicated folder, as desired. However when I perform a 'mouse click' on one of those images I get a Content Security Policy violation, as follows:

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

Why would a mouse click throw such an error? It is odd that the 'initialize' function runs fine, and does NOT throw the error...it happens only upon the 'click' of the mouse on an image. Any advice greatly appreciated.

• javascript
• html
• onclick
• content-security-policy

1 Answer 1

Your external script is likely from a source you have listed in your CSP. The onclick code is effectively inline javascript which is blocked unless you specify 'unsafe-inline'. Even though Chrome suggests a hash it will not accept it for event handlers as onclick. In CSP level 3 (not widely supported yet) you can make this work with 'unsafe-hashes': https://content-security-policy./script-src/

The solution would be to add an event listener in your external script to handle the onclick event.