最近开发项目中遇到了iframe嵌套页面,遇到了域名提示…拒绝了您的访问。
报错:Refused to display ‘http://xxxxxxx/’ in a frame because it set ‘X-Frame-Options’ to ‘deny’.
X-Frame-Options可用于指示是否应该允许浏览器呈现在一个页面
X-Frame-Options: HTTP 响应头是用来给浏览器 指示允许一个页面 可否在
<frame>
,<iframe>
,<embed>
或者<object>
中展现的标记。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-Frame-Options" content="SAMEORIGIN / DENY "> <title> X-Frame-Options </title> </head>
站点可以通过确保网站没有被嵌入到别人的站点里面,从而避免 点击劫持 攻击。
X-Frame-Options 有三个属性值:
- deny
浏览器拒绝当前页面加载任何Frame页面。即该页面不允许在frame中展示,即便是在相同域名的页面中嵌套也不允许。 - sameorigin
frame页面的地址只能为同源域名下的页面。即表示该页面可以在相同域名页面的frame中展示。 - allow-from uri
为允许frame加载的页面地址。即表示该页面可以在指定来源的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为所有网页发送X-Frame-Options.
server { listen 80; server_name *.xxxxxxx; 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.xxxx.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/; } }
- 查看生效