JQuery 3.5.1 并拒绝执行内联脚本，因为它违反了以下内容安全策略指令：答案

【问题标题】：JQuery 3.5.1 and Refused to execute inline script because it violates the following Content Security Policy directive:JQuery 3.5.1 并拒绝执行内联脚本，因为它违反了以下内容安全策略指令：
【发布时间】：2021-07-26 08:26:05
【问题描述】：

我将 jQuery 从 2.1.1 升级到 3.5.1，然后我开始看到 jQuery 的这个问题

拒绝执行内联脚本，因为它违反了以下内容内容安全策略指令：“script-src 'self' 'nonce-YURLOAQRrIwdGEqYSSpHx9YSWDM......''unsafe-eval'”。 'unsafe-inline' 关键字，哈希 ('sha256-2mvMk0Nvn96VqS1UEmAZSVSEkK0CkPN....')，或随机数 ('nonce-...') 是启用内联执行所必需的。

我不想使用“不安全内联”。

在 2017-2018 年记录了该问题 here、here 和 here。我认为这个问题现在已经在 jQuery 3.5.1 中解决了，除非我遗漏了什么。

我的应用程序是在 .NET Core 5 中开发的。

Index.cshtml

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/lib/jquery/3.5.1/jquery.min.js" asp-add-nonce="true"></script>
</head>
<body>
    
    <button type="button" id="btnGetContent">Get Content</button>

    <div id="result">
        <partial name="_Test" />
    </div>    

    <script src="~/js/index.js"></script>

</body>
</html>

_Test.cshtml 部分视图

@System.DateTime.Now.ToString();

<script type="text/javascript" asp-add-nonce="true">    
   // partial view specific inline script
</script>

index.js

$(function () {

    $("#btnGetContent").click(function () {
        $.ajax({
            type: "GET",            
            url: "/test/getcontent",            
            processData: true,
            cache: false
        })
        .done(function (response, textStatus, jqXHR) {
            // in browser's console I notice the error at this line
            $("#result").html(response);
        })          
    })   
})

控制器

public class TestController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public IActionResult GetContent()
    {
        return PartialView("_Test");
    }
}

CSP 政策

"default-src 'none'; script-src 'self' 'nonce-{0}' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; child-src 'self';"

我有自定义的asp-add-nonce 标签助手和一个随机数中间件。 ** 对于每个请求 ** 标签助手和中间件分别将新的 nonce 值注入到脚本标签和 CSP 策略中，并且一直运行良好。

在我将 jQuery 升级到 3.5.1 后，看起来 jQuery 在脚本标签中也需要 nonce 值，所以我在标头中添加了asp-add-nonce="true"，例如
<script src="~/lib/jquery/3.5.1/jquery.min.js" asp-add-nonce="true"></script>

问题
我认为这里的问题是，由于为每个 http 请求创建了 nonce 值，并且 jQuery 每页仅加载一次。 Get Content 请求创建的新值当然与注入到 jQuery 脚本标签中的原始值不匹配。所以我们得到错误Refused to execute inline script...

有没有办法在不向 jQuery 的脚本标签添加 nonce 的情况下解决这个问题？

更新 1
查看浏览器提交的CSP报告后，发现了更多细节。违反的指令实际上是script-src-elem。我的 CSP 政策甚至没有该指令。该指令在 CSP 3 版本中可用。不知道为什么浏览器会因为这个指令在 jQuery 上出错。

更新 2
您可以download repository重新生成问题

【问题讨论】：

如错误消息所述，当您单击Get Content 按钮添加带有<script> 标记的局部视图时，它违反了以下内容安全策略指令。您可以考虑删除_TestPartialView部分视图中的<script>标签，并在home.js中添加相关脚本内容。在 home.js 文件中，文档准备好并加载部分视图后，附加相关事件和函数（来自 _TestPartialView <script> 标签）。
我们不能。这是现有的应用程序。有几个页面动态呈现部分视图，并且这些部分视图有自己的带有随机数的 script 标记。这在 JQ 更新到 3.5.1 之前有效

标签： jquery asp.net asp.net-core asp.net-core-mvc .net-5

【解决方案1】：

根据我的相关问题here 和here，我想我必须添加script-src unsafe-inline 才能让jQuery 3.1+ 在以下场景中正常工作

1>您使用的是 jQuery 3.1+
2>jQuery 被添加到 _layout 页面或主页上，所以它在开始时只加载一次。
3>您正在使用 AJAX 加载部分内容。

在nonce 方法中，建议对每个http 请求使用唯一的nonce。但他的方法在这里行不通。因为 AJAX 调用会在 header 中得到不同的 nonce。所以之后的任何 jQuery 调用都将不起作用。

对我来说，它使用的是 2.1.1，因为 jQuery 2.x parses all <script>...</script> tags from the HTML and puts it in a dynamically generated script tag or executes those through eval( ) details 而我有 script-src nonce-xyz unsafe-eval

【讨论】：

嗨，我也面临同样的问题。您是否刚刚删除了 nonce 表单 CSP 标头并添加了“不安全内联”？因为如果你同时添加两者，它会忽略'unsafe-inline'