Vue-cli: CSP script-src error

Created on 4 Apr 2018  路  2Comments  路  Source: vuejs/vue-cli

Version

3.0.0-beta.6

Steps to reproduce

  1. vue create testapp
  2. Setup as you want.
  3. Add productionSourceMap: false in vue.config.js.
  4. Build and push dist folder to your server.
  5. Add CSP header in your server config.
    >Content-Security-Policy-report-only "default-src 'none'; script-src 'self'; img-src 'self' data:; style-src 'self' ";
  6. Open the app in browser

What is expected?

according to the Vuejs doc there should be no problem

What is actually happening?

The page return an error

[Report Only] Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-aMW8RJ8d9m3crvBSAvcz8B/pG hlL4Sa2UuvzcOXfAE='), or a nonce ('nonce-...') is required to enable inline execution.


Do you have an idea to get around this?

Most helpful comment

@yyx990803 could you add this somewhere in the docs as it was really a pain to find an answer to this issue.

All 2 comments

This is because we are inlining the webpack manifest chunk by default to reduce HTTP requests.

You can use the following to disable the inlining:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugins
      .delete('split-manifest')
      .delete('inline-manifest')
  }
}

@yyx990803 could you add this somewhere in the docs as it was really a pain to find an answer to this issue.

Was this page helpful?
0 / 5 - 0 ratings