web-dev-qa-db-fra.com

SecurityError: l'opération n'est pas sécurisée - React Heroku

J'essaie de déployer une application que j'ai créée à l'aide de create-react-app. Cela fonctionne très bien localement. Mais lors du déploiement sur Heroku, l'erreur suivante s'affiche:

SecurityError: The operation is insecure.

J'utilise la bibliothèque Pusher pour créer un bloc-notes réactif, mais je ne vois pas comment le délier correctement sur heroku. J'ai essayé Firefox, chrome et Edge mais cela ne semble pas fonctionner.

Cela indique que le problème se trouve dans/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

traite ce problème depuis environ une semaine maintenant.

Ce n'est pas une excellente solution mais cela fonctionne.

  1. accédez à votre fichier package.json
  2. supprimer les dépendances

  3. remplacer par ces versions précédentes:
    "réagir": "^ 16.8.6",
    "react-dom": "^ 16.8.6",
    "react-scripts": "3.0.1"

  4. npm install dans le terminal

  5. Poussez vers Heroku

vraiment stupide mais ça marche pour moi.

0
Stephanfalcon

J'ai rencontré le même problème. Je n'ai pas pu trouver de solution.

Jusqu'à ce que quelqu'un le comprenne, j'ai une solution de contournement, avec Docker.

Placez un Dockerfile dans le dossier racine du projet.

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

Et exécutez ces commandes heroku avec la CLI Heroku

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

Je pense que c'est assez ghetto, donc je viens de déployer mon application React sur les pages Github. Mais, je suppose que si je voulais vraiment que ce soit sur Heroku, je l'aurais fait.

0
Ghislain

Je viens de rencontrer le même problème. Étonnamment, les traces d'erreur ne correspondent peut-être pas à la véritable erreur. Vérifiez votre console JavaScript pour une erreur pour le "CSP" ou "Content Security Policy". La solution consiste à autoriser le socket Web du serveur dans votre politique de sécurité du contenu.

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

Déclarer un CSP avec connect-src "self" ne permettra pas aux websockets de revenir au même hôte/port, car ils ne sont pas de la même origine. Cela pourrait surprendre les développeurs qui n'ont pas étudié en détail la spécification CSP et qui ont une solide compréhension du même modèle de sécurité Origin.

Modifiez votre public/index.html pour inclure ce 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 %>
      ...
    " />

En supposant qu'il s'agit d'un serveur de développement et non destiné à la production, utilisez-le à la place:

<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 %>
      ...
    " />

Le bogue qui suit cela pour Safari: https://bugs.webkit.org/show_bug.cgi?id=201591

0
John Starich