Chrome扩展程序中的Vue.js

Question

Chrome扩展程序中的Vue.js

嗨!我正在尝试使用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">

有办法防止这种情况吗？

Answer 1

你有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)会强制执行内容安全策略(CSP),该策略禁止使用新的Function()来评估表达式.独立构建依赖于此功能来编译模板,因此在这些环境中无法使用.

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

Answer 2

我猜你正在使用像new Vue(...)你的实现中的代码,正如这个问题所说的那样.

请注意默认情况下,CSP在chrome扩展,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的构建.