场景描述

当 HTTPS 协议的网站中使用了 HTTP 协议的资源，Chrome 浏览器会发出警告：

# Warning：
Mixed Content: The page at 'https://aaa' was loaded over HTTPS, but requested an insecure image 'http://bbb'. This content should also be served over HTTPS
# 混合内容：'https://aaa' 页面已通过 HTTPS 加载，但是请求了不安全的图片 'http://bbb'。此内容应该也通过 HTTPS 提供

注意：这是警告，页面还是会正常展示，但是 Ajax 请求地址必须是 HTTPS 协议。

模拟场景：搭建 HTTPS 站点

通过 http-server 或 serve 可以很容易开启一个 HTTP 协议的 web 站点，但要开启一个 HTTPS 协议的站点，还需要 SSL 密钥和证书。

OpenSSL 创建 SSL 密钥和证书工具

OpenSSL 工具可以创建 SSL 密钥和证书。

安装参考：windows安装OpenSSL

使用官方安装包，步骤很繁琐，所以推荐别人做的便捷版安装包：http://slproweb.com/products/Win32OpenSSL.html

openssl生成DES加密值 openssl生成密钥_HTTPS

我下载的是 Light 版本，只需一直下一步即可安装。

openssl生成DES加密值 openssl生成密钥_HTTP_02

配置环境变量：

openssl生成DES加密值 openssl生成密钥_HTTP_03

openssl生成DES加密值 openssl生成密钥_openssl生成DES加密值_04

测试：

openssl version
# OpenSSL 1.1.1i  8 Dec 2020

生成证书和密钥

OpenSSL 官方手册

# 生成一个证书密钥对 key.pem 和 cert.pem，有效期约10年（准确地说是3650天）
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
# 会询问地区、机构、名称信息，可随意写

执行完成后，会在命令行目录下生成两个文件：

  • 证书 cert.pem
  • 密钥 key.pem

开启 HTTPS 协议的 web 服务

创建两个web站点目录：

├─ http	# 用于开启一个http协议的站点（端口3000），存放静态资源
│   ├─ data.json		# 存储测试数据，用于 Ajax 请求
│   └─ image.jpg		# 静态资源文件
└─ https # 用于开启一个https协议的站点（端口5000），用于加载http协议的资源
    ├─ cert.pem			# SSL 证书
    ├─ index.html		# 站点首页
    └─ key.pem			# SSL 密钥

http/data.json：

{
  "foo": "bar"
}

https/index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h1>加载 HTTP 协议的图片</h1>
    <img src="http://localhost:3000/image.jpg" width="300" />

    <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
    <script>
      // 发起 HTTP 协议的 Ajax 请求
      axios({
        method: 'GET',
        url: 'http://localhost:3000/data.json',
      })
    </script>
  </body>
</html>

本例使用 serve 开启服务。

# 全局安装 serve
# npm i -g serve

# 开启 https 协议的 web 服务，监听5000端口，指定ssl证书和密钥
serve ./https -l 5000 --ssl-cert ./https/cert.pem --ssl-key ./https/key.pem

# 新打开一个命令行窗口
# 开启 http 协议的 web 服务，监听3000端口
serve ./http -l 3000

# 使用 Chrome 浏览器访问 https://localhost:5000

openssl生成DES加密值 openssl生成密钥_HTTP_05

原因

当连接到一个提供无效证书的网站时，较旧的浏览器会使用一个对话框询问用户是否继续，而较新的浏览器会在整个窗口中显示警告。

Google Chrome、Internet Explorer、Firefox等浏览器在网站含有由加密(HTTPS)和未加密(HTTP)内容组成的混合内容时，会发出警告。

所以这个报错和警告，是浏览器为了安全性对于 混合内容 做出的处理行为。

混合内容

一个含有 HTTP 明文内容的 HTTPS 页面 称为 混合内容(mixed content)。

反之，在 HTTP 页面包含 HTTPS 资源则没有问题。

混合内容的类型及风险

混合内容有两种类型：被动/显示型混合内容(mixed passive/display content) 与 主动型混合内容(mixed active content)。

两者的区别在于内容遭中间人攻击篡改后，其最坏情况下的威胁程度。

如果是被动型混合内容，威胁程度低（可能有错误内容、或者用户的 cookie 操作窃取）。

如果是主动型混合内容，威胁就可能会变成网络钓鱼、敏感资料泄漏、被重定向到恶意网站等等。

  • 被动型混合内容
  • 指在 HTTPS 页面中，但无法改变其他部分的 HTTP 内容。
  • 例如：
  • <img>、<audio>、<video>（src属性）
  • <object>（如果 <object>发起 HTTP 请求）
  • 主动型混合内容
  • 指有权访问HTTPS 页面的 Document 对象的内容。
  • 这种内容可以改变 HTTPS 页面行为、窃取用户敏感信息、拦截 HTTP 协议的请求、篡改或恶意植入JS代码等。
  • 例如：
  • <script>(src 属性)
  • <link>（href属性）
  • <iframe>(src 属性)
  • XMLHttpRequest （Ajax 请求）
  • 等

浏览器策略

基于混合内容的风险，浏览器会在网站含有混合内容时，会在控制台显示警告或错误提示，并阻止主动型混合内容。

Chrome 81 后，被动型混合内容地址将自动由 http:// 升级为 https://，如果无法通过 https:// 加载，则Chrome 会阻止它们。