CSP issue when compiling

[the-webguys]

Version

2.5.16

Reproduction link

http://the-webguys.com/temp_files/js/app.js

Steps to reproduce

Compiling with npm run dev/production all the files are compiled into app.js - the output file is linked in the minimal reproduction

Using the following: <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self'; style-src 'self' *.fontawesome.com https://fonts.gstatic.com https://fonts.googleapis.com; font-src 'self' *.fontawesome.com https://fonts.gstatic.com; script-src 'self' 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa' *.pusher.com; connect-src *.pusher.com wss://ws-eu.pusher.com;" >

When used on a website, this will block the app.js file due to a 'new Function()' that comes directly from the vue file included when compiling.

Also tried this step, changing the vue.runtime.common.js in webpackConfig.resolve settings - this produces a blank page, but view source shows the raw html fine - no console errors in either FireFox or Chrome.

What is expected?

To compile the app.js without new Function()

What is actually happening?

app.js is producing new Function()

---

Please search the linked to minimal reproduction file for `new Function()' to see the culprit.

• My apologies for not linking anything better, i tried to replicate this using JS Bin with no joy as i don't think it allows the meta tags for CSP to work correctly. Also, i tried to set it up on a different domain, but got a CSRF token issue because it is not in Laravel :(

While using CSP meta tags, CSP flags the new Function() as a security risk. I have tried to use the vue.runtime.common.js version set in the webpackConfig.resolve settings from inside Laravel as guided to by the friendly people over at laravel-mix

[posva]

Please check: https://vuejs.org/v2/guide/installation.html#CSP-environments

[the-webguys]

Thank you for that link, but that apparently is not possible when using Laravel, any other suggestions?

[posva]

I'm pretty sure there was something like webpack for laravel, laravel-mix maybe?
Anyway, google, the forums or the discord are your friends 🙂

[the-webguys]

Thanks @posva, i tried Vue's discord and they said to try laravel-mix, their fix made it worse and the guys over on Laravel's Slack suggested to post it here.

The thing is, laravel uses it's own laravel-mix which already uses webpack and vue-loader, but these can't be upgraded, I guess i am going to try to work out how to make it not use those and use standalone compiler