网页中的 Mixed Content 问题解决

在 HTTPS 页面里，通过 a 链接下载 HTTP 的资源，会被浏览器 block 掉，如下图：

图中红色报错信息告诉我们资源加载失败了，它们不会被浏览器加载并处理。

当通过安全的 HTTPS 链接加载初始的 HTML，但通过不安全的 HTTP 链接加载其它资源 (例如 图像、视频、样式表、脚本) 时，就会发生 Mixed Content (混合内容)。之所以称之为 混合内容，是因为在一个网页中同时使用了 HTTP 和 HTTPS ，而最初的请求方式为 HTTPS 。

使用不安全的 HTTP 协议请求资源会容易受到中间人攻击，现代浏览器可能会阻止此类内容，或者显示关于此类内容的警告，提醒用户此页面包含不安全的内容。阻止混合内容的浏览器可能会首先尝试将该内容的连接从HTTP “升级”到HTTPS。

解决方法

在页面 head 标签添加 CSP

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
复制代码

它会自动将http的不安全请求升级为https。需要注意的是，应该在需要的网页上添加上面的语句，在其它不需要的网页中不需要添加，否则可能会导致页面的资源加载出现错误。

有时候即使在需要的网页上添加上面的语句，该网页上其它的资源加载也会受到影响。为了减少影响，可以使用下面的方法。

将 HTTP 替换为 HTTPS

const downloadFile = (url, fileName) => {
   const newUrl = url.includes('https') ? url : url.replace('http','https')
   window.open(newUrl,'_self');
}
复制代码

使用该方法从服务器下载资源时，则需要服务器支持HTTPS协议。

CSP设置upgrade-insecure-requests

在服务器的响应头中设置 CSP 为 upgrade-insecure-requests ：

// header
Content-Security-Policy: upgrade-insecure-requests;
复制代码

相关资源：

CSP: upgrade-insecure-requests

Mixed Content (web.dev)

Mixed Content (w3c)