Chrome 擴展中的 Vue.js

Question

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">

有沒有辦法防止這種情況？

Answer 1

你有csp版本（Vue.js v1）

符合 CSP 的構建

某些環境（例如 Google Chrome 應用程序）強制執行內容安全策略 (CSP)，並且不允許使用 new 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://v2.vuejs.org/v2/guide/installation.html#CSP-environments

某些環境（例如 Google Chrome 應用程序）強制執行內容安全策略 (CSP)，該策略禁止使用 new Function() 來評估表達式。 獨立構建依賴此功能來編譯模板，因此在這些環境中不可用。

不過有一個解決辦法。 在帶有 Webpack + vue-loader 或 Browserify + vueify 的構建系統中使用 Vue 時，您的模板將被預編譯為在 CSP 環境中完美運行的渲染函數。

Answer 2

正如這個問題所說，我猜你在你的實現中使用了像new Vue(...)這樣的代碼。

請注意，默認情況下，chrome 擴展中的 CSP 、 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的描述，

可以通過在您的策略中添加'unsafe-eval'來放寬針對 eval() 及其親屬（如setTimeout(String) 、 setInterval(String)和new Function(String)的策略：

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

但是，該指南還提到，

我們強烈建議不要這樣做。 這些函數是臭名昭著的 XSS 攻擊向量。

2. 使用符合 CSP 的構建。（推薦）

正如Vue.js 的安裝頁面所說，

某些環境（例如 Google Chrome 應用程序）強制執行內容安全策略 (CSP)，並且不允許使用new Function()來評估表達式。 在這些情況下，您可以改用符合CSP 的構建。