如何在 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 。