升级https后解决http资源文件访问被阻止
最近维护升级一个网站的时候发现以 https 访问网站时页面内容显示异常，打开浏览器控制台可以发现大量的报错信息。
Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure stylesheet 'http://example.com/static/css/example.css'. This request has been blocked; the content must be served over HTTPS.
什么是 Mixed Content
混合内容（Mixed Content）在以下情况下出现：初始 HTML 内容通过安全的 HTTPS 连接加载，但其他资源（例如，图像、视频、样式表、脚本）则通过不安全的 HTTP 连接加载。之所以称为混合内容，是因为同时加载了 HTTP 和 HTTPS 内容以显示同一个页面，且通过 HTTPS 加载的初始请求是安全的。现代浏览器会针对此类型的内容显示警告，以向用户表明此页面包含不安全的资源。
使用不安全的 HTTP 协议请求子资源会降低整个页面的安全性，因为这些请求容易受到中间人攻击，攻击者窃听网络连接，查看或修改双方的通信。通过使用这些资源，攻击者通常可以完全控制页面，而不只是泄露的资源。
尽管许多浏览器向用户报告混合内容警告，但出现警告时为时已晚：不安全的请求已被执行，且页面的安全性被破坏。遗憾的是，这种情况在网络中很普遍，正因如此，浏览器不能简单地阻止所有混合请求，否则将会限制许多网站的功能。
解决方法
方法一：在源代码中查找混合内容
您可以在源代码中直接搜索混合内容。在源代码中搜索 http 开头的资源链接文件，将其替换为 https 。
方法二：使用 “upgrade-insecure-requests” CSP 指令强制浏览器以https方式访问http资源
此方法有两种方法添加CSP指令：
1、通过在网页 head 中添加标签
<html> <head> ... <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> </head> ...
2、通过 在请求响应中插入响应头信息： “Content-Security-Policy: upgrade-insecure-requests”
如 Nginx 配置中配置如下修改即可：
server {
...
location / {
...
add_header Content-Security-Policy upgrade-insecure-requests;
...
}
}通过以上修改即可解决混合内容被浏览器阻止而导致页面显示异常的问题。
原文链接地址：https://blog.exsvc.cn/article/https-mixed-content-blocked.html
转载请注明：转载自 易科博客 ，谢谢！