内容安全策略和 JavaScript

Question

我在设置 Content-Security-Policy 时遇到问题

我有 .html 文件、外部 .css 和外部 .js

<link rel="stylesheet" href="./style.css" type="text/css" media="screen">
<script src="./script.js"></script>

如果没有 Content-Security-Policy 页面的工作...

如果我设置：

标头设置 Content-Security-Policy "default-src 'none'; child-src '自己';连接源代码“自我”；脚本源'自我'; base-uri '自我'; 样式-src '自我';阻止所有混合内容；升级不安全请求； 框架祖先“无”；对象源“自我”； img-src '自我';媒体源 '自己';框架源“自我”；字体源“自我”；表单动作'self';"

JavaScript 存在问题。它不起作用。

如果我将 .js 粘贴到 .html 文件（内部脚本）中，在 CPS 中我会重写 script-src 'unsafe-inline' - 我的页面可以工作...（与没有 CPS 设置一样）。但是不安全……

如何使用 CPS 中的安全设置进行外部工作 .js？这对我来说是一个恐怖。非常感谢。

页面与此相同： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_lightbox

Answer 1

您的示例包含不安全的内联 JS（和 CSS）！

您在图片上的点击处理程序是内联 JS。

onclick="currentSlide(1)"

您需要将它们移动到外部 JS 文件中的处理程序。

另外你的 CSS 也有同样的问题，内联样式会被阻塞

style="width:100%"

在下面的示例中，我已将您的点击处理程序移至外部 JS 文件，并将您的内联 CSS 移至外部文件。

如果您在服务器上运行以下示例，您会发现第一个图像更小并且不响应点击事件（因为内联 JS 和 CSS 被阻止），而其他两个图像大小相同（如CSS 通过外部文件中的类正确设置宽度）并且都响应点击事件（因为您的 JS 不再是内联的）。

var clickHandler = function(e){
    console.log(e.target.src);
}

var images = document.querySelectorAll(".demo");
for (var i = 0; i < images.length; i++) {
  
  images[i].addEventListener('click', clickHandler, false);
}

.container{
 width: 25%;
}

.cursor {
  cursor: pointer;
}

.demo{
    width: 100%;
}

<div class="container">

<!--original image has inline JavaScript with "onclick" and inline CSS with "style=", netiehr of these will work with your CSP-->
<img class="demo cursor" src="https://placehold.it/100x100" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">

<!--moved the click handler into the external file using "addEventListener" and moved the inline CSS to the external CSS file - this will work with your CSP-->
<img class="demo cursor" src="https://placehold.it/200x200" alt="Nature and sunrise">
<img class="demo cursor" src="https://placehold.it/300x300" alt="Nature and sunrise">

</div>

Answer 2

这是一个更好的例子...http://kod.djpw.cz/dmxc

如果没有 Content-Security-Policy，这可行...

我想要这个：

标头设置 Content-Security-Policy "default-src 'none'; child-src 'self'; connect-src 'self'; script-src 'self'; base-uri 'self'; style-src ' self'; 阻止所有混合内容; 升级不安全请求; 框架祖先'none'; object-src 'self'; img-src 'self'; media-src 'self'; frame-src 'self '; font-src 'self'; form-action 'self';"

我知道要删除图片中的style="width:100%"...

我想创建onclick="openModal();currentSlide(2)"，它将打开第二张图像（或onclick="currentSlide(2)"）并关闭onclick="closeModal()"

这是我不想怎么做的……

（例如单击“Uložit a získat odkaz”），然后您将拥有自己的更新链接）