为了防止自己的网站被别的网站嵌套,可以在响应头中添加X-Frame-Options字段处理网站在被框架时的行为。其中nginx中的实现很简单:
add_header X-Frame-Options "SAMEORIGIN";
加入了这个Header后,在较新版本的WordPress上,使用主题预览相关内容(包括AMP主题自定义)时,Safari等部分浏览器无法正常显示预览帧框。其中,控制台报告有以下的错误:
Multiple ‘X-Frame-Options’ headers with conflicting values (‘SAMEORIGIN, ALLOW-FROM …’) …… Falling back to ‘DENY’.
明显,可以看出在预览页面的产生中,PHP也发出了一个X-Frame-Options字段的响应头。目前,除了Chrome和Opera,一般浏览器已经支持ALLOW-FROM
的使用方法。但是为了保险起见,回落到了DENY
状态,从而浏览器拒绝加载帧框。
解决方法
- 使用WordPress插件:
在插件库中搜索X-Frame-Options,有许多选择可以实现在PHP部分自动输出该响应头,安装后在nginx上删除响应的设置即可。
严肃的问题:如果使用了静态化处理页面的插件,如WP-Super-Cache,由于PHP不再运行,该响应头会无法输出。 - 使用
ALLOW-FROM
方法设置X-Frame-Options:
将对应代码改为add_header X-Frame-Options "ALLOW-FROM http://你的网站";
严肃的问题:上文提到了,这个方法仍有少数浏览器不支持,如此设置会削弱安全性。
- 修改nginx配置:
经过查阅,nginx可以配置以下命令忽略PHP中的相应响应头。fastcgi_hide_header X-Frame-Options;#(FastCGI模式) proxy_hide_header X-Frame-Options;#(反向代理模式)
随后,可以正常设置本文开头的响应头。