View more context

 

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

kinglozzer

In today’s edition of “Why I hate frontend”: https://jsbin.com/zecodopaqo/edit?html,css,output

Show 1 attachment(s)
jsbin.com  
JS Bin

A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

Hide attachment content