自己部署的Umami 嵌入到iframe中无法打开的问题

小金额余额告警

在双十一的节点，想着既然优惠力度大，顺带续费和趁着2.1折的机会升级了一波服务器。

小金库余额--

想着既然服务器升级了，咱也不能让浪费的他的性能是吧！

于是乎就这个不爽很久的加载比较慢的https://umami.is/给换了，用自己部署的来提高一下自己的用户体验。

说换咱就换

博主的用的https://1panel.cn/，可以在应用商店中直接搜索 umami 然后一键安装。

部署完，分配好访问域名，做好SSL，一切就绪，访问登录 umami 后台，修改用户名密码，配置网站，设置共享链、配置 https://www.halo.run/ umami插件，一顿操作。

打开自己的博客网站，随便访问两个页面后进入到的umami后台一看。

嘿嘿嘿嘿，成了!

奈斯！果然不愧是我。

坑降、不明所以

就在我沾沾自喜上到自己博客的后台想看下插件的表现情况。

诶，你猜怎么着 xxx.cloud 拒绝连接 ，以我作为程序员的直觉，我立刻猜到肯定是嵌套 frame 的问题。

我打开F12控制台一看，诶嘿，果然是这样。

既然知道问题了，那咱就好办了。

打开gpt(科学上网警告)，打入关键词

nginx  because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' undefined"

开始搜索解决方案！

什么？你问我为什么搜索？

那还用问，肯定我不会啊，这玩意我知道问题所在，并不代表我会配置啊。

一顿操作之后。

我找到了这么个解决方案。

于是乎，我找到https://1panel.cn/ 的网站设置，点开我分配给 umami 的域名，点开配置文件一顿cv打法。

保存并重载。

完事，不愧是我。

再次访问，wtf? 为什么还是不行。

没办法，咱们得官方文档

走进官方文档，在我一顿查看后，在这个https://umami.is/docs/environment-variables找到了这么个说明。

如果看不懂的就右键翻译成中文，我也是这么看的。

知道了问题于是我们就该去配置了。

在我去容器位置点编辑后，加入这个变量后，重启容器。

再次访问，咦，怎么还是不行！！！！

再回去翻文档时候看到了这么一个大标题

原来这个变量是构建的时候用的，镜像中没有。

那岂不是只能自己去构建这个镜像了，我这么懒的人怎么可能，想太多。

换个思路

知道原因之后，我们可以得出以下两个解决方案：

按照官方的方案，自己编译一个Docker镜像，在编译时指定 ALLOWED_FRAME_URLS
暴力一点咱们直接把反向代理的响应头直接改掉

有的小伙伴可能就要说了，前面不是改了吗？不生效。

诶嘿，在我的不懈努力和搜索下，我找到了这么一个属性

proxy_hide_header

proxy_hide_header 是 Nginx 和 OpenResty 中的指令，用于在代理请求时隐藏或移除从上游服务器（被代理的服务器）返回的指定 HTTP 响应头。此指令通常用于隐藏某些头信息，防止它们被发送到客户端。

作用

proxy_hide_header 指令的作用是从代理响应中移除指定的头信息，以避免将这些信息暴露给客户端。比如，您可能希望移除上游服务器返回的 Server 头或其他敏感信息。

使用场景

隐藏服务器信息：例如，隐藏上游服务器返回的 Server 头，以避免暴露上游服务器的类型和版本。
防止头信息冲突：在有多个代理层或头信息冲突时，使用 proxy_hide_header 避免冗余或冲突的头信息传递给客户端。
增强安全性：移除可能暴露服务器架构、版本或其他敏感信息的头。

只需要将这个属性添加到我们的反向代理配置文件中即可

server {
    listen 80 ; 
    listen 443 ssl http2 ; 
    server_name xxx.xxx.xxx; 
    index index.php index.html index.htm default.php default.htm default.html; 
    proxy_set_header Host $host; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header X-Forwarded-Host $server_name; 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_http_version 1.1; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection $http_connection; 
    access_log /www/sites/xxx.xxx.xxx/log/access.log main; 
    error_log /www/sites/xxx.xxx.xxx/log/error.log; 
    add_header Content-Security-Policy "frame-ancestors 'self' www.xxx.xxx www.xxx.xxx" always;
    proxy_hide_header 'Content-Security-Policy';
    location ^~ /.well-known/acme-challenge {
        content_by_lua_block {
            ngx.header["Content-Security-Policy"] = "frame-ancestors 'self' http://xxx.xxx http://www.xxx.xxx";
        }
        allow all; 
        root /usr/share/nginx/html; 
    }
    include /www/sites/xxx.xxx.xxx/proxy/*.conf; 
    }
}

请不要直接赋值黏贴，域名部分我是直接xxx替换了，直接复制过去是用不了的

添加完成后记得点 保存并重载 的按钮。

再次打开我们的后台插件测试。

完美解决！

于是，你又看到我水了一片文章