本文主要是介绍关于HTTPS网页不能发起HTTP协议请求(OpenSSL 生成密钥方法)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
场景描述
当 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
我下载的是 Light 版本，只需一直下一步即可安装。
配置环境变量：
测试：
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
原因
当连接到一个提供无效证书的网站时，较旧的浏览器会使用一个对话框询问用户是否继续，而较新的浏览器会在整个窗口中显示警告。
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 会阻止它们。
更多详细参考
- 混合内容 - MDN
- 混合内容 & https 升级攻略
- What is mixed content?
- Chrome 81 正式发布 ！消灭混合内容最后一步~
- HTTPS - wiki
这篇关于关于HTTPS网页不能发起HTTP协议请求(OpenSSL 生成密钥方法)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
