Mixed Content là gì? Cách fix triệt để cho website HTTPS

Mixed Content là gì? Vì sao website HTTPS vẫn bị “Not Secure”? Hướng dẫn cách kiểm tra và fix triệt để lỗi Mixed Content cho website.

Mixed Content là gì?

Mixed Content xảy ra khi:

Website chạy HTTPS nhưng vẫn tải tài nguyên qua HTTP

Ví dụ:

• Trang chính: https://example.com
• Load ảnh: http://example.com/image.jpg

Khi đó:

• Trình duyệt sẽ coi website không an toàn hoàn toàn

Tại sao Mixed Content nguy hiểm?

Khi một phần nội dung không được mã hóa:

• Hacker có thể chèn mã độc
• Dữ liệu có thể bị thay đổi
• Người dùng bị đánh cắp thông tin

Chỉ cần 1 resource HTTP cũng đủ phá vỡ toàn bộ bảo mật HTTPS

Dấu hiệu nhận biết Mixed Content

Bạn sẽ thấy:

• Trình duyệt báo “Not Secure”
• Icon ổ khóa bị gạch hoặc cảnh báo
• Console báo lỗi dạng:

Mixed Content: The page was loaded over HTTPS, but requested an insecure resource

Phân loại Mixed Content

Passive Content (ít nguy hiểm hơn)

• Hình ảnh (img)
• Video
• Audio

Trình duyệt có thể vẫn load nhưng cảnh báo

Active Content (nguy hiểm)

• JavaScript
• CSS
• iframe

--> Thường bị block hoàn toàn

Active Mixed Content có thể khiến website bị vỡ layout hoặc không chạy

Nguyên nhân phổ biến

• Hardcode link http:// trong code
• CMS (WordPress, Laravel...) lưu URL cũ
• CDN chưa bật HTTPS
• API bên thứ 3 không hỗ trợ HTTPS

Lỗi này rất phổ biến khi vừa migrate từ HTTP sang HTTPS

Cách kiểm tra Mixed Content

1. Dùng DevTools (Chrome/Edge)

• F12 --> tab Console
• Reload trang
• Tìm keyword “Mixed Content”

2. Dùng SSL Labs

• Kiểm tra tổng thể cấu hình SSL

3. Dùng crawler hoặc tool scan

• Screaming Frog
• Sitebulb
• Ahrefs

Cách fix Mixed Content triệt để

Cách 1: Replace toàn bộ HTTP --> HTTPS

Trong database hoặc code:

UPDATE table_name
SET content = REPLACE(content, 'http://example.com', 'https://example.com');

Đây là cách fix nhanh và hiệu quả nhất

Cách 2: Dùng protocol-relative URL (không khuyến khích lâu dài)

--> Trình duyệt tự chọn HTTP/HTTPS

Chỉ nên dùng tạm, không phải giải pháp lâu dài

Cách 3: Fix trong source code

Ví dụ:

<link href="http://example.com/style.css" rel="stylesheet" />

Sửa thành:

<link href="https://example.com/style.css" rel="stylesheet" />

Cách 4: Cấu hình redirect HTTP → HTTPS

Nginx

server {
    listen 80;
    return 301 https://$host$request_uri;
}

Apache

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

Đảm bảo mọi request đều đi qua HTTPS

Cách 5: Dùng Content Security Policy (CSP)

Content-Security-Policy: upgrade-insecure-requests;

Tác dụng:

• Tự động chuyển HTTP --> HTTPS

Giải pháp mạnh nhưng cần test kỹ

Fix nâng cao

Kiểm tra CDN

• Cloudflare, CDN riêng
• Phải bật HTTPS cho asset

Kiểm tra API bên ngoài

Nếu API:

• Không hỗ trợ HTTPS --> Bắt buộc thay thế

Kiểm tra file CSS/JS

Nhiều khi lỗi nằm trong:

• file CSS load background image
• JS load resource ngoài

Sai lầm phổ biến

• Chỉ fix trang chính --> Các trang khác vẫn lỗi
• Quên database --> CMS vẫn lưu link HTTP
• Không kiểm tra file tĩnh --> CSS/JS vẫn load HTTP
• Bật HSTS khi chưa fix xong --> Website có thể lỗi nghiêm trọng

Mixed Content + HSTS = combo dễ “toang site” nếu làm sai

Mixed Content ảnh hưởng SEO như thế nào?

• Mất trust từ trình duyệt
• Giảm trải nghiệm người dùng
• Ảnh hưởng ranking gián tiếp

Google ưu tiên:

• Website HTTPS hoàn chỉnh
• Không có lỗi bảo mật

Có SSL nhưng vẫn Mixed Content = chưa thực sự an toàn

Kết luận

• Mixed Content là lỗi phổ biến khi dùng HTTPS
• Chỉ cần một resource HTTP cũng làm giảm bảo mật
• Cần fix triệt để trong code, database và hệ thống

HTTPS không có nghĩa là an toàn nếu Mixed Content vẫn tồn tại