浏览器的“混合内容”（Mixed Content）策略主要是为了保护 HTTPS 页面的安全。它禁止 HTTPS 页面加载 HTTP 子资源，因为这会让加密页面混入不安全的内容，存在中间人攻击风险。
反过来，HTTP 页面加载 HTTPS 资源是安全的（相当于从不安全的页面主动连接安全的资源），浏览器不会阻止这种请求。因此，图片能正常加载并显示。
所以：图片统一使用 HTTPS 或协议相对路径（//your-oss-url.com/image.jpg），这样无论主站是 HTTP 还是 HTTPS 都能自适应。

托管在CloudFlare的静态站点blog.muyu.org，默认是启用了https，但之前站点是不使用https协议的，页面中的阿里云OSS图片都是http的URL（之前也没申请证书），不能正常显示。现在已经是6202年，估计没有启用https的站点是少数，如果因为这个原因，OSS的使用将极为受限。为解决这个问题，又开始折腾。

一、原因分析

这个问根本原因是混合内容（Mixed Content）：主站已全站启用 HTTPS，但页面里仍有通过 http:// 加载的图片。出于安全考虑，现代浏览器会直接拦截这类“不安全”的 HTTP 请求。

二、解决方案（OSS本身支持HTTPS）

🚀 方案一：利用 Cloudflare 的 "自动 HTTPS 重写"（Automatic HTTPS Rewrites）

这是最省事的一键式救急方案，特别适合图片数量庞大、不便逐一修改的场景。
Cloudflare 会在响应到达浏览器前，自动扫描 HTML 内容，尝试将所有 http:// 的图片链接替换为 https://。

操作方法：

登录你的 Cloudflare 仪表板。
选择对应的域名，进入 SSL/TLS → 边缘证书（Edge Certificates）。
找到 自动 HTTPS 重写（Automatic HTTPS Rewrites）选项，将开关设为启用（On）。

重要提醒：此方案有效的前提是，阿里云 OSS 上的图片资源本身必须支持 HTTPS 访问。否则，链接即便被“升级”了，图片也无法加载。

🚀 方案二：从源头修复——修改页面中的图片链接

这是最彻底的根治方法。直接修改网页的 HTML 或 Markdown 源文件，将所有阿里云 OSS 图片的引用链接从 http:// 改成 https://。

灵活做法：如果暂时不能完全确定 HTTPS 是否可用，可使用 “协议相对路径”，将链接写成 //your-bucket.oss-cn-hangzhou.aliyuncs.com/image.jpg。这样，浏览器会自动跟随当前页面协议（HTTPS）来加载图片，兼容性更好。

如果图片链接是动态生成的，请检查后台代码，确保其生成的是 HTTPS 链接。

🚀 方案三：使用浏览器端一键升级指令（upgrade-insecure-requests）

如果你无法修改页面里的每一条图片链接，但希望从根源上解决，可以使用此方案。它通过一个指令，强制浏览器将页面中所有 HTTP 请求自动升级为 HTTPS。

操作方法：
在你的 Cloudflare 托管站点的 HTML 页面的 <head> 标签内，添加以下代码即可：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

重要提醒：这个指令要求阿里云 OSS 图片资源必须支持 HTTPS 访问。

三、为阿里云 OSS 图片服务配置 HTTPS

阿里云 OSS对官方域名和自定义域名的处理方式是不一样的，这两种情况的关键区别如下：

域名类型	是否支持 HTTPS	需要额外配置吗？
OSS 默认域名 (如 `example-bucket.oss-cn-hangzhou.aliyuncs.com`)	是，原生支持	不需要由阿里云统一管理证书，开箱即用。
自定义域名 (如 `img.yourdomain.com`)	需要自行配置	需要你必须为该域名绑定并托管有效的 SSL 证书。

方式一：直接使用 OSS 提供的原生 HTTPS 域名

OSS 为每个 Bucket 提供了官方域名，该域名已由阿里云统一配置 SSL 证书，原生支持 HTTPS。

