前言

上一篇文章发现了因为宝塔配置反向代理原因导致Nginx配置不生效，解决之后，将网页使用 <iframe> 对个别网页展示时发现还是不可以

经过一番摸索还是回到了开始的办法添加 哈哈白折腾了一波

过程

A 网页是：https://jk.cc.cc，B 网页是：https://www.cc.cc

我们需要的是把A网页Nginx配置之后，在B网页可以显示A网页的内容，Nginx配置文件如下

    add_header X-Frame-Options "ALLOW-FROM https://www.cc.cc,https://*.github.io" always;

打开 B 网页F12控制台发现如下报错内容，

Refused to display 'https://jk.cc.cc/' in a frame because it set multiple 'X-Frame-Options' headers with conflicting values ('SAMEORIGIN, ALLOW-FROM https://www.cc.cc'). Falling back to 'deny'.

回到 A 网页查看响应标头发现果然是有两个 X-Frame-Options 的内容

然后我记得我没有配置下面的配置 SAMEORIGIN，是怎么来的呢

    add_header X-Frame-Options "SAMEORIGIN" always;

回去把配置添加的内容删掉

    add_header X-Frame-Options "ALLOW-FROM https://www.cc.cc,https://*.github.io" always;

再去看看响应头，果然默认就有了，想到这两个页面都是反向代理过来的，可能是之前上游页面就本身携带的

但是这两个都是Docker项目，我也不太懂docker，但是现在有 ChatGPT 帮忙

了解了一些之后进入Docker容器内部使用命令查看，果然默认携带 x-frame-options: SAMEORIGIN 这个参数

root@5aff857237db:/app# curl -I http://127.0.0.1:3001
HTTP/1.1 302 Found
Location: /dashboard
Vary: Accept
Content-Type: text/plain; charset=utf-8
Content-Length: 32
Date: Sun, 22 Sep 2024 06:47:26 GMT
Connection: keep-alive
Keep-Alive: timeout=5
x-frame-options: SAMEORIGIN

[root@YTYvy8527a3 wwwroot]# curl -I http://127.0.0.1:2797
HTTP/1.1 200 OK
access-control-allow-credentials: true
access-control-allow-origin: *
access-control-expose-headers: 
cache-control: max-age=0, private, must-revalidate
content-length: 5724
content-type: text/html; charset=utf-8
date: Sun, 22 Sep 2024 06:48:19 GMT
referrer-policy: strict-origin-when-cross-origin
server: Cowboy
x-content-type-options: nosniff
x-download-options: noopen
x-frame-options: SAMEORIGIN
x-permitted-cross-domain-policies: none
x-request-id: F_d-Kd18tiaI_aEAAKai
x-robots-tag: noindex, nofollow

一时半会不知道如何解决，去查了两个项目GitHub的 issues 和Discussions

• 项目1_网站监控项目：https://github.com/louislam/uptime-kuma
• 项目2_网站记录项目：https://github.com/plausible/analytics/

先打开项目1的 issues 和Discussions寻找办法，然后找到了解决方法

• 项目1解决办法_网站监控项目：https://github.com/louislam/uptime-kuma/issues/4034#issuecomment-1814399495

根据查找到的内容修改后，果然响应头默认自带的 x-frame-options: SAMEORIGIN 就没有了

docker run -d \
  --restart=always \
  -p 2796:3001 \
  -v /path(自己写路径):/app/data \
  -e UPTIME_KUMA_DISABLE_FRAME_SAMEORIGIN=false \
  --name uptime-kuma \
  louislam/uptime-kuma:1

然后再去Nginx配置add_header，这样就剩下我们自己添加的了，不用担心两个冲突

    add_header X-Frame-Options "ALLOW-FROM https://www.cc.cc,https://*.github.io" always;

第一个是docker的，第二个是docker-compose，根据上面摸索的经验

我按照配置文件最后按照docker-compose的格式添加了之前的解决办法，但是没有生效

  plausible:
    image: ghcr.io/plausible/community-edition:v2.1.1
 ......
    environment:
      - UPTIME_KUMA_DISABLE_FRAME_SAMEORIGIN=false

然后我就前往该项目的 issues 和discussions 寻找解决办法，最终在discussions找到了解决方法，十分的简单粗暴....

• 项目2解决办法_网站记录项目：https://github.com/plausible/analytics/discussions/3367#discussioncomment-7102650

根据上述解决办法在Nginx配置添加这样的，两个就不会冲突了...

    add_header Content-Security-Policy "frame-ancestors 'self' https://*.github.io";

我原本开始在Nginx配置添加的就是上面的解决方案，后来阴差阳错的添加了后来更换的

导致原本可以不用折腾的方案变成了折腾老半天...不过这次也长记性了，然后就又把项目1的Nginx配置也换成了新的配置方法

这次圆满完成了终于......虽然重新配置的东西不多，但是需要调整好麻烦，这次可不能再把数据丢失了这次得备份了.