Lỗi Mixed Content Varnish + CloudFlare Flexible SSL + WordPress

Cloudflare Flexible SSL cung cấp miễn phí SSL để thêm khóa màu xanh lá cây HTTPS vào trang web WordPress của bạn. Có một plugin SSL sẽ giúp giải quyết mọi vấn đề của SSL như lặp chuyển hướng. Bạn có thể gặp lỗi CSS hoặc mix content khi sử dụng Flexible SSL của Cloudflare với Varnish. Bài viết này sẽ giúp bạn giải quyết những vấn đề đó.

Các cấu hình để sửa lỗi Mix content Varnish với CloudFlare Flexible SSL giống nhau đối với các phiên bản Varnish 3, 4 và 5.

Varnish 3

Mở cấu hình vcl của varnish 3, trong hàm vcl_hash, thêm vào đoạn code sau. Lưu ý, nếu không tìm thấy hàm này, bạn có thể tự thêm ở trước hàm vcl_fetch.

sub vcl_hash {

    if (req.http.X-Forwarded-Proto) {
        hash_data(req.http.X-Forwarded-Proto);
    }
}

Sau đó lưu lại.

Varnish 4

Mở cấu hình vcl của varnish 4, trong hàm vcl_hash,thêm vào đoạn code sau. Lưu ý, nếu không tìm thấy hàm này, bạn có thể tự thêm ở trước hàm vcl_backend_response.

sub vcl_hash {

    if (req.http.X-Forwarded-Proto) {
        hash_data(req.http.X-Forwarded-Proto);
    }
}

Lưu lại & đừng quyên nạp lại cấu hình varnish.

Bây giờ bạn sẽ cấu hình WordPress cho SSL để hoạt động được với Varnish.

Cấu hình WordPress SSL

Mở file wp-config.php với SFTP hoặc trình FTP thông thường.

Thêm đoạn mã này để bắt `https`, bạn cũng sẽ cần tạo lại chuỗi bảo mật salts cho WordPress, tạo ở đây.

Khi sử dụng WordPress với CloudFlare hoặc Varnish bạn cần sửa lại cấu hình wordpress cho phù hợp. Đó là kiểm tra header X-Forwarded-Proto cho giao thức https. Nếu giao thức https được tìm thấy, wordpress sẽ bật nó lên thay vì gửi ngược lại. Điều này sẽ ngăn chặn các vòng chuyển hướng với Varnish và Cloudflare.

/**#@+
 * Authentication Unique Keys and Salts.
 *
 * Change these to different unique phrases!
 * You can generate these using the {@link https://api.wordpress.org/secret-key/1.1/salt/ WordPress.org secret-key service}
 * You can change these at any point in time to invalidate all existing cookies. This will force all users to have to log in again.
 *
 * @since 2.6.0
 */
define('AUTH_KEY',         'put your unique phrase here');
define('SECURE_AUTH_KEY',  'put your unique phrase here');
define('LOGGED_IN_KEY',    'put your unique phrase here');
define('NONCE_KEY',        'put your unique phrase here');
define('AUTH_SALT',        'put your unique phrase here');
define('SECURE_AUTH_SALT', 'put your unique phrase here');
define('LOGGED_IN_SALT',   'put your unique phrase here');
define('NONCE_SALT',       'put your unique phrase here');

//Cloudflare Flexible SSL redirect loop fix
if ( isset( $_SERVER['HTTP_X_FORWARDED_PROTO'] ) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')
        $_SERVER['HTTPS']='on';
...

Bây giờ bắt đầu thử nghiệm và vòng lặp chuyển hướng vô hạn WordPress của bạn với Varnish hoặc Cloudflare sẽ biến mất

Tham khảo thêm:

Cloudflare Infinite Redirect Loop
Redirect Loop with Varnish and nginx HTTPS
Varnish Redirect Loop
WordPress wp-admin Redirect Loop

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dõi kênh chia sẻ kiến thức WordPress của Hoangweb trên Twitter và Facebook