域名格式：<bucket-name>.oss-<region-id>.aliyuncs.com
示例：https://yourname.oss-cn-hongkong.aliyuncs.com/my-image.jpg
优点：最简单，无需额外配置。
缺点：URL 较长，且域名中包含阿里云标识，浏览器一般会直接下载文件，而非在线预览。。

方式二：绑定自定义域名并配置 SSL 证书（推荐）

这是最专业、最优雅的解决方案。通过为图片服务绑定你自己的域名（如 img.yourdomain.com），可以为网站用户提供一致和美观的访问体验。步骤如下：

绑定自定义域名：在阿里云 OSS 控制台，进入你的 Bucket，在“传输管理” → “域名管理”中绑定你的自定义域名（例如 img.yourdomain.com）。
配置 SSL 证书：
- 情况A：未使用 CDN。在 OSS 控制台的“域名管理”列表中，找到绑定的自定义域名，点击“证书托管”。
- 情况B：已使用 CDN。证书需要在 CDN 控制台配置。在 CDN 域名管理中找到你的加速域名，进入“HTTPS 配置”进行设置。
添加 CNAME 解析：前往你的 DNS 服务商（如 Cloudflare），为你的自定义域名（如 img.yourdomain.com）添加一条 CNAME 记录，记录值指向你的 OSS Bucket 官方域名（<bucket-name>.oss-<region-id>.aliyuncs.com）。

四、其他可选方案

使用 Cloudflare Workers 代理 OSS 图片：编写一个 Worker 脚本，将特定路径的图片请求代理到你的 OSS，并确保返回的内容通过 HTTPS 传输。
使用阿里云 CDN + HTTPS：为 OSS 绑定自定义域名并开启 CDN 加速，然后在 CDN 控制台为该域名配置 SSL 证书，所有通过 CDN 域名访问的图片都将支持 HTTPS。
调整 OSS 防盗链设置：如果配置了防盗链，确保你的 HTTPS 网站域名已加入白名单，否则图片请求会被拒绝。

总结建议：优先尝试 方案一 快速恢复显示。若想长远、稳定地解决问题，强烈建议采用 方案二 与 永久性解决方案 的组合，即从源头上将图片链接更新为自定义域名的 HTTPS 链接，这是最规范、最安全的做法。

五、其他应用情形

场景	结果	原因
HTTPS 页面加载 HTTP 图片	❌ 被浏览器阻止	混合内容安全策略（不安全）
HTTP 页面加载 HTTPS 图片	✅ 正常显示	从低安全环境向高安全环境请求，安全

所以：在只启用 HTTP 的站点页面中，嵌入 HTTPS 的图片（例如阿里云 OSS 上的 https:// 图片）通常可以正常显示。

原因：混合内容的安全策略是单向的

浏览器的“混合内容”（Mixed Content）策略主要是为了保护 HTTPS 页面的安全。它禁止 HTTPS 页面加载 HTTP 子资源，因为这会让加密页面混入不安全的内容，存在中间人攻击风险。

反过来，HTTP 页面加载 HTTPS 资源是安全的（相当于从不安全的页面主动连接安全的资源），浏览器不会阻止这种请求。因此，图片能正常加载并显示。

需要注意的几点

图片类型属于“被动混合内容”
图片、视频、音频等被动资源，在 HTTP 页面中加载 HTTPS 版本时，浏览器不会有任何警告或阻止行为。
如果页面同时包含其他主动资源（脚本、CSS 等）
如果 HTTP 页面中通过 <script src="https://..."> 加载 HTTPS 的 JS 文件，也是允许的。但反过来（HTTPS 页面加载 HTTP JS）则会被阻止。
极少数旧版浏览器的行为
理论上所有现代浏览器（Chrome、Firefox、Safari、Edge）都允许 HTTP 页面加载 HTTPS 图片。无需担心兼容性问题。

建议

虽然技术上可行，但为了网站整体安全性和未来趋势（浏览器逐步强制 HTTPS），建议：

如果你有能力，将主站也升级到 HTTPS（Cloudflare 提供免费 SSL）。
图片统一使用 HTTPS 或协议相对路径（//your-oss-url.com/image.jpg），这样无论主站是 HTTP 还是 HTTPS 都能自适应。

日期：2026-04-08