探寻浏览器 Mixed Content iframe 无法加载的原因

现象

浏览器 iframe 无法加载，Console 报错：
Mixed Content: The page at ‘https://xxxx’ was loaded over HTTPS, but requested an insecure frame ‘http://xxxx/’. This request has been blocked; the content must be served over HTTPS.

Network 也有报错（一个请求被取消）：

分析 1

一看 Console 的报错信息，说 iframe 使用了 http 协议加载了内容，于是先检查对应的 iframe:

嗯？？？

iframe 的 src 是用的 https 啊，只是 iframe 里加载的 html 的 head 和 body 都为空！怎么回事？？

分析 2

再看 Network 页的报错信息，是一个被取消的请求，而这个请求的地址正好是 iframe 的 src, 点开仔细看：

这个请求虽然被 Canceled 了，但是它还是有一些 Response Header，看来并没有完全被取消，服务器还是响应了一些头信息的，而其中有一条 location 头，是 http 协议的！！

有猫腻

难道导致此问题的根源就是它？难道 frame 的 src 被重定向成了 http 的?? 单独请求 iframe 的 src 试试：

诶，可以请求的通，果然被重定向了，而且是两次！

第一次重定向：

果然被重定向成 http 的地址了

第二次重定向：

这回又重定成了 https，与 iframe 的 src 相比只是最后多了一个 斜杠

第三次请求：

这次请求终于不是重定向了，只是请求地址相比最开始多了一个 斜杠而已。

这不是兜了一个圈子吗？

如果刚开始的 iframe 的 src 就有这个 斜杠，是不是就不需要重定向了？修改代码尝试！

果然，添加这个 斜杠后，页面加载正常，一切错误消失！！

至此，问题虽然解决，但未改代码之前服务器为何要做这个重定向呢？

于是，恢复原来代码，让错误嚣张如故。

分析后端

如图，浏览器 使用 https 访问阿里云的 ALB 服务，ALB 使用 http 访问 nginx 服务，而这个 h5 页面则放在 nginx 里作为静态资源。

重定向到 http 的操作在 ALB 中并没有相关的配置，那应该是 nginx 发起的重定向。而 Nginx 并没有配置 SSL 证书，作为一个 HTTP 服务器，重定向到 http 协议的地址确实也无可厚非。

怎么办呢？

首先想到的是在 ALB 中否能拦截这个重定向响应，把 http 修改为 https 然后在响应给浏览器（类似 nginx 的 proxy_redirect 功能），这问题不就 OK 了吗？

可惜当前的 ALB 并不支持这种操作（据 ALB 的产品说，响应方向的转发规则近期会上线）。。于是，只能从 nginx 下手，检查它的配置：

nginx 的配置很简单，确实包含一个重定向的配置（rewrite）但是好像对此并没有关系。

为了验证，临时注释掉该 rewrite 的配置，尝试：

依然有这个重定向。那这是会什么原因呢？

经过一番百度，深入了解 nginx ，原来：

Nginx在访问带目录的 URL 时，如果末尾不加斜杠（“/”），Nginx默认会自动加上，其实是返回了一个301跳转，在新的 Location 中加了斜杠。

也就是说这个重定向是 nginx 默认机制，只要你访问的是 静态自愿的某个目录且不加 斜杠，它就给你重定向一下并加上斜杠！！

也就是说如果请求的 URL 不变，那么这个 重定向无可避免了，又经过一般探寻，原来 nginx 还有一个配置项 absolute_redirect ：

加上这个配置后，nginx 发起重定向时，只指定 uri, 不指明 协议（scheme）：

问题终于再次解决！

现象解释

控制台报错：Mixed Content: The page …

因为原本 iframe 的 src 指向的是 https 的地址，结果刚一发起请求，就让它重定向到 一个 http 的地址，浏览器不同意。

Network 请求显示 canceled

因为浏览器不同意 iframe 重定向到一个 http 地址，所以中途取消，因为前一半请求已经完成，所已在被取消的请求详请里还可以看到一些 Response Header ，如 location 头信息，只是下一步的重定向操作不再继续。

单独请求 iframe 的 src, 为什么重定向两次

因为在 ALB 里配置了 http 重定向到 https 的规则。

---

愿世上再无难解的问题，愿此生再不见丑陋的代码。