Content-Security-Policy blocks Vue.js

Question

I am serving a HTML page in my node.js server with express.public() function.

and i added this into my html page:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

And Chrome gaves me a Content-Security-Policy to me.

I used this middlewares in my Node index.js

app.use(morgan('tiny'));
app.use(helmet());
app.use(cors());
app.use(express.json());
app.use(express.static("./public"));

My application headers:

Content-Security-Policy: default-src 'self';base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests

How can i add this script without any SecurityPolicy

SOLVED

I remove "Helmet" from my project. Helmet is blocking the all cdn and scripts other then absolute domain.

Answer 1

Content Security Policy is set in the html file being served or by the software serving the html (eg Nginx, Apache).

At the moment you have: default-src 'self', this means you are telling the browser that it is only able to make requests to its own domain.

You need to add https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js to this list of domains it can access.

That would be something like:

Content-Security-Policy: default-src 'self';script-src 'self' https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js; base-uri 'self';block-all-mixed-content;font-src 'self' https: data:;frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests

So default-src: self sets the default to restrict requests to only your own domain.

script-src 'self' https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js overrides this and says specifically for scripts restricts request to only your domain and that url.

This has lots of details and examples: https://content-security-policy.com

Answer 2

In addition to what silent-tiger said, I think you should first find out which middleware is responsible for adding this content policy. Do this by disabling all middleware (except express static) and then add the other middlewares one by one until you see the Content Secutity Policy headers again.

If you found which middleware is responsible, then you know which middleware you should configure.