Content Security Policy多哈希配置无效问题排查

你可能漏了这些点 #

1. Blazor动态注入的内联样式 #

Blazor Server运行时会动态添加一些内联样式，比如组件加载状态、错误提示的样式，这些不是页面初始渲染就有的，控制台不会在首次加载时提示它们的哈希。你需要：

• 打开浏览器控制台，完整操作一遍应用核心流程（刷新页面、交互组件、触发状态变化），把所有CSP报错里涉及内联样式的哈希全部收集。
• 注意SignalR连接建立后可能还会注入新样式，别遗漏这部分。

2. _Host.cshtml里的默认内联样式 #

默认的_Host.cshtml中自带一段用于错误提示UI的内联样式：

<style>
    #blazor-error-ui {
        background: lightyellow;
        bottom: 0;
        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
        display: none;
        left: 0;
        padding: 0.6rem 1.25rem 0.7rem 1.25rem;
        position: fixed;
        width: 100%;
        z-index: 1000;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
</style>

这段样式的哈希必须计算并加入style-src，否则必然触发CSP报错。

3. 哈希要带完整算法前缀 #

控制台提示的哈希会明确标注算法（如sha256-/sha384-/sha512-），你必须完整复制包含前缀的字符串，只复制哈希值会导致算法不匹配，配置无效。

4. 组件内的元素style属性无法用哈希覆盖 #

如果你的Blazor组件中使用了<div style="color: red">这类元素内联样式，CSP哈希是无法管控的——因为这是元素属性，而非独立的<style>标签。这种场景下，你要么改用CSS类，要么使用兼容性有限的unsafe-hashes指令，要么接受该场景的限制。

正确配置示例 #

将所有收集到的哈希加入配置后，style-src部分应该类似这样：

<meta http-equiv="Content-Security-Policy" 
      content="base-uri 'self';
               default-src 'self';
               img-src data: https:;
               object-src 'none';
               script-src 'self';
               style-src 'self' 'sha256-xxxxxxxxx' 'sha384-yyyyyyyyy';
               upgrade-insecure-requests;">

验证步骤 #

• 配置完成后刷新页面，遍历所有功能点，检查控制台是否还有CSP报错。
• 若仍有报错，仔细核对报错信息中的哈希值，确认是否已添加到style-src中。

内容的提问来源于stack exchange，提问作者Ivan-Mark Debono