如何修复 HTTPS 网站的混合内容警告

什么是混合内容

当您为网站安装 SSL 证书并通过 HTTPS 提供服务后，浏览器期望页面上的每一个资源——图片、JavaScript、CSS、字体、iframe——也都通过 HTTPS 加载。

混合内容（Mixed Content）是指网页通过 HTTPS 提供，但某些资源的 URL 仍以 http:// 而非 https:// 开头。浏览器发现后会显示警告或直接拦截这些不安全的资源。

这个问题在网站从 HTTP 迁移到 HTTPS 时最为常见，因为数据库、HTML 文件和配置文件中的 URL 仍然沿用之前的 http://。

混合内容的类型

浏览器将混合内容分为两大类，风险等级和处理方式各不相同：

类型	涉及资源	浏览器行为	风险等级
主动混合内容	JavaScript、CSS、iframe、XHR/Fetch	立即拦截，不加载	极高
被动混合内容	图片、音频、视频	可加载但显示警告	相对较低

主动混合内容——高风险

通过 HTTP 加载的 JavaScript 或 CSS 可能在传输过程中被攻击者拦截并篡改（中间人攻击），在浏览器接收之前就被注入恶意代码，导致用户在不知情的情况下遭受恶意软件攻击或信息泄露。因此，Chrome、Firefox 和 Safari 自 2020 年起默认拦截主动混合内容。

被动混合内容——风险较低，但仍有影响

通过 HTTP 加载的图片无法直接修改页面内容，但攻击者仍然可以替换假图片或追踪用户访问了哪些页面。浏览器虽然会加载图片，但地址栏的绿色锁图标会被替换为警告标志。

混合内容带来的问题

• 锁图标消失或显示"不安全"——即使已安装 SSL，用户也会看到网站不安全的提示。
• 脚本和样式被拦截——页面可能渲染错误、按钮失效或布局完全崩溃。
• 图片无法加载（部分情况）——新版浏览器可能尝试将被动资源升级为 HTTPS，若 HTTPS 版本不存在则图片直接加载失败。
• 影响 SEO 排名——混合内容可能拖累 Core Web Vitals（LCP、CLS），Google 将网站安全性纳入排名信号。
• 控制台报错增加调试难度——隐藏在第三方脚本中的混合内容错误如果不知道要查找，很难定位。

如何检测混合内容

修复前，需要先精确找到混合内容的位置。以下是最可靠的几种方法：

1. Chrome DevTools——最精准的方法

1. 在 Chrome 中打开目标网页。
2. 按 F12 或 Ctrl+Shift+I 打开 DevTools。
3. 进入 Console 标签——查找以"Mixed Content"开头的红色或黄色提示。
4. 进入 Network 标签，重新加载页面，筛选以 http:// 开头的请求。

2. 在线检测工具

• Why No Padlock（whynopadlock.com）——免费扫描公开 URL 的混合内容。
• JitBit SSL Checker——爬取整个网站查找 HTTP 资源。
• SSL Shopper SSL Checker——适合验证证书安装问题。

3. 查看页面源代码

在 Chrome 中按 Ctrl+U 查看页面源代码，然后搜索 http://，找出所有未升级的 URL。

通用修复方法

修复方法取决于混合内容的来源，以下是最常见的几种情况：

情况一：您自己控制的 URL（自有文件）

将 HTML、CSS 或 JS 文件中的 URL 从 http:// 改为 https://，或使用协议相对 URL：

<!-- 旧写法（错误）-->
<img src="http://example.com/img/photo.jpg">
<script src="http://example.com/js/main.js"></script>

<!-- 正确写法 -->
<img src="https://example.com/img/photo.jpg">
<script src="https://example.com/js/main.js"></script>

<!-- 协议相对 URL（http 和 https 均适用）-->
<img src="//example.com/img/photo.jpg">

情况二：外部第三方资源

如果第三方服务支持 HTTPS（大多数都支持），直接将 URL 改为 https://。若不支持，则下载该文件并在自己的服务器上托管。

情况三：数据库中存储的 URL

对于 WordPress 等将 URL 存储在数据库中的 CMS，仅修改 PHP 文件是不够的，必须更新数据库记录。详情请参阅下方的 WordPress 部分。

修复 WordPress 中的混合内容

WordPress 将 URL 存储在 MySQL 数据库中，因此从 HTTP 迁移到 HTTPS 需要执行数据库搜索替换。以下是主要方法：

方法一：Really Simple SSL 插件（适合初学者）

1. 从 WordPress.org 安装 Really Simple SSL 插件。
2. 激活后点击"Go ahead, activate SSL!"。
3. 插件将自动设置 HTTP→HTTPS 跳转并添加必要的标头。
4. 再次检查 Console，确认混合内容警告消失。

方法二：Better Search Replace 插件（永久修复数据库）

1. 安装 Better Search Replace 插件。
2. 进入 工具 → Better Search Replace。
3. "搜索"字段填写：http://yourdomain.com
4. "替换为"字段填写：https://yourdomain.com
5. 选择所有数据表，至少包括 wp_posts、wp_postmeta、wp_options。
6. 先执行"模拟运行"查看将更改的记录数，确认无误后再执行实际替换。

方法三：WP-CLI（适合有 SSH 访问权限的用户）

wp search-replace 'http://yourdomain.com' 'https://yourdomain.com' --skip-columns=guid

wp-config.php 额外配置

在 wp-config.php 中添加以下代码，全面强制启用 HTTPS：

define('FORCE_SSL_ADMIN', true);
define('WP_HOME', 'https://yourdomain.com');
define('WP_SITEURL', 'https://yourdomain.com');

在 DirectAdmin 虚拟主机上修复混合内容

AsiaGB 虚拟主机用户使用 DirectAdmin 作为控制面板，可以直接通过面板管理 SSL 并解决混合内容问题：

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

使用 CSP 标头作为安全网

即使修复了代码和数据库中的 URL，仍可能有遗漏。Content-Security-Policy: upgrade-insecure-requests HTTP 标头可以指示浏览器在加载资源前自动将所有 HTTP 请求升级为 HTTPS。

在 .htaccess 中添加：

Header always set Content-Security-Policy "upgrade-insecure-requests"

进阶：清理完成后添加 HSTS

解决所有混合内容问题后，建议添加 HSTS（HTTP 严格传输安全）标头，强制浏览器始终使用 HTTPS，减少跳转开销并防止协议降级攻击：

Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"

预防未来出现混合内容

• 将所有系统的默认 URL 设置为 HTTPS——WordPress 站点 URL、数据库 URL 和配置文件中的 URL 必须全部使用 https://。
• 硬编码时使用协议相对 URL——使用 //cdn.example.com/file.js 而不是 http://cdn.example.com/file.js。
• 激活新插件和主题前检查代码——查看其源代码是否存在硬编码的 HTTP URL。
• 配合 report-uri 使用 Content-Security-Policy——每当站点触发混合内容时接收报告。
• 将混合内容检测加入 CI/CD 流程——使用 Puppeteer 或 Playwright 等工具在每次部署时自动检测。
• 每次部署后进行测试——用 DevTools 快速检查 Console 错误，只需几秒钟，能及早发现问题。

常见问题解答