CSP - problem with eval


#1

I am trying to set CSP headers in my Vue 2.0 app and I have a problem with ‘eval’ policy.

When I use ‘unsafe-eval’ - it’s all working fine. But when I get rid of it (I know I should) my scripts stop working. There are no errors in console. But if I put eval() somewhere in my code (intentionally, for testing) I get error in console.

I searched whole project (including libs) for “eval” and “new Function” but I can’t find any usage of them.

So maybe there are some other functions which meet ‘eval’ rules? I am using Vue, but my code is built with Browserify + vueify.


#2

See our “install” chapter’s section about this:


#3

“On the other hand, the runtime-only build is fully CSP-compliant. When using the runtime-only build with Webpack + vue-loader or Browserify + vueify, your templates will be precompiled into render functions which work perfectly in CSP environments.”

My code is build with the following command, so it should be working, right?

cross-env NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o dist/build.css ] -e src/main.js  | uglifyjs -c warnings=false -m > dist/build.js

#4

That depends which builds f Vue you are importing into your project : the full build (no) or the runtime-only build (yes).

The guide I linked should provide you with info about how to select the correct version during build with an alias.


#5

If you mean using this:

 "browser": {
    "vue": "vue/dist/vue.runtime.min.js"
  },

then I tried it with no effect