I have a web interface, that use JavaScript function to create html elements using data from data-* attribute created by web-server. This function will be triggered by onchange event of a checkbox.
java-script function and the part for add event listener are both inside an external static java-script. Using defer add_event_listener will be triggered after the page has finished loading.
My question is, how do I change the script, so that Content Security Policy with script-src: ‘self’; works, without ‘unsafe-inline’ to avoid XSS attacks?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="script-src 'self'; style-src 'self'">
</head>
<body>
<script src="./script.js" defer></script>
<div id="data-display">hi</div>
<label for="radio-1">radio-1
<input class="radio-1" id="radio-1" name="radio" value="1" type="radio">
</label>
<label for="radio-2">radio-2
<input class="radio-1" id="radio-2" name="radio" value="2" type="radio">
</label>
</body>
</html>
change meta tag content to content=”script-src ‘unsafe-inline’ ‘self’; style-src ‘self'” to avoid error:
“The page’s settings blocked an event handler (script-src-attr) from being executed because it violates the following directive: “script-src ‘self'”
function changeData(data) {
var data_display = document.getElementById('data-display');
data_display.innerHTML = '';
p = document.createElement("p");
p.innerText = data;
data_display.appendChild(p);
}
document.querySelectorAll('.radio-1').forEach( (element) => {
element.setAttribute("onchange", "changeData('hi radio')");
});
I am thinking about generate all those html elements server-side, and make them hidden.
Only use JavaScript to make them visible.
The problem is: I will have 20 to 30 different but similar divs to display/hide, and that is wasteful.
I hope there are more elegant solutions out there.