Content-Security-Policy: where to place JavaScript

C

cadol_coding

Joined
Dec 2, 2025
Messages
2
Reaction score
0
Hello everybody.

Here is a simple HTML file test1.html and a separate javascript file JS_test2.js which I want to be used in test1.html.
There are three buttons (INPUT TYPE="button") in test1.html. On pressing the button 1 the js function test1() should be called which is defined in the head section of the HTML file.
On pressing the button 2 the function test2() should be called which is defined in JS_test2.js.
And on pressing the button 3 the inline function should be called defined within the INPUT.



test1.html:

Code: 
<!DOCTYPE html>
<html>
  <head>
   <title>Test1</title>


   <meta http-equiv="Content-Security-Policy" content="script-src 'self'">


    <script language="JavaScript" src="JS_test2.js"> </script>
    
    <script type="text/javascript">
     <!-- Begin hiding contents from older browsers
  
     function test1()
      {
       alert("Test1");
      }


     //End hiding the contents -->
    </script>


  </head>






  <body>
    
    <br>
    
    <INPUT TYPE="button" name="sBtn1" id="sBtn1" value="Click me1" onClick="test1();">
    <br>
    <INPUT TYPE="button" name="sBtn2" id="sBtn2" value="Click me2" onClick="test2();">
    <br>
    <INPUT TYPE="button" name="sBtn3" id="sBtn3" value="Click me3" onClick="alert('test3 - inline, should be blocked');">


  </body>




</html>


JS_test2.js:

Code: 
<!-- Begin hiding contents from older browsers


function test2()
 {
  alert("Test2 in separate file");
 }


// End hiding the contents -->


For security reason a meta tag is placed in the head of the test1.html to restrict the javascript
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
Click to expand...

So far the present arrangement does not work. Not a single function can be evoked. In all three cases the console says:

Content-Security-Policy: The page’s settings blocked an event handler (script-src-attr) from being executed because it violates the following directive: “script-src 'self'”
Click to expand...

So my question is how to arrange the js code to be able to run it with if "script-src 'self'"? In the real app I need to place all my js functions in a separate file. I also tried to place the line

<script language="JavaScript" src="JS_test2.js"> </script>
Click to expand...

inside the body tag. Is not working either...

Thank you in advance for your help
 
C

cadol_coding

Joined
Dec 2, 2025
Messages
2
Reaction score
0
cadol_coding said:
Hello everybody.

Here is a simple HTML file test1.html and a separate javascript file JS_test2.js which I want to be used in test1.html.
There are three buttons (INPUT TYPE="button") in test1.html. On pressing the button 1 the js function test1() should be called which is defined in the head section of the HTML file.
On pressing the button 2 the function test2() should be called which is defined in JS_test2.js.
And on pressing the button 3 the inline function should be called defined within the INPUT.



test1.html:

Code: 
<!DOCTYPE html>
<html>
  <head>
   <title>Test1</title>


   <meta http-equiv="Content-Security-Policy" content="script-src 'self'">


    <script language="JavaScript" src="JS_test2.js"> </script>
  
    <script type="text/javascript">
     <!-- Begin hiding contents from older browsers
 
     function test1()
      {
       alert("Test1");
      }


     //End hiding the contents -->
    </script>


  </head>






  <body>
  
    <br>
  
    <INPUT TYPE="button" name="sBtn1" id="sBtn1" value="Click me1" onClick="test1();">
    <br>
    <INPUT TYPE="button" name="sBtn2" id="sBtn2" value="Click me2" onClick="test2();">
    <br>
    <INPUT TYPE="button" name="sBtn3" id="sBtn3" value="Click me3" onClick="alert('test3 - inline, should be blocked');">


  </body>




</html>


JS_test2.js:

Code: 
<!-- Begin hiding contents from older browsers


function test2()
 {
  alert("Test2 in separate file");
 }


// End hiding the contents -->


For security reason a meta tag is placed in the head of the test1.html to restrict the javascript


So far the present arrangement does not work. Not a single function can be evoked. In all three cases the console says:



So my question is how to arrange the js code to be able to run it with if "script-src 'self'"? In the real app I need to place all my js functions in a separate file. I also tried to place the line



inside the body tag. Is not working either...

Thank you in advance for your help
Click to expand...
With the help of Important_Thanks_452! now I know how to remedy that. The best way is to put all js code in a separate file, make a reference to it:

<script src="JS_test2.js" defer> </script>

Then remove all inline events from the buttons, e.g:

<INPUT TYPE="button" name="sBtn1" id="sBtn1" value="Click me1">

Add the event listeners programmatically inside the JS_test2.js file:

document.addEventListener
('DOMContentLoaded', () =>
{
document.getElementById("sBtn1").addEventListener("click", test1);
document.getElementById("sBtn2").addEventListener("click", test2);
}
);

This works.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Where is the Javascript "trigger"? 7
Javascript DOM 1
Script stops working when using variables to save time typing... 4
Check forms With JavaScript 1
JavaScript code not working!! 6
Play mp3 on body load call. 1
Help me sort out this script 1
I want to learn More Advanced Javascript for Game Development, but can't seem to be able to progress in my coding ability 0

Members online

No members online now.
Total: 322 (members: 0, guests: 322)
Robots: 94

Forum statistics

Threads
474,342
Messages
2,571,407
Members
48,797
Latest member
kenne2025

Latest Threads

Top