The X-Frame-Options HTTP 響應頭是用來給瀏覽器 指示允許一個頁面 可否在 <frame>, <iframe>, <embed> 或者 <object> 中展現的標記。
站點可以通過確保網站沒有被嵌入到別人的站點里面,從而避免 clickjacking 攻擊。
The added security is only provided if the user accessing the document is using a browser supporting X-Frame-Options.
Content-Security-Policy HTTP 頭中的 frame-ancestors 指令會替代這個非標准的 header。
CSP 的 frame-ancestors 會在 Gecko 4.0 中支持,但是並不會被所有瀏覽器支持。
然而 X-Frame-Options 是個已廣泛支持的非官方標准,可以和 CSP 結合使用。
X-Frame-Options 有三個可能的值:
# 表示該頁面不允許在 frame 中展示,即便是在相同域名的頁面中嵌套也不允許。
X-Frame-Options: deny
# 表示該頁面可以在相同域名頁面的 frame 中展示。
X-Frame-Options: sameorigin
# 表示該頁面可以在指定來源的 frame 中展示。
X-Frame-Options: allow-from https://example.com/
注意:
設置 meta 標簽是無效的!
例如 <meta http-equiv="X-Frame-Options" content="deny"> 沒有任何效果。
不要這樣用!只有當像下面示例那樣設置 HTTP 頭 X-Frame-Options 才會生效。
Apache:
Header set X-Frame-Options "sameorigin"
Nginx:
add_header X-Frame-Options sameorigin always;
HAProxy:
http-response set-header X-Frame-Options sameorigin
Express:
const helmet = require('helmet');
const app = express();
app.use(helmet.frameguard({ action: "sameorigin" })); // app.use(helmet()) 使用所有安全策略
在 Firefox 嘗試加載 frame 的內容時,如果 X-Frame-Options 響應頭設置為禁止訪問了,那么 Firefox 會用 about:blank 展現到 frame 中。
也許從某種方面來講的話,展示為錯誤消息會更好一點。
Refer:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Frame-Options
Refer:https://www.npmjs.com/package/helmet
