内容安全策略阻止了我的JQuery脚本中的代码

Posted 2021-04-27

以下是我在JSP代码中的策略：

我使用以下具有CSP的脚本：

教廷大使

<script src="/xx/xxxxxx/jquery-x.x.x.js" type="text/javascript" charset="utf-8" nonce="<%=nonce%>"></script>
<script src="/xx/xxxxxx/xxxxxx.js" type="text/javascript" charset="utf-8" nonce="<%=nonce%>"></script>

Chrome中的结果：

当我尝试单击错误时，我在jQuery文件中看到2个错误（请注意，下面的2个错误不是我的代码，而是来自jquery.x.x.x.js）

首先是：

第二是：

现在，如何在不使用此CSP的情况下修复2个问题？

不安全的内联

很多人都说上面的内容并且不建议使用不安全的eval：https://barryvanveen.nl/blog/47-how-to-prevent-the-use-of-unsafe-inline-in-csp

答案

For the first error:

您在运行时插入的innerhtml的div包含带有<a>属性的style元素。这是你的CSP的violation，因为这个特定的标签没有nonce。

Solution

对于此标记使用nonce是不明智的，因为它是在运行时插入的，并且nonce应该添加到HTML服务器端。

我建议将CSS移动到另一个文件，并使用链接标记包含该文件

HTML：

<!-- Other html -->

<link href="./style.css" rel="stylesheet">

style.css文件

a#someId {
  color: red;
  float: left;
  opacity: .55;
}

请注意，您的JS需要进行一些修改，因为创建的<a>标记需要具有CSS选择的id属性

的script.js

div.style.display = "none";
div.innerHTML = "   <link/><table></table><a href='/a' id='someID' >a</a><input type='checkbox'/>"

For the second error:

如果不知道脚本的内容是什么，就无法确定导致错误的原因。请发布几行与脚本变量创建相关的代码。

但是，它可能与第一个问题类似。一个简单的解决方案是将动态附加的脚本移动到另一个文件，并将该文件包含在脚本标记中。

另一答案

感谢@jro的答案 - 我试图将我的jquery和jqtouch升级到更新的版本，现在它已经过去了。虽然我现在有功能问题 - 但当然这将是另一个故事。