526互联

X-Frame-Options处理

发布时间 2023-06-14 13:01:49作者: WaterVon

'X-Frame-Options' to 'SameOrigin'

最近系统遇到一个视频播放同源的问题。通过Nginx清除Response的X-Frame-Options的限制解决。

过程

问题

工单系统的播放视频，是一个独立Iframe页面，单独打开工单系统，查看工单记录的视频，没有任何问题。但是工单系统的界面是嵌入到主系统中，打开工单记录页面没有问题，接着打开视频界面，就出现 'X-Frame-Options' to 'SameOrigin'的错误。
img

分析

错误提示很明确：X-Frame-Options，然后查看视频流请求的确有限制，所以只要把限制取消，是不是就可以了？

处理

由于工单和主程序，都是nginx代理，如下图所示。
img

所以把nginx 8099的工单代理处理X-Frame-Options就可以了。但是找了一圈，发现X-Frame-Options只有三种值，没有允许通用嵌入的选项，所以nginx该怎么配置呢？是不是不配置就默认通用呢？

尝试配置了一下'X-Frame-Options' to 'SameOrigin', 结果是工单页面无法嵌入主程序，推断只要不显示设置X-Frame-Options，Response不携带该配置，就允许嵌入任意非同源站点。

既然不设置就是通用不限制，那为什么工单的视频页面会有同源？

这里排查了很久，忽略了一个问题，X-Frame-Options限制是在哪里产生的？当时没有注意到，很明显是工单后端服务产生的。在nginx设置的X-Frame-Options对前端站点生效，但是工单服务代理不生效，解决的问题要么工单后端服务取消限制，要么nginx清除这个限制。如下图所示：

img

nginx反向代理，清除X-Frame-Options配置

    # 正向设置
    # add_header X-Frame-Options SAMEORIGIN always;
    # 反向清除
    # proxy_hide_header X-Frame-Options;

img