Chrome 扩展中的 Vue.js答案

【问题标题】：Vue.js in Chrome extensionChrome 扩展中的 Vue.js
【发布时间】：2016-04-09 12:04:33
【问题描述】：

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

有没有办法防止这种情况发生？

【问题讨论】：

你确定是 Chrome 而不是 vue.js？

标签： javascript google-chrome google-chrome-extension vue.js

【解决方案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://vuejs.org/v2/guide/installation.html#CSP-environments

某些环境（例如 Google Chrome 应用程序）会强制执行内容安全政策 (CSP)，该政策禁止使用 new Function() 来评估表达式。独立构建依赖此功能来编译模板，因此在这些环境中不可用。

但是有一个解决方案。在带有 Webpack + vue-loader 或 Browserify + vueify 的构建系统中使用 Vue 时，您的模板将被预编译为渲染函数，在 CSP 环境中完美运行。

【讨论】：

谢谢！我多次阅读指南，但不知何故错过了那一段......
非常感谢您指出这一点，我需要很长时间才能弄清楚这一点。享受一些赏金。

【解决方案2】：

我猜你在实现中使用了类似new Vue(...) 的代码，正如this issue 所说的那样。

请注意 chrome 扩展中的 by default CSP eval and related functions are disabled。

以下代码不起作用：

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

不过，指南中也提到，

我们强烈建议不要这样做。这些函数是notorious XSS attack vectors。

2。使用符合 CSP 的构建。（推荐）

正如installation page of Vue.js 所说，

某些环境（例如 Google Chrome 应用程序）强制执行内容安全策略 (CSP)，并且不允许使用 new Function() 来评估表达式。在这些情况下，您可以改用CSP-compliant build。

【讨论】：