Vue-cli: modern mode doesn't work with CSP

[pecliu]

Version

3.0.0-rc.9

Node and OS info

Node 10.6.0 / npm 6.2.0 / Windows 7

Steps to reproduce

After add code :

    <meta http-equiv="Content-Security-Policy" content="object-src 'self'; font-src 'self' https: data:; script-src 'self' ">

to public/index.html.
Then run vue-cli-service build --modern in cmd.

What is expected?

No browser CSP error

What is actually happening?

The dist/index.html has inline script, which cause browsers CSP error.

---

Maybe can offer a parameter to set nonce-... to modern mode's inline script.

[sodatea]

Duplicate of https://github.com/vuejs/vue-cli/issues/1074

[pecliu]

2001 @sodatea please reopen this issue.

This is not a duplicate of #1074.
After adding yyx990803's config to vue.config.js, the inline script is still exist.

<script>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>

This issue has nothing to do with manifest.

[yyx990803]

Unfortunately, the inline script is required to avoid the legacy bundles being loaded in Safari 10. Do you have control over your CSP policy? You can allow its execution by adding an allowed hash with:

Content-Security-Policy: script-src 'self' 'sha256-4RS22DYeB7U14dra4KcQYxmwt5HkOInieXK1NUMBmQI='

If we make it a <script src>, it would result in an extra HTTP request for all browsers only to deal with an edge case in Safari 10, so I think it's best to explicit allow it in your CSP.

Also, it doesn't make sense to set a static nonce - by definition the nonce must be different for every request.