SecurityError：操作不安全 - React Heroku答案

【问题标题】：SecurityError: The operation is insecure - React HerokuSecurityError：操作不安全 - React Heroku
【发布时间】：2020-04-03 13:32:58
【问题描述】：

我正在尝试部署我使用 create-react-app 创建的应用程序。它在本地工作得很好。但是在 Heroku 上部署时，会出现如下错误：

SecurityError: The operation is insecure.

我正在使用 Pusher 库制作一个反应式记事本，但我不知道如何在 heroku 上正确部署它。我在 firefox、chrome 和 edge 上试过，但似乎没有用。

这表明问题出在 /app/webpack/bootstrap 中。

  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;```

Any ideas on how to solve this error would be much appreciated.

【问题讨论】：

标签： reactjs heroku webpack pusher-js

【解决方案1】：

我认为 Stephanfalcon 走在了正确的轨道上。您暂时需要做的就是使用 react-scripts 3.2.0。我用 create-react-app 提交了这个错误：

https://github.com/facebook/create-react-app/issues/8250

在 react-scripts 3.3.0 中，他们将 websockets 的协议从：

// Connect to WebpackDevServer via a socket.
var connection = new SockJS(
  url.format({
    protocol: window.location.protocol,
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

到：

// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol: 'ws',
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

在 Create React App Github 上阅读相关问题，听起来他们将在 react-scripts 3.3.1 中修复此问题。

【讨论】：

所以关于我发布的问题，我很快得到了纠正。我们看到这条消息是因为我们正在部署开发版本。要解决此问题，请将 package.json 中的启动脚本更改为 npm install -g serve && serve -s build，您应该会很好。
我在 react-scripts 4.0.3 上遇到了这个问题

【解决方案2】：

我刚刚遇到了同样的问题。也许令人惊讶的是，错误跟踪与真正的错误不匹配。检查您的 JavaScript 控制台是否有“CSP”或“内容安全策略”错误。解决方案是在您的内容安全策略中允许服务器的 Web 套接字。

https://github.com/w3c/webappsec-csp/issues/7

使用 connect-src 'self' 声明 CSP 将不允许 websocket 回到相同的主机/端口，因为它们不是同一个来源。这对于没有详细研究过 CSP 规范并牢牢掌握同源安全模型的开发人员来说可能会感到惊讶。

修改您的public/index.html 以包含此connect-src：

<meta http-equiv="Content-Security-Policy" content="
      ...
      connect-src 'self' wss://host:port ws://host:port; <% // Remove ws:/wss: after https://bugs.webkit.org/show_bug.cgi?id=201591 is fixed %>
      ...
    " />

假设它是一个开发服务器而不是用于生产，请改用它：

<meta http-equiv="Content-Security-Policy" content="
      ...
      connect-src 'self'<%= process.env.NODE_ENV === 'development' && " ws:" || "" %>; <% // Remove ws: after https://bugs.webkit.org/show_bug.cgi?id=201591 is fixed %>
      ...
    " />

为 Safari 跟踪此问题的错误：https://bugs.webkit.org/show_bug.cgi?id=201591

【讨论】：

【解决方案3】：

我遇到了同样的问题。我找不到解决方案。

在有人弄清楚之前，我有一个解决方法，使用 Docker。

在项目根目录下放一个 Dockerfile。

FROM node:alpine

ENV NODE_ENV=production

WORKDIR /usr/src/app

COPY . .

RUN npm i\
 && npm run build\
 && npm i -g serve

CMD serve -s build

然后使用 Heroku CLI 运行这些 heroku 命令

$ heroku container:login
$ heroku container:push web
$ heroku container:release web

我认为这是一个非常好的贫民区，所以我刚刚将我的 react 应用程序部署到了 github 页面。但是，我想如果我真的希望它出现在 Heroku 上，我会这样做。

【讨论】：

【解决方案4】：

已经处理这个问题大约一个星期了。

这不是一个很好的解决方案，但它确实有效。

转到您的 package.json 文件
删除依赖项
替换为这些以前的版本：
“反应”：“^16.8.6”，
"react-dom": "^16.8.6",
“反应脚本”：“3.0.1”
npm install 在终端中
推送到heroku

真的很愚蠢，但对我有用。

【讨论】：