web-dev-qa-db-fra.com

Vue.js dans Chrome

Vue.js dans Chrome

Salut! J'essaye de faire une extension Chrome en utilisant Vue.js mais quand j'écris

<input v-model="email" type="email" class="form-control" placeholder="Email">

Chrome supprime la partie v-model du code et le rend

<input type="email" class="form-control" placeholder="Email">

Est-ce qu'il y a un moyen d'éviter cela?

javascriptgoogle-chromegoogle-chrome-extensionvue.js
31
Camen

Avez-vous une version csp (Vue.js v1)

Version compatible CSP

Certains environnements, tels que Google Chrome Apps, appliquent la politique de sécurité du contenu (CSP) et n'autorisent pas l'utilisation de la nouvelle fonction () pour évaluer les expressions. Dans ces cas, vous pouvez utiliser la compatibilité CSP construire à la place.

(Vue.js v1) http://v1.vuejs.org/guide/installation.html#CSP-compliant-build

npm install vue@csp --save

"dependencies": {
  "vue": "1.0.26-csp"
}

Nouvelle version (Vue.js v2) https://vuejs.org/v2/guide/installation.html#CSP-environments

Certains environnements, tels que Google Chrome Apps, appliquent la stratégie de sécurité du contenu (CSP), qui interdit l'utilisation de la nouvelle fonction () pour évaluer les expressions. La version autonome dépend de cette fonctionnalité pour compiler des modèles, est donc inutilisable dans ces environnements.

Il existe cependant une solution. Lorsque vous utilisez Vue dans un système de construction avec Webpack + vue-loader ou Browserify + vueify, vos modèles seront précompilés en fonctions de rendu qui fonctionnent parfaitement dans les environnements CSP.

52
davland7

Je suppose que vous utilisiez du code comme new Vue(...) dans votre implémentation, comme ce problème l'a dit.

Veuillez noter que par défaut CSP dans l'extension chrome, eval et les fonctions associées sont désactivées .

Un code comme le suivant ne fonctionne pas:

  • alert(eval("foo.bar.baz"));
  • window.setTimeout("alert('hi')", 10);
  • window.setInterval("alert('hi')", 10);
  • new Function("return foo.bar.baz");

La solution serait donc

1. Assouplir la politique par défaut.

Selon la description de JavaScript évalué ,

La politique contre eval () et ses proches comme setTimeout(String), setInterval(String) et new Function(String) peut être assouplie en ajoutant 'unsafe-eval' À votre politique:

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

Cependant, le guide mentionne également que,

nous vous déconseillons fortement de le faire. Ces fonctions sont vecteurs d'attaque XSS notoires .

2. Utilisation d'une version compatible CSP (recommandé)

Comme l'a dit la page d'installation de Vue.js ,

Certains environnements, tels que Google Chrome Apps, appliquent la politique de sécurité du contenu (CSP) et ne permettent pas l'utilisation de new Function() pour évaluer les expressions. Dans ces cas, vous pouvez utiliser la version version compatible CSP à la place.

15
Haibara Ai