能否配置Blazor Server禁用内联样式以解决CSP报错问题？

问题描述 #

配置Blazor Server的内容安全策略时，使用style-src 'self'指令后，浏览器抛出多个CSP错误，提示内联样式被阻止。想确认是否存在能强制Blazor不使用内联样式的配置，或者是否必须自行添加哈希。

当前CSP配置 #

<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';
      upgrade-insecure-requests;">

浏览器CSP错误示例 #

blazor.server.js:1 拒绝应用内联样式，因为它违反了内容安全策略指令: "style-src 'self'"。需要启用内联执行的话，必须使用 'unsafe-inline' 关键字、哈希值('sha256-mBOLIpCiEczo5ZIWAXklxWfEkgQytZbq3p0NQpliwjI=')或随机数(nonce-...)。注意，除非存在 'unsafe-hashes' 关键字，否则哈希不适用于事件处理程序、样式属性和javascript:导航。
 
applyAttribute @ blazor.server.js:1
insertElement @ blazor.server.js:1
insertFrame @ blazor.server.js:1
applyEdits @ blazor.server.js:1
updateComponent @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
processBatch @ blazor.server.js:1
(anonymous) @ blazor.server.js:1
_invokeClientMethod @ blazor.server.js:1
_processIncomingData @ blazor.server.js:1
Ft.connection.onreceive @ blazor.server.js:1
i.onmessage @ blazor.server.js:1

解决方案 #

1. 无强制禁用内联样式的配置 #

Blazor Server的渲染机制依赖SignalR推送DOM更新，过程中会动态生成内联样式（比如组件的样式属性、过渡动画样式等），目前没有官方配置可以完全禁用这类内联样式的生成。

2. 添加哈希值（推荐生产环境使用） #

直接将浏览器错误中给出的哈希值添加到style-src指令中，若存在多个内联样式，需收集所有对应的哈希值一并添加。修改后的CSP配置示例：

<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-mBOLIpCiEczo5ZIWAXklxWfEkgQytZbq3p0NQpliwjI=';
      upgrade-insecure-requests;">

注意：后续若Blazor版本更新或新增组件引入新的内联样式，可能需要更新哈希列表。

3. 使用Nonce（更灵活，但需服务端支持） #

生成随机的nonce值，在服务端渲染CSP meta标签时注入该值，同时配置Blazor使其在生成内联样式时携带此nonce。这种方式需要在Program.cs中添加相关配置，确保SignalR推送的DOM更新中的内联样式使用指定nonce，避免每次更新都要修改哈希。

4. 临时方案：使用'unsafe-inline'（不推荐生产环境） #

若只是测试环境临时绕过，可在style-src中添加'unsafe-inline'，但这会大幅降低CSP的安全性，生产环境不建议使用。

内容的提问来源于stack exchange，提问作者redrobot