如何解决ReactJS-拒绝应用内联样式,因为它违反了以下内容安全策略指令
在生产环境中加载ReactJS项目时,在浏览器检查器(Chrome,Brave,Safari)中出现以下错误:
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src-elem 'self' https://fonts.googleapis.com". Either the 'unsafe-inline' keyword,a hash ('sha256-TMIFk5ZjGNpczjRE6YVaBrPXVNzANj9JRK+w2bh9TX8='),or a nonce ('nonce-...') is required to enable inline execution.
我使用以下命令来构建ReactJS项目(它解决了内联脚本问题,但没有内联样式):
INLINE_RUNTIME_CHUNK=false npm run build
这是CSP政策部分,涉及以下样式:
Header set Content-Security-Policy "default-src 'self'; style-src 'self'; style-src-elem 'self' https://fonts.googleapis.com; ..."
我相信问题是在构建阶段发生的,当React生成块文件(名称如' 2.3c013fe3.chunk.js ')并将内联样式嵌入代码中时,尽管我没有在我的源代码中的任何地方都不能使用内联样式。所有样式都包含在fileX.module.css中,并导入到tsx文件中,例如以下示例:
Example.tsx
import styles from './Example.module.css';
const Example = () => (
<div className={styles.container}>
Hello world
</div>
);
Example.module.css
.container {
display: flex;
flex-direction: column;
align-items: center;
}
如果自动生成的块文件是问题,我看不到如何使用 hash 或 nonce 替代方案解决此问题,因为React会始终生成这些内联样式。另一方面,我认为 unsafe-inline 不是一个选择,因为这实际上会使CSP失去作用。
对CSP指令或React设置有任何解决此问题的建议吗? (我阅读了所有类似的问答,但没有一个涉及到React的特定问题)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。