報錯信息:Refused to display 'http://xxxxxxx.xyz/' in a frame because it set 'X-Frame-Options' to 'deny'.
最近開發項目中遇到了客戶iframe嵌套我們項目,遇到了域名提示...拒絕了您的訪問。然后百度了一下
X-Frame-Options: HTTP 響應頭是用來給瀏覽器 指示允許一個頁面 可否在<frame>
, <iframe>
, <embed>
或者 <object>
中展現的標記。站點可以通過確保網站沒有被嵌入到別人的站點里面,從而避免 點擊劫持 攻擊。
X-Frame-Options 有三個屬性值:
- deny
表示該頁面不允許在frame中展示,即便是在相同域名的頁面中嵌套也不允許。 - sameorigin
表示該頁面可以在相同域名頁面的frame中展示。 - allow-from uri
表示該頁面可以在指定來源的frame中展示。
nginx配置
需要添加到 ‘http’, ‘server’ 或者 ‘location’ 的配置項中,個人來講喜歡配置在‘server’ 中
正常情況下都是使用SAMEORIGIN參數,允許同域嵌套
add_header X-Frame-Options SAMEORIGIN;
允許單個域名iframe嵌套
add_header X-Frame-Options ALLOW-FROM http://whsir.com/;
允許多個域名iframe嵌套,注意這里是用逗號分隔
add_header X-Frame-Options "ALLOW-FROM http://whsir.com/,https://cacti.org.cn/";
nginx示例
server {
listen 80;
server_name *.xxxxxxx.xyz;
location /public/ {
autoindex on;
alias /usr/local/nginx/html/web/myblog/node/public/;
}
location /webgate/ {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:1314/api/;
}
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# add_header X-Frame-Options deny;
# 此處設置X-Frame-Options配置
add_header X-Frame-Options "ALLOW-FROM https://xxx2.xxxxxxx.com";
if ($host ~ ^(xxxx)\.xxxxxxx\.xyz$) {
proxy_pass http://0.0.0.0:8083;
}
if ($host ~ ^(xxxx)\.xxxxxxx\.xyz$) {
proxy_pass http://0.0.0.0:8081;
}
if ($host ~ ^(xxxx)\.xxxxxxx\.xyz$) {
proxy_pass http://0.0.0.0:8082;
}
proxy_pass http://127.0.0.1:1314/;
}
}
如何確定已經修改生效: