WordPress HTTP/HTTPS混合内容修正方法

使用Nginx作为反向代理同时提供HTTP和HTTPS访问WordPress时,WordPress可能无法正确识别当前使用的协议,导致生成错误的资源链接,从而出现混合内容问题。浏览器会阻止这些混合内容,导致部分JS和表单无法正常工作。

要解决这个问题,需要配置WordPress正确识别协议,并确保所有资源使用正确的协议加载。

一、临时解决:Nginx配置添加Content-Security-Policy “upgrade-insecure-requests”标头:

server {
    listen 443 ssl;
    server_name example.com;
    
    # SSL配置...
    
    add_header Content-Security-Policy "upgrade-insecure-requests";
    
    location / {
        # 反向代理配置...
    }
}

这个响应标头的作用是告诉浏览器自动将网页中的所有HTTP资源请求升级为HTTPS请求,添加Content-Security-Policy “upgrade-insecure-requests”标头后,浏览器会自动将页面中所有通过HTTP加载的资源(如图片、脚本、样式表等)请求升级为HTTPS请求。

注意事项

  1. 资源必须存在:升级后的HTTPS资源必须在服务器上存在且可使用HTTPS访问,否则会导致404或SSL错误。
  2. 不适用于主动请求:对于AJAX请求、Fetch API调用或JavaScript发起的跳转,这个指令不会生效。
  3. 仅在HTTPS页面生效:只有当页面本身通过HTTPS加载时,这个策略才会起作用。

二、后续处理

添加响应标头只是临时处理方案,完全解决还需要wordpress将http资源转换为https,以下是具体的解决方案:

1. 配置Nginx反向代理(必须)

确保Nginx正确设置了头部信息,以便WordPress能够识别原始请求协议:

server {
    listen 80;
    listen 443 ssl;
    server_name example.com;
    
    location / {
        proxy_pass http://wordpress_backend;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Port $server_port;
    }
}

2. 数据库中URL的处理(可选)

确保WordPress地址和站点地址正确设置。可以在wp-config.php中添加以下定义来强制设置:

phpdefine('WP_HOME', 'https://example.com');
define('WP_SITEURL', 'https://example.com');


3. 配置WordPress识别代理协议(可选)

在WordPress的wp-config.php文件中添加以下代码,让WordPress能够识别代理信息:

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

if (isset($_SERVER['HTTP_X_FORWARDED_HOST'])) {
    $_SERVER['HTTP_HOST'] = $_SERVER['HTTP_X_FORWARDED_HOST'];
}

define('FORCE_SSL_ADMIN', false); // 如果你希望管理界面可以选择HTTP或HTTPS

4. 添加自定义函数解决混合内容问题(可选)

可以添加以下代码到主题的functions.php文件中,动态地将HTTP链接转换为HTTPS链接:

function fix_ssl_urls($content) {
    if (is_ssl()) {
        $content = str_replace('src="http://', 'src="https://', $content);
        $content = str_replace('href="http://', 'href="https://', $content);
    }
    return $content;
}
add_filter('the_content', 'fix_ssl_urls');
add_filter('wp_get_attachment_url', 'fix_ssl_urls');
add_filter('stylesheet_uri', 'fix_ssl_urls');
add_filter('script_loader_src', 'fix_ssl_urls');
add_filter('style_loader_src', 'fix_ssl_urls');

5. 使用WordPress插件进行HTTP到HTTPS的转换(推荐)

使用”SSL 不安全内容修复器“插件进行修复:

wordpress插件商店搜索并安装插件SSL 不安全内容修复器

启用插件,在已安装插件内进行插件设置,根据需求调整设置。

经过以上步骤,即可修复混合内容。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

CAPTCHA