致力于网站运营的朋友们, 当你怀着满心的喜爱与期待为网站精心配置好 HTTPS 证书后, 兴致勃勃地打开浏览器时, 却惊讶地发现地址栏旁边赫然挂着“不安全”字样 , 或者原本应该出现“小锁”的地方消失不见了, 这时你的心里必定会不由自主地猛地一沉。出现这种状况大概率是因为混合内容（Mixed Content）在暗中搞鬼捣蛋——虽然你的页面是以通过 HTTPS 的方式进行加载的, 然而所引用的图片、脚本以及样式表却依旧采用的是 HTTP 链接。

今儿个,咱们就要着手去做一回彻头彻尾纯粹的那种“扫雷”的事儿, 运用最为直截了当的办法去确定位置并且修复这些 HTTP 资源。

第一步：用浏览器开发者工具快速排查

将你的网站予以打开, 通过按 F12 的方式进入开发者工具这一范畴, 进而切换至 Console（控制台）面板, 在此你将会看到仿若如此的警告:

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure resource 'http://example.com/image.jpg'.

这种方式虽说直观, 然而却要手动逐页去检查, 针对大型站点而言效率实在是太低了。

第二步：用一段 JavaScript 代码自动扫描

径直于浏览器控制台去运行下面这段代码, 它会对当前页面全部资源标签予以遍历, 进而罗列展现出所有HTTP链接。

(function() {
    var resources = document.querySelectorAll('[src], [href]');
    var insecure = [];
    resources.forEach(function(el) {
        var attr = el.src ? 'src' : 'href';
        var url = el[attr];
        if (url && url.startsWith('http://')) {
            insecure.push({ tag: el.tagName, attr: attr, url: url });
        }
    });
    if (insecure.length === 0) {
        console.log('✅ 当前页面没有混合内容！');
    } else {
        console.table(insecure);
    }
})();

当运行完毕之后, 控制台将会呈现出所有 HTTP 资源依表格形式排列开来的标签类型, 以及属性, 还有完整的 URL, 如此一来便能够方便你逐个地将其替换成为 HTTPS, 或者是使用相对路径。

第三步：修改为相对路径或协议自适应

将资源地址改成相对路径（这般 //cdn.example.com/style.css）, 此乃最为彻底的修复办法, 如此一来浏览器会自行沿袭当前页面的协议, 或者要在 HTML 的  里添上下面这些 meta 标签:

该指令会强迫浏览器把页面里每一个HTTP请求自动转变为HTTPS, 省却逐个进行修改的繁杂。留意, 它仅适用于资源自身支持HTTPS的情形。

第四步：检查后台数据库与配置文件

有不少 CMS（像是 WordPress）会把资源绝对路径稳固地记录在数据库中若是上述办法没办法完全处理, 你就得:

在数据库那儿, 运用 UPDATE 语句, 去进行批量替换, 把 http:// 替换成 https://。

查验Nginx或者Apache配置里头, 是不是存在硬编码的HTTP回源地址, 情况是否如此呢。

最后要进行提醒, 混合的内容, 它不但会对用户体验产生影响, 而且更会使得像谷歌这种搜索引擎, 拉低对于网站的信任程度。在修复完成之后, 务必要运用SSL Labs或者Why No Padlock工具去做一次全站的扫描这一操作, 以确保达到万无一失的状态呢。

否玩代码编辑 https://www.fouwan.com