Chrome对页面HTTP请求自动升级为HTTPS请求

背景

当我们访问一个网站，如果网页出现 HTTPS 和 HTTP 的混合请求，则会触发 Chrome 浏览器的警告导致无法加载资源。例如本站升级为 HTTPS 访问，但是资源都通过 HTTP 访问云服务商的对象存储时，控制台就会有如下错误：

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure element '<URL>'.
This request was automatically upgraded to HTTPS, For more information see <URL>....

看提示知道，该页面是由 HTTPS 加载，但是页面里有的 url 是不安全的 HTTP 请求，Chrome 自动将该请求升级为 HTTPS 的方式请求。而我的对象存储还没升级成 HTTPS 访问所以获取资源失败

解决方案

更新所有不安全的资源链接

相当于将所有 http 请求修改为 https 请求，需要第三方服务支持

使用相对协议链接

如果资源的主机同时支持 HTTP 和 HTTPS，可以使用相对协议链接，这样资源会使用当前页面的协议。如果资源存放在相同页面主机，且主机同时支持 HTTP 和 HTTPS，可以考虑下面的方式

示例：

<!-- 使用相对协议 -->
<img src="//example.com/image.jpg" />

修改服务器配置

可以在服务器配置中添加重定向规则，将所有 HTTP 请求重定向到 HTTPS。相当于后台的 nginx 进行反向代理，将所有 HTTPS 请求反向代理到 HTTPS 端口，前提是你的资源文件跟页面在一个服务器

使用 Content Security Policy (CSP)

通过 Content Security Policy 头部来限制页面加载的资源，只允许通过 HTTPS 加载内容。这种方式等同于强制所有请求走 https，如果像本站的情况，因为对象存储暂时不支持 https 所以也不能解决问题

示例：

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self' https:;"
/>

总结

一句话总结：页面的请求能用 HTTPS 就用 HTTPS, 浏览器不推荐混用的方式

同时也给我们一个提示，当前端代码里调用其他第三方服务的时候，确保所有的请求都是同一种 HTTP 协议类型，虽然不是所有的浏览器都会对禁用这种混合请求方式（例如 Safari）如果第三方不能提供 HTTPS 的调用则尽量不用该服务