3

为什么添加以下标头会导致 Firefox 在浏览器中呈现时仅清空所有 style="" 属性?

context.HttpContext.Response.Headers.Add("Content-Security-Policy", "style-src-attr 'unsafe-inline'; script-src-elem 'self' 'unsafe-inline'; img-src 'self' data:; frame-ancestors 'self'");

Chrome 和 Edge 浏览器显示所有内容正确,这意味着样式属性的值未清除为“”。

4

2 回答 2

1

您使用的指令和语法都是有效的 ,但根据内容安全策略3 级规范,目前处于工作草案状态。

现代 Chrome 和 Edge 浏览器现在完全支持内容安全策略 2 级规范以及部分内容安全策略 3 级规范。虽然到目前为止 Firefox部分支持内容安全策略 2 级和 3 级规范,这就是 Chrome 和 Edge 浏览器显示所有内容正确但 Firefox 的原因。(请更新您的 Firefox 版本,然后重新检查)。

https://caniuse.com/#search=content%20security%20policy%20level

在此处输入图像描述

仅供参考,如果您的浏览器支持,style-src-attr可以与 style-src 结合使用。如果该指令不存在,用户代理将查找style-src指令,如果两者都不存在,则回退到default-src指令。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src-attr

回来回答,现在解决这个问题,您的内容安全策略标题应该如下所示,几乎所有浏览器都支持。

context.HttpContext.Response.Headers.Add("Content-Security-Policy","style-src 'unsafe-inline'; script-src 'self' 'unsafe-inline'; img-src 'self' data:; frame-ancestors 'self'");

更新:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src-attr#Browser_compatibility

在此处输入图像描述

这是 Mozilla 中的一个错误,十个月前已经有人报告过,可能会在新的更新中修复。

https://bugzilla.mozilla.org/show_bug.cgi?id=1529338

于 2019-12-03T05:11:30.647 回答
0

首先,我无法重现该问题。当我添加您的 Content-Security-Policy 时,Firefox 显示的内联样式很好(v 70.0.1,64 位)。

然后我用https://cspvalidator.org测试了你的 CSP,它给出了以下错误

1:1:无法识别的指令名称:“style-src-attr”。

1:33:无法识别的指令名称:“script-src-elem”。

这是有道理的,因为根据站点https://content-security-policy.com/不存在这些属性

所以 CSP 应该是

"style-src 'unsafe-inline'; script-src 'self' 'unsafe-inline'; img-src 'self' data:; frame-ancestors 'self'"
于 2019-11-29T09:21:11.813 回答