Vue.js在Chrome扩展中的应用

Question

Vue.js在Chrome扩展中的应用

您好！我正在尝试使用Vue.js制作Chrome扩展，但当我编写以下代码时：

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

Chrome删除了代码中的v-model部分，并对其进行了修改

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

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

- Camen

---

你确定是Chrome而不是vue.js吗？ - Yauheni Prakopchyk

要在不使用构建/打包/转换工具的情况下使用Vue和Vuetify，请参考以下链接： https://stackoverflow.com/q/77557516/8583692 - undefined

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 环境中完美工作。

- davland7

---

谢谢！我多次阅读了指南，但不知何故错过了那一段... - Camen

非常感谢您指出这一点，要是没有您的帮助我可能需要很长时间才能解决。请享受一些奖励。 - Etheryte

Answer 2

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

请注意，在 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 的描述，

以下是翻译内容：

不建议使用 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应用程序，实施内容安全策略（CSP），不允许使用new Function()来评估表达式。在这种情况下，您可以使用CSP-compliant build版本。

- Haibara Ai