admin管理员组

文章数量:1122832

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.

JavaScript function and the part for add event listener are both inside an external static JavaScript. 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.

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.

JavaScript function and the part for add event listener are both inside an external static JavaScript. 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.

  • javascript
  • html
  • xss
  • content-security-policy
  • meta
Share Improve this question edited 20 hours ago Mister Jojo 22.2k6 gold badges25 silver badges42 bronze badges asked yesterday AvogatroAvogatro 112 bronze badges New contributor Avogatro is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
Add a comment  | 

1 Answer 1

Reset to default 1

I have tested your code on Windows 11 in Chrome, Edge and Firefox. I can only reproduce the error you report in Firefox.

This might be a bug, or a feature, I can't tell, but I do know the solution:

Instead of changing the DOM using:

element.setAttribute("onchange", "changeData('hi radio')");

You can attach an event handler like this:

element.addEventListener("change", function (event) {
    changeData("hi radio");
});

Firefox likes that, and it is the better way of doing it.

See: addEventListener() method

本文标签：

版权声明：本文标题：javascript - How do I remove unsafe-inline from Content Security Policy and use server-send data to generate html elements, trig 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736281450a1926321.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。