React组件style属性是否不受CSP的style-src/style-src-attr指令限制？

行为是否符合预期？ #

这种部分矛盾的行为是浏览器针对React框架特殊渲染逻辑的处理结果，并非严格遵循CSP规范的字面要求：

• 触发CSP违规错误：这部分符合规范——React渲染内联样式时，会把虚拟DOM的style属性转换为对原生DOM元素style属性的赋值操作，浏览器将此行为识别为“设置inline style属性”，而你的CSP指令未允许此类操作（既无unsafe-inline，也无针对style属性的nonce/哈希），因此触发违规报告。
• 样式仍被应用：这部分不符合规范预期——按照CSP设计，违规的inline style应被阻止生效，但React是通过JavaScript动态修改DOM样式，浏览器无法在脚本执行后回溯撤销已应用的样式，因此出现“报告违规但样式生效”的矛盾现象。

规范相关说明 #

CSP 3规范中明确：

• style-src指令管控样式表（外部样式表、内联<style>标签）的加载与执行；
• style-src-attr指令专门管控HTML标签中直接定义的inline style属性（如<div style="color:red">）；
• 通过JavaScript API（如element.style、CSSStyleDeclaration.setProperty()）动态设置的样式，不在style-src-attr的管控范围内，属于脚本操作DOM的正常权限，CSP默认不限制此类操作。

但各大浏览器实现中，会将React这类框架通过脚本赋值DOMstyle属性的行为误判为“inline style属性设置”，因此触发违规报告，但无法阻止样式生效——这是浏览器为兼容框架渲染逻辑做出的妥协，并非规范强制要求。

纯HTML与React场景的差异 #

• 纯HTML场景下，inline style属性是静态定义在HTML中的，浏览器可在解析HTML时直接拦截违规样式，因此样式不会生效，同时触发违规报告，完全符合规范；
• React场景下，样式通过JavaScript动态赋值给DOM元素，浏览器在脚本执行完成后才检测到违规，此时样式已被应用，无法撤销，因此出现矛盾现象。

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