Impossible to run external javascript from HTML/EJS file

Question

I am attempting to run javascript in an external file within a HTML/EJS page. Code is as follows:

<body onload="initialize()">

//HTML content

  <script src="/public/js/gallery.js"</script>

</body>

The "initialize()" function is located within the "gallery.js" file. The problem is that I am continuously getting an error which reads:

"Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-tPMkUWbNPBXQQ3rlbFhILb35szR89eQb3Z41bzLr+wQ='), or a nonce ('nonce-...') is required to enable inline execution."

I have tried a number of attempted fixes in my "head" tag on the page. These include "<meta Content-Security-Policy: script-src 'self' 'unsafe-inline'">", "Content-Security-Policy: script-src 'self'", and "meta http-equiv="content-security-policy content=script-src"...

This is maddening...I have spent hours trying to correct this. Can somebody PLEASE offer some explanation on what the problem is...??? I thank you in advance. Regards.

The 'gallery.js' file reads as follows:

addEventListener("load", initialize);

function initialize() {

//do stuff  

}

That script tag is broken. The opening tag is missing its closing > — John
– John, Commented Dec 2, 2020 at 11:00

Quentin · Accepted Answer · 2020-12-02 11:02:53Z

0

Solving this by disabling the CSP rule that bans inline scripts is not a good idea. Inline scripts are a prime vector for XSS attacks.

Instead, remove the inline script and put equivalent functionality in the .js file itself.

Remove onload="initialize()" from the HTML.

Add addEventListener("load", initialize) to the JS.

answered Dec 2, 2020 at 11:02

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Pangit Over a year ago

Thank you for the replies. I added a synopsis of the '.js' file. I am still getting the same error. I have removed the 'onload' in the 'body' tag...does it matter where I call the '.js' script...should it be in the 'head' tag instead?

Quentin Over a year ago

Since you said EJS; you are loading this from a web server and not a local file, right?

Pangit Over a year ago

Yes that is correct. I moved my call of the '.js' script to the head tag of the .ejs file. That seemed to solve the error...however another problem has been revealed, it seems my passed variables from the server are unable to be read by the external '.js' file. For example when I render the page from the server I pass an array, as such "res.render('pages/_gallery', {pix_list: _gallery});". However my variable (for example "<%= pix_list.length %>") is not read in the attached '.js' file...I probably need to post that as a separate question...

Quentin Over a year ago

Store data like that in a data-* attribute and then read it from the JS.

Pangit Over a year ago

Thanks for the reply. Sorry I do not understand what context that should be formed. I am looking at the "ejs.co" webpage and do not see a tag that uses a "*" like that. It seems I could read ejs variables passed from the server before using inline script on the .ejs page...however it seems to not pass to the external .js file...?

|

Collectives™ on Stack Overflow

Impossible to run external javascript from HTML/EJS file

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related