日常Web运维

解决WordPress配置X-Frame-Options后预览主题不显示的问题

为了防止自己的网站被别的网站嵌套,可以在响应头中添加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状态,从而浏览器拒绝加载帧框。

解决方法

  1. 使用WordPress插件:
    在插件库中搜索X-Frame-Options,有许多选择可以实现在PHP部分自动输出该响应头,安装后在nginx上删除响应的设置即可。
    严肃的问题:如果使用了静态化处理页面的插件,如WP-Super-Cache,由于PHP不再运行,该响应头会无法输出。
  2. 使用ALLOW-FROM方法设置X-Frame-Options:
    将对应代码改为

     add_header X-Frame-Options "ALLOW-FROM http://你的网站";

    严肃的问题:上文提到了,这个方法仍有少数浏览器不支持,如此设置会削弱安全性。

  3. 修改nginx配置:
    经过查阅,nginx可以配置以下命令忽略PHP中的相应响应头。

    fastcgi_hide_header X-Frame-Options;#(FastCGI模式)
    proxy_hide_header X-Frame-Options;#(反向代理模式)

    随后,可以正常设置本文开头的响应头。

发表评论

电子邮件地址不会被公开。 必填项已用*标注