如何在不违反 CSP 的情况下绑定剃须刀视图中的 onchange 等事件

Posted 2023-02-19

【中文标题】如何在不违反 CSP 的情况下绑定剃须刀视图中的 onchange 等事件

【英文标题】：How to bind events such as onchange in razor views without violating CSP

【发布时间】：2020-05-19 15:47:06

【问题描述】：

为了提高安全性，我在中间件中添加了这个响应头。content-security-policy: default-src 'self'。

在剃刀局部视图中，我有一个带有 onchange="this.form.submit() 的 SELECT 元素

<div class="dropdown-item text-dark">
    <form id="selectLanguage" method="post" class="form-horizontal" role="form"
            asp-controller="Home"
            asp-action="PersistLanguage" 
            asp-route-returnUrl="@returnUrl">
        <select name="culture" onchange="this.form.submit()"
                asp-for="@requestCulture.RequestCulture.UICulture.Name" asp-items="cultureItems">
        </select>
    </form>
</div>

因此，浏览器会报告以下内容。

拒绝执行内联事件处理程序，因为它违反了 以下内容安全策略指令：“default-src 'self' 数据：“。'unsafe-inline'关键字，哈希（'sha256-...'），或 启用内联执行需要一个随机数（'nonce-...'）。笔记 'script-src' 也没有明确设置，所以 'default-src' 是 用作后备。

（未知）ListPicker._handleMouseUp

放松政策可以解决问题，但不建议这样做：script-src 'self' 'unsafe-inline'。

在不违反 CSP 内联脚本约束的情况下，在 Razor 局部视图中绑定 onchange 等事件的正确方法是什么？

【参考方案1】：

你可以在脚本文件中写一些这样的代码。

$(function()
    $("#culture").change(function()
        this.form.submit();
    );
);

【讨论】：

谢谢阿努拉。我同意这种事件绑定对于满足 CSP 是必要的。所以你是说将所有事件绑定移动到一个单独的 js 文件（或多个文件），并从视图中添加指向这些文件的脚本引用？我随后还尝试了在 声明之后直接在一个小的嵌入式脚本块中进行绑定的方法，但这需要实现 nonce 以满足 CSP。更多的努力，但好处是视图维护起来更直观，因为绑定逻辑与 html 元素相邻，而不是“其他地方”。

有可用的asp.net核心中间件，有助于在应用中实现CSP。请也检查一下。也不是使用香草 javascript。如果可能，请尝试使用 Angular，其中提供 csp 支持。

是的，我通常使用 Angular，但在这种情况下仅限于 Razor。决定不在我的控制范围内。

如果您使用的是 vanila javascript - 将内联脚本移动到文件是最简单的方法。