Vue.js in Chrome extension

Question

Vue.js in Chrome extension

Hi! I'm trying to make a Chrome extension using Vue.js but when I write

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

Chrome removes the v-model-part of the code and makes it

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

Is there a way to prevent this?

Answer 1

Have you csp version (Vue.js v1)

CSP-compliant build

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 v1) http://v1.vuejs.org/guide/installation.html#CSP-compliant-build

npm install vue@csp --save

"dependencies": {
  "vue": "1.0.26-csp"
}

New version (Vue.js v2) https://vuejs.org/v2/guide/installation.html#CSP-environments

Some environments, such as Google Chrome Apps, enforce Content Security Policy (CSP), which prohibits the use of new Function() for evaluating expressions. The standalone build depends on this feature to compile templates, so is unusable in these environments.

There is a solution however. When using Vue in a build system with Webpack + vue-loader or Browserify + vueify, your templates will be precompiled into render functions which work perfectly in CSP environments.

Answer 2

I guess you were using code like new Vue(...) in your implementation, as this issue said.

Please be aware 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");

So the solution would be

1. Relaxing the default policy.

As per the description of 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'"

However, the guide also mentions that,

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

2. Using CSP-compliant build.(Recommended)

As the installation page of Vue.js said,

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.