使用datalist触发default-src 'self' CSP错误，不开启unsafe-inline如何修复？

问题根因 #

该报错不属于业务代码问题：Chrome等部分浏览器渲染<datalist>组件的下拉选项时，会自动向DOM注入内置的临时内联样式，触发CSP校验。由于你未单独配置style-src指令，默认继承default-src 'self'的严格规则，不允许未授信的内联样式，因此抛出错误，但浏览器内置渲染逻辑不受CSP完全拦截，所以datalist功能可以正常运行。

最高安全级别修复方案（无需添加unsafe-inline配置） #

方案1：配置style-src添加对应哈希（改造成本最低） #

控制台报错信息中已经给出了浏览器注入内联样式对应的哈希值（格式为sha256-xxxx的完整字符串），你只需要拆分CSP指令，单独配置style-src并添加该哈希即可：

<!-- 把下方的哈希值替换为你自己控制台报错里的完整sha256值 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'sha256-pIL+你控制台显示的完整哈希值'">

该哈希是浏览器内置datalist样式的固定校验值，仅在浏览器版本迭代修改内置样式时才会变动，稳定性极高，安全级别与原配置完全一致。

方案2：使用nonce动态授信（适配性更强） #

如果需要兼容多浏览器版本、避免哈希变动影响，可采用nonce方案：

1. 服务端每次渲染页面前，生成一个随机的唯一值作为nonce（示例为Node.js代码：const cspNonce = crypto.randomBytes(16).toString('base64')）
2. 将该nonce添加到CSP的style-src指令中：style-src 'self' 'nonce-${cspNonce}'
   该方案无需依赖固定哈希，也不需要放开任何不安全的CSP规则，安全等级为最高级。

方案3：替换datalist为自定义组件（无需修改CSP） #

如果不想调整CSP配置，可自行开发模拟datalist功能的自定义下拉组件，所有样式统一放在外部CSS文件中加载，完全不会触发内联样式的CSP校验。

避坑提示 #

不需要在CSP中添加unsafe-hashes或者unsafe-inline配置，上述三种方案均满足最高Web安全要求。

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