WordPress移动端头部混合输出http/https资源致苹果设备拦截加载

优先排查缓存类问题 #

• 确认是否存在移动端独立缓存：多数WordPress缓存插件（如WP Rocket、W3 Total Cache）、CDN服务都会区分移动端和桌面端做独立缓存，站点切换HTTPS时如果仅清理了桌面端缓存，旧的HTTP资源地址会一直保留在移动端缓存中返回给用户。操作：清空所有层级缓存，包括CDN边缘缓存、站点缓存插件缓存、服务器层面缓存（如Nginx fastcgi_cache），再用移动端UA的无痕模式访问测试。
• 检查是否安装了移动端专属适配插件：如果安装过WP Touch这类移动端适配插件，这类插件可能独立写死了资源地址未同步更新为HTTPS，或者自身的资源加载逻辑没有调用WordPress默认的协议自适应函数。

排查协议判定逻辑问题 #

WordPress依靠$_SERVER['HTTPS']变量判断当前请求是否为HTTPS协议，在反向代理/负载均衡部署场景下，如果移动端请求的代理链路没有正确传递HTTPS状态参数，WordPress会误判当前为HTTP请求，自然输出HTTP开头的资源地址。

• 可先在主题functions.php中临时加入测试代码判断问题：

add_action('wp_head', function() {
    echo '<!-- HTTPS status: ' . (is_ssl() ? 'yes' : 'no') . ' -->';
}, 1);

分别用桌面端和移动端访问页面，查看页面头部注释的HTTPS状态，如果移动端返回no，就把以下代码加入wp-config.php文件即可修复：

if (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') {
    $_SERVER['HTTPS'] = 'on';
}

该代码会告知WordPress只要代理转发头标注为HTTPS协议，就按HTTPS请求处理资源地址。

兜底修复方案 #

如果排查后无法定位根因，可直接用强制协议替换的方式统一资源协议，在主题functions.php中加入以下代码即可：

add_filter('script_loader_src', 'force_https_resource', 10, 2);
add_filter('style_loader_src', 'force_https_resource', 10, 2);
add_filter('wp_resource_hints', 'force_https_resource', 10, 2);
function force_https_resource($src) {
    if (is_ssl() && strpos($src, 'http://') === 0) {
        $src = str_replace('http://', 'https://', $src);
    }
    return $src;
}

该代码会将所有WordPress输出的脚本、样式、资源提示地址统一替换为HTTPS协议，不会影响桌面端正常加载。

内容的提问来源于stack exchange，提问作者Joey Louie