View more context

 

null

Generating a production build and hitting said issue 🙂

flamerohr

I haven't used vue directly with this, so I'm not sure if vue is responsible for its own evals (I've found this that could help https://stackoverflow.com/a/34621858 ) But webpack tries to polyfill node.js functions, which you could try turning off with node: false at the top-level of your webpack config

Show 1 attachment(s)
Stack Overflow  
Vue.js in Chrome extension

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 remo...

Hide attachment content
null

The crux of the problem is template compilation ... supposedly, there's some way to use vue-loader to compile the template in such a way that avoids the eval. I just can't find any documentation on that 🙂

flamerohr

Oh, nice find... Doesn't sound good, but hope you find a solution

👍 (1)
flamerohr

The link I provided offers a different build of vue which handles the template issue you mentioned

null

I found a solution @flamerohr, some simple changes to the entry point got it compliant with the CSP without unsafe-eval:

  1. const app = new Vue({
  2. el: '#app',
  3. components: {
  4. 'my-component': MyComponent
  5. },
  6. });
  1. const app = new Vue({
  2. el: '#app',
  3. components: {
  4. MyComponent
  5. },
  6. render: (h) => {
  7. return h(MyComponent)
  8. }
  9. });

You also need to change your webpack config from this:

  1. resolve: {
  2. alias: {
  3. 'vue$': 'vue/dist/vue.esm.js'
  4. }
  5. },

to this:

  1. resolve: {
  2. alias: {
  3. 'vue$': 'vue/dist/vue.runtime.js'
  4. }
  5. },
flamerohr

ah, that's quite small for a solution 🙂 that's good

null

It revealed a lot of other problems that made me reconsider the approach, but the app complied with the policy 😅

😂 (1)
null

As best as I understand, the esm library takes your templates and compiles them on the fly by doing... something to the effect of new Function("some executable crap"), which CSPs don't like. The runtime library accepts HTML first from h() , so it doesn't need eval at runtime

null

React has a similar problem, but I've no idea how to fix it with React