Vue.js 在 Chrome 分机中

Question

Vue.js Chrome 分机

嗨！我正在尝试使用 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-compliant 建造

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

(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 环境中完美运行的渲染函数。

Answer 2

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

请注意by default CSP in chrome extension, eval and related functions are disabled.

Code like the following does not work:

alert(eval("foo.bar.baz"));

window.setTimeout("alert('hi')", 10);

window.setInterval("alert('hi')", 10);

new Function("return foo.bar.baz");

所以解决方案是

1。放宽默认策略。

根据 Evaluated JavaScript、

的描述

The policy against eval() and its relatives like setTimeout(String), setInterval(String), and new Function(String) can be relaxed by adding 'unsafe-eval' to your policy:

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

然而，该指南还提到，

we strongly recommend against doing this. These functions are notorious XSS attack vectors.

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

正如installation page of Vue.js所说，

Some environments, such as Google Chrome Apps, enforces Content Security Policy (CSP) and does not allow the use of new Function() for evaluating expressions. In these cases you can use the CSP-compliant build instead.

Vue.js 在 Chrome 分机中

Vue.js in Chrome extension

javascript

google-chrome

google-chrome-extension

vue.js

Vue.js Chrome 分机

1。放宽默认策略。

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