如何在 Vue.js 应用程序中设置内容安全策略标头

Question

I'm trying to make my Vue app secure, by eliminating clickjacking.

I'm not sure how to set the headers of the Vue server, the methods the X Frame or Frame Ancestor directives in a meta tag like:

   <meta http-equiv="Content-Security-Policy" content="X-Frame-Options: DENY:"
    />

However, the links below say that this is unsupported https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors

I realise that for API requests, these headers should be set in the backend, however, this is to load the home page of the app (no api requests made).

How can I set these headers in my Vue.js server

Answer 1

The homepage of the app is still loaded over HTTP.

The browser makes an HTTP request to get an HTML document. That HTML document includes <script> elements which cause the browser to fetch some JS. The browser runs some JS and uses it to modify the HTML document in the Vue app.

You should configure the X-Frame-Options and Content-Security-Policy to be served in the HTTP response headers for the response that delivers that initial HTML document which bootstraps the application.

---

The not-so-good approach is to set a CSP using a <meta> tag (in that same HTML document). You can't set X-Frame-Options that way.