web-dev-qa-db-fra.com

Sommes-nous obligés d'utiliser «insectif-inline» dans notre CSP lors de l'utilisation de VUE.JS?

Y a-t-il un moyen de faire de VUE.JS à travailler avec CSP correctement?

Quand je gère ma candidature spa (résultant de npm run generate avec NUXT.JS), je vais avoir plusieurs avertissements tels que ceux-ci:

A refusé d'appliquer un style en ligne car il viole la directive de la politique de sécurité de contenu suivante: "Stric-src" Stric-dynamique "Strict-dynamique" "Strict-dynamique" non-124LK5FJOC4JN7QQLYESG2JEVXYUQUL8J '' inoxy-inline "HTTPS:". Notez que "non sécurisée" est ignorée si une valeur de hash ou de nonce est présente dans la liste des sources.

Savoir CSP , il y a deux façons correctes de résoudre ce problème:

  1. En utilisant des non -ces, où vue.js devrait signer tous les scripts et styles générés avec un attribut nonce. Mais je ne pense pas que cela résoudrait quoi que ce soit, car il apparaît que certains CSS sont ajoutés en ligne.

  2. Utilisation de HASHES, qui est en fait la manière préférée de le faire, car le hachage sécurise exactement ce que nous voulons que le client exécute sur le navigateur.

Toutefois, afin d'utiliser HASHES, VUE.JS/WebPack doit pouvoir calculer le hachage pour tous ses scripts et styles et:

  • pour chaque compilation, dites-leur au développeur qui sera alors Ajoutez ces hashes dans un fichier de configuration Nginx,

ou alors,

  • être capable de générer META TAGS contenant les haubes, ce processus 100% transparent au développeur, qui n'a pas besoin de configurer quoi que ce soit d'autre pour garantir une bonne protection CSP.

Vue.js apporte-t-il cela de quelque manière que ce soit? Y a-t-il quelqu'un dans le monde qui a été capable de faire du CSP travaillant avec VUE.JS sans aucune "insale inine"?

vue.jswebpacknuxt.jscontent-security-policywebpack-style-loader
6
PedroD

vous pouvez utiliser le --no-unsafe-inline option dans votre npm run build script

https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-build

1
Charles Okwuagwu

Je ne sais pas si c'est mieux comme un commentaire ou non, mais cela fonctionne un peu, alors mettez-le ici pour le moment.

Notre stratégie de déploiement peut être un peu différente, mais nous déclenchons essentiellement une Lambda pour mettre à jour le CSP de Cloudfront avec notre CI/CD.

Nous avons noté que le script en ligne était statique malgré différentes versions/bosses d'application. Notre solution de contournement actuelle est:

  1. Déployer sur un serveur DEV Server - Obtenez le hachage SHA256 à partir du chrome Dev Outils (vous pouvez probablement le calculer vous-même pour éviter de déployer)
  2. Mise à jour Notre TerraForm Cloudfront Lambda csp avec le hachage
  3. Sur le nouveau déploiement des matchs de hachage et nous n'avons pas besoin d'inauguration dangereuse

Quelques grandes limitations RE: Si NUXT modifie le script inline sur de nouvelles versions, nous devrons mettre à jour manuellement notre hachage dans le CSP. De plus, en fonction de votre cadre de coiffage, il peut y avoir un certain nombre de styles en ligne qui ne sont pas capturés ici.

0
Matt H