当我使用 datalist 时，如何解决“它违反了以下内容安全策略指令：”default-src 'self'”？
[英]How can fix “it violates the following Content Security Policy directive: ”default-src 'self'" when I use datalist?
问题描述
When I use datalist with the Content-Security-Policy" content="default-src 'self'", it gives error, "Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'".
当我将 datalist 与 Content-Security-Policy" content="default-src 'self'" 一起使用时，它会给出错误，"拒绝应用内联样式，因为它违反了以下内容安全策略指令："default-src 'self' ”。 Either the 'unsafe-inline' keyword, a hash ('sha256-pIL...'), or a nonce ('nonce-...') is required to enable inline execution.启用内联执行需要“unsafe-inline”关键字、哈希（“sha256-pIL...”）或随机数（“nonce-...”）。 Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.请注意，除非存在“unsafe-hashes”关键字，否则哈希值不适用于事件处理程序、样式属性和 javascript: 导航。 Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.".还要注意，'style-src' 没有明确设置，所以 'default-src' 用作后备。”。
The data list works as I hope in the browser, however the error message is annoying.数据列表在浏览器中按我希望的那样工作，但是错误消息很烦人。 As I hope to keep the security as strong as possible, I do not want to change Content-Security-Policy to unsafe-inline.因为我希望尽可能保持安全性，所以我不想将 Content-Security-Policy 更改为 unsafe-inline。 Could you give me a hint to fix this?你能给我一个提示来解决这个问题吗？
<!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>
2 个解决方案
解决方案1
0 2021-07-07 13:18:39
This seems to be a new bug in chromium based browsers (including Edge).这似乎是基于铬的浏览器（包括 Edge）中的一个新错误。 It doesn't appear in Firefox v89.它不会出现在 Firefox v89 中。
解决方案2
0 已采纳 2021-07-08 20:08:37
To get rid of this error just add into your CSP:要消除此错误，只需将其添加到您的 CSP 中：
style-src-attr 'sha256-pILX+5FGCpLRHvNBgtABIdSMmytrYudGxJBUYXY1t0s=' 'unsafe-hashes';
This directive works in browsers on Chromium engine only and applies to style= attribute.该指令仅适用于 Chromium 引擎的浏览器，并适用于style=属性。 Other browsers will follow style-src rules.其他浏览器将遵循style-src规则。 For <style>...</style> blocks a Chrome will follow style-src rules too.对于<style>...</style>块，Chrome 也将遵循style-src规则。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.