web-dev-qa-db-ja.com

Chrome拡張機能のVue.js

Chrome拡張機能のVue.js

こんにちは！ 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">

これを防ぐ方法はありますか？

javascriptgoogle-chromegoogle-chrome-extensionvue.js
31
Camen

あなたは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環境で完全に機能するレンダリング関数にプリコンパイルされます。

52
davland7

この問題 のように、実装で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");

だから解決策は

1.デフォルトポリシーを緩和します。

Evaluated JavaScript の説明に従って、

Eval（）およびsetTimeout(String)、setInterval(String)、およびnew Function(String)などの親類に対するポリシーは、ポリシーに_'unsafe-eval'_を追加することで緩和できます。

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

ただし、ガイドには次のことも記載されています。

これを行わないことを強くお勧めします。これらの関数は 悪名高いXSS攻撃ベクトル です。

2. CSP準拠のビルドを使用します（推奨）。

Vue.jsのインストールページ が言ったように、

Google Chrome Apps）などの一部の環境では、コンテンツセキュリティポリシー（CSP）が適用され、式の評価にnew Function()の使用が許可されていません。 CSP準拠のビルド 代わりに。

15
Haibara Ai