こんにちは! Vue.jsを使用してChrome拡張機能を作成しようとしていますが、
<input v-model="email" type="email" class="form-control" placeholder="Email">
Chromeはコードのv-model-partを削除して作成します
<input type="email" class="form-control" placeholder="Email">
これを防ぐ方法はありますか?
あなたはCSPバージョン(Vue.js v1)を持っています
CSP準拠のビルド
Google Chrome Appsなどの一部の環境では、コンテンツセキュリティポリシー(CSP)が適用され、式の評価に新しいFunction()を使用できません。これらの場合、CSP準拠の代わりにビルドします。
(Vue.js v1) http://v1.vuejs.org/guide/installation.html#CSP-compliant-build
npm install vue@csp --save
"dependencies": {
"vue": "1.0.26-csp"
}
新しいバージョン(Vue.js v2) https://vuejs.org/v2/guide/installation.html#CSP-environments
Google Chrome Appsなどの一部の環境では、式を評価するための新しいFunction()の使用を禁止するコンテンツセキュリティポリシー(CSP)を適用します。スタンドアロンビルドは、この機能に依存してテンプレートをコンパイルし、これらの環境では使用できません。
ただし、解決策があります。 Webpack + vue-loaderまたはBrowserify + vueifyを使用したビルドシステムでVueを使用する場合、テンプレートはCSP環境で完全に機能するレンダリング関数にプリコンパイルされます。
この問題 のように、実装でnew Vue(...)
のようなコードを使用していたと思います。
デフォルトCSP in chrome extension、 evalおよび関連する機能は無効化されています 。
次のようなコードは機能しません。
alert(eval("foo.bar.baz"));
window.setTimeout("alert('hi')", 10);
window.setInterval("alert('hi')", 10);
new Function("return foo.bar.baz");
だから解決策は
Evaluated JavaScript の説明に従って、
Eval()および
setTimeout(String)
、setInterval(String)
、およびnew Function(String)
などの親類に対するポリシーは、ポリシーに_'unsafe-eval'
_を追加することで緩和できます。
_"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
_
ただし、ガイドには次のことも記載されています。
これを行わないことを強くお勧めします。これらの関数は 悪名高いXSS攻撃ベクトル です。
Vue.jsのインストールページ が言ったように、
Google Chrome Apps)などの一部の環境では、コンテンツセキュリティポリシー(CSP)が適用され、式の評価に
new Function()
の使用が許可されていません。 CSP準拠のビルド 代わりに。