web-dev-qa-db-ja.com

SecurityError：操作は安全ではありません-React Heroku

Create-react-appを使用して作成したアプリケーションをデプロイしようとしています。ローカルで問題なく動作します。ただし、Herokuにデプロイすると、次のエラーが表示されます。

SecurityError: The operation is insecure.

プッシャーライブラリを使用してリアクティブなメモ帳を作成していますが、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.
reactjsherokuwebpackpusher-js
3
David F

この問題を1週間ほど処理しています。

これは優れたソリューションではありませんが、機能します。

  1. package.jsonファイルに移動します
  2. 依存関係を削除する

  3. これらの以前のバージョンに置き換えます。
    "反応"： "^ 16.8.6"、
    "反応-dom"： "^ 16.8.6"、
    "react-scripts"： "3.0.1"

  4. npm installターミナル

  5. Herokuにプッシュする

本当に愚かですが、私のために働いています。

0
Stephanfalcon

私は同じ問題に出くわしました。解決策が見つかりませんでした。

誰かがそれを理解するまで、私は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コマンドをHeroku CLIで実行します

$ heroku container:login
$ heroku container:Push web
$ heroku container:release web

これはかなりゲットーだと思うので、反応アプリをgithubページにデプロイしました。しかし、もし私が本当にそれをHerokuに載せたかったのであれば、私はこれをしたでしょう。

0
Ghislain

同じ問題が発生しました。おそらく驚くべきことに、エラーのトレースは実際のエラーと一致しませんでした。 JavaScriptコンソールで、「CSP」または「コンテンツセキュリティポリシー」のエラーを確認してください。解決策は、コンテンツセキュリティポリシーでサーバーのWebソケットを許可することです。

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

Connect-src 'self'を使用してCSPを宣言すると、WebSocketは同じオリジンではないため、同じホスト/ポートに戻ることはできません。これは、CSP仕様を詳細に研究しておらず、同じOriginセキュリティモデルを十分に理解している開発者にとっては驚きかもしれません。

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

0
John Starich