当我使用数据列表时，如何修复 "it violates the following Content Security Policy directive: "default-src 'self'"？

Question

当我将数据列表与 Content-Security-Policy" content="default-src 'self'" 一起使用时，它给出错误，"拒绝应用内联样式，因为它违反了以下内容安全策略指令： “默认源 'self'”。启用内联执行需要 'unsafe-inline' 关键字、散列 ('sha256-pIL...') 或随机数 ('nonce-...')。请注意，哈希不适用于事件处理程序、样式属性和 javascript: 导航，除非存在 'unsafe-hashes' 关键字。另请注意 'style-src' 未明确设置，因此 'default-src' 用作后备。".

数据列表在浏览器中如我所愿地工作，但是错误消息很烦人。因为我希望尽可能保持安全性，所以我不想将 Content-Security-Policy 更改为 unsafe-inline。你能给我一个解决这个问题的提示吗？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
</head>
<body>
   <label for="animalList" class="form-label">animal</label>
   <input class="form-control" list="animalOptions" id="animalList" placeholder="">
   <datalist id="animalOptions">
     <option value="dog">
     <option value="cat">
   </datalist>
</body>
</html>

Answer 1

这似乎是基于 chromium 的浏览器（包括 Edge）中的一个新错误。它没有出现在 Firefox v89 中。

Answer 2

要消除此错误，只需将其添加到您的 CSP 中：

style-src-attr 'sha256-pILX+5FGCpLRHvNBgtABIdSMmytrYudGxJBUYXY1t0s=' 'unsafe-hashes';

此指令仅适用于 Chromium 引擎的浏览器，并适用于 style= 属性。其他浏览器将遵循 style-src 规则。对于 <style>...</style> 个块，Chrome 也将遵循 style-src 规则。

当我使用数据列表时，如何修复 "it violates the following Content Security Policy directive: "default-src 'self'"？

How can fix "it violates the following Content Security Policy directive: "default-src 'self'" when I use datalist?

html

datalist

content-security-policy

unsafe-inline