出身背景

我必须用Content Security Policy来做reactapply.

原因是,我正在创建一个WebExtension/Browser Extension/add-on,它们有这样一个content security policy,比如'unsafe-eval''unsafe-inline'strictly disallowed:

插件上列出的扩展不允许在其CSP中使用"不安全判断"、"不安全内联"、远程脚本、blob或远程源的扩展.mozilla.由于重大安全问题.

我已经创建了一个应用程序,有create-react-app个,this guide个.

However请注意,出于安全原因,(如此严格的)CSP实际上也应该在"正常"网站上使用,所以这个问题对于附加组件制造商来说不是only.

问题

但当我运行npm run build时,生成的index.html确实包含了超过inline JS个代码.

问题

那么,我如何配置/使用react来避免这样做,以及...

  1. 或者将所有JS/CSS代码放在不同的文件中?
  2. 或者添加名词或CSP允许的其他内容?
  3. 或者用类似的方法解决这个问题?

编辑

实际上,开发版本(在我运行npm start时创建)似乎没有这样的小型化.所以我问了一个关于如何从那里获取文件的单独问题:How to build a production version of React without minification?

推荐答案

事实上,我找到了一个非常简单的答案.只需像这样运行构建脚本:

INLINE_RUNTIME_CHUNK=false npm run build

之后,它应该与CSP兼容.

Reactjs相关问答推荐

如何通过TEK查询将对象传递到Express后台

避风港访问端口以包含Reaction应用程序

安装后未渲染tailwind

如何在react 流中使用文本区域和改变 node 的输入大小?

为多租户SSO登录配置Azure AD应用程序

无法将react 路由状态从路由传递给子组件

如何在React中正确地将密码输入类型切换为文本或反之亦然(下一页)

for each 子级加载父路由加载器

更改点几何体的坐标会将其隐藏

关于forwardRef,我可以';我不理解第二个用例

获取类别和页面的参数

Chart.js如何go 除边框

Mui 在 TextField 标签上添加工具提示显示两个工具提示框

React Js和Firestore中如何将当前ID与集合中的ID查询以仅显示具有相似字段和值的文档-第二部分

根据其中的值不同地react setState 更新状态

文本的几个词具有线性渐变 colored颜色 - React native

状态链接未传递到路由页面

在 React 中将路径与查询变量匹配

当从数组中删除数据时,UseEffect 不会重新渲染,仅在添加数据时才会重新渲染

用 jest 测试包裹在 redux 和 router 中的组件