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

Question

我正在尝试通过消除点击劫持来确保我的 Vue 应用程序的安全。

我不确定如何设置 Vue 服务器的标头、元标记中的 X Frame 或 Frame Ancestor 指令的方法，例如：

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

但是，下面的链接说这是不受支持的 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

我意识到对于API请求，这些标头应该在后端设置，但是，这是加载应用程序的主页（不发出api请求）。

如何在我的 Vue.js 服务器中设置这些标头

Answer 1

应用的主页仍然通过 HTTP 加载。

浏览器发出 HTTP 请求以获取 HTML 文档。该 HTML 文档包含 <script> 元素，这些元素会导致浏览器获取一些 JS。浏览器运行一些 JS 并使用它来修改 Vue 应用程序中的 HTML 文档。

您应该将 X-Frame-Options 和 Content-Security-Policy 配置为在 HTTP 响应标头中提供，以提供用于引导应用程序的初始 HTML 文档的响应。

---

不太好的方法是使用<meta> 标记（在同一个HTML 文档中）设置CSP。你不能那样设置X-Frame-Options。