今天突然发现自己的iMydlYmanz.com两个站点都无法Frame内调用,特别是在iMydl里因为使用的是鸟哥的 Begin 主题,主题自带的下载模块里的“演示链接”竟然因此无法使用了。同样的Ymanz.com也不能使用百度统计的“页面点击图”,很明显这不科学。经过排查后发现是Nginx里X-Frame-Options头设置都懒省事儿设定为“DENY”造成的,于是就简单了解了一下这个X-Frame-Options头,特作笔记如下:

6f24162ec93644626f45dddea8a2998f.jpg

X-Frame-Options HTTP 响应头是用来给浏览器 指示允许一个页面 可否在 <frame>, <iframe>, <embed> 或者 <object> 中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面,从而避免 ClickJacking 攻击。

X-Frame-Options. Content-Security-Policy HTTP 头中的 frame-ancestors 指令会替代这个非标准的 header。CSP 的 frame-ancestors 会在 Gecko 4.0 中支持,但是并不会被所有浏览器支持。然而 X-Frame-Options 是个已广泛支持的非官方标准,可以和 CSP 结合使用。

36032399-812e200c-0d73-11e8-9981-d036a9378d6d.png

X-Frame-Options 有三个可能的值:

  • X-Frame-Options: deny
  • X-Frame-Options: sameorigin
  • X-Frame-Options "Allow-From domain.com"

换一句话说,如果设置为 deny,不光在别人的网站 frame 嵌入时会无法加载,在同域名页面中同样会无法加载。另一方面,如果设置为sameorigin,那么页面就可以在同域名页面的 frame 中嵌套。

  1. deny

表示该页面不允许在 frame 中展示,即便是在相同域名的页面中嵌套也不允许。

  1. sameorigin

表示该页面可以在相同域名页面的 frame 中展示。

  1. allow-from uri

表示该页面可以在指定来源的 frame 中展示。

配置 Nginx 发送 X-Frame-Options 响应头,把下面这行添加到 'http', 'server' 或者 'location' 的配置中:

add_header X-Frame-Options sameorigin;

或者:

add_header X-Frame-Options deny;

又或者像明月的配置一样,指定允许某个域名或者多个域名:

add_header X-Frame-Options "Allow-From domain1.com";
add_header X-Frame-Options "Allow-From domain2.com";
add_header X-Frame-Options "Allow-From domain3.com";

更多写法可参考如下:

  add_header X-Frame-Options "Allow-From domain.com"; 
  add_header X-Frame-Options "ALLOW-FROM domain.com"; 
  add_header X-Frame-Options "ALLOW-FROM: domain.com";
  add_header X-Frame-Options "Allow-From: domain.com";
  add_header X-Frame-Options ALLOW-FROM "domain.com";
  add_header X-Frame-Options ALLOW-FROM domain.com;

另外CSP写法可参考:

add_header Content-Security-Policy "frame-ancestors https://www.domain.com/";

最后修改:2021 年 07 月 20 日
如果觉得我的文章对你有用,请随意赞赏