问题描述
当我将 datalist 与 Content-Security-Policy" content="default-src 'self'" 一起使用时，它给出错误，“拒绝应用内联样式，因为它违反了以下内容安全策略指令：”default-src '自己'”。启用内联执行需要“unsafe-inline”关键字、哈希（“sha256-pIL...”）或随机数（“nonce-...”）。请注意，除非存在“unsafe-hashes”关键字，否则哈希值不适用于事件处理程序、样式属性和 javascript: 导航。另请注意，'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>
解决方法
这似乎是基于铬的浏览器（包括 Edge）中的一个新错误。它不会出现在 Firefox v89 中。
,要消除此错误，只需将其添加到您的 CSP 中：
style-src-attr 'sha256-pILX+5FGCpLRHvNBgtABIdSMmytrYudGxJBUYXY1t0s=' 'unsafe-hashes';
该指令仅适用于 Chromium 引擎的浏览器，并适用于 style= 属性。其他浏览器将遵循 style-src 规则。对于 <style>...</style> 块，Chrome 也将遵循 style-src 规则。