Bạn vừa cài chứng chỉ SSL, gõ địa chỉ trang vẫn thấy https:// đầy đủ, nhưng ổ khoá trên thanh địa chỉ lại biến mất hoặc đổi thành dấu chấm than. Thủ phạm phổ biến nhất chính là nội dung hỗn hợp. Bài viết này giải thích bản chất của nó, lý do làm mất khoá xanh, và quy trình tìm rồi sửa dứt điểm.
Trang an toàn nhưng tài nguyên thì không
Khi trình duyệt mở một trang qua HTTPS, nó kỳ vọng mọi thứ trên trang đó cũng đi qua kênh mã hoá. Nhưng một trang web không chỉ gồm phần HTML chính. Nó còn kéo về hàng chục tài nguyên phụ: ảnh, tệp CSS định kiểu, mã JavaScript, phông chữ, video, khung nhúng (iframe). Nếu phần HTML đi qua HTTPS mà một trong các tài nguyên phụ kia vẫn được nhúng bằng đường dẫn http://, trang đó dính mixed content.
Điều nguy hiểm là một liên kết HTTP nằm lẫn trong trang HTTPS sẽ phá vỡ lời hứa bảo mật. Kẻ tấn công xen giữa đường truyền (man-in-the-middle — chèn vào giữa kết nối) có thể đọc hoặc thay đổi tài nguyên HTTP đó, từ đó can thiệp vào cả trang vốn được cho là an toàn. Vì vậy trình duyệt không thể nhắm mắt cho qua.
Vì sao trang mất khoá xanh
Ổ khoá trên thanh địa chỉ là cách trình duyệt nói với người dùng rằng kết nối tới trang được mã hoá toàn vẹn. Khi phát hiện mixed content, trình duyệt không còn dám đưa ra lời bảo đảm đó nữa, nên nó hạ chỉ báo xuống: ổ khoá biến mất, đổi thành biểu tượng cảnh báo, hoặc hiện dòng chữ “Không bảo mật” tuỳ phiên bản.
Với khách truy cập, đây là tín hiệu gây nghi ngờ ngay lập tức, đặc biệt trên trang có biểu mẫu hoặc thanh toán. Với máy tìm kiếm, HTTPS là một yếu tố xếp hạng nhẹ và cũng là tiêu chí an toàn; một trang phát cảnh báo bảo mật khó tạo được trải nghiệm tốt. Mixed content vì thế vừa là vấn đề kỹ thuật vừa ảnh hưởng tới lòng tin.
Hai loại mixed content và cách trình duyệt xử lý
Không phải tài nguyên HTTP nào cũng bị đối xử như nhau. Trình duyệt chia làm hai nhóm.
Nội dung thụ động (passive) — thường được tự nâng cấp
Đây là tài nguyên chỉ hiển thị, không thể thay đổi cấu trúc hay hành vi trang: ảnh trong thẻ <img src>, ảnh nền trong CSS, video và audio qua thuộc tính src. Theo tài liệu của Mozilla, trình duyệt hiện đại sẽ tự nâng cấp các yêu cầu này từ HTTP lên HTTPS. Nếu máy chủ có sẵn bản HTTPS, tài nguyên vẫn tải bình thường. Nếu không có bản HTTPS, yêu cầu thất bại và tài nguyên không hiện ra (trình duyệt không quay về HTTP).
Lưu ý một ngoại lệ: nếu đường dẫn dùng địa chỉ IP thay vì tên miền (ví dụ http://93.184.215.14/anh.png) thì tài nguyên bị chặn thẳng chứ không được nâng cấp.
Nội dung chủ động (active) — bị chặn thẳng
Đây là tài nguyên có thể điều khiển hoặc làm hỏng cả trang: JavaScript (<script>), CSS (<link>), iframe, phông chữ web, các lệnh fetch() và XMLHttpRequest. Trình duyệt luôn chặn nhóm này khi nó đi qua HTTP. Hậu quả thường thấy là trang mất hết định kiểu (trông trần trụi, vỡ bố cục) hoặc một tính năng nào đó ngừng hoạt động mà không rõ lý do.
Cách tìm mixed content trên trang của bạn
Công cụ nhanh nhất luôn có sẵn trong trình duyệt:
- Mở trang nghi ngờ, nhấn chuột phải rồi chọn Inspect (Kiểm tra) để mở Developer Tools.
- Sang tab Console. Trình duyệt sẽ ghi cảnh báo mixed content tại đây, kèm đúng đường dẫn HTTP gây lỗi. Cảnh báo màu đỏ thường là nội dung chủ động bị chặn, màu vàng là nội dung thụ động.
- Đọc nội dung dòng cảnh báo để biết tài nguyên nào, nằm ở đâu cần sửa.
Với trang nhỏ, kiểm tra vài trang đại diện là đủ. Với website lớn, nên quét toàn bộ bằng công cụ thu thập như Screaming Frog, hoặc theo dõi cảnh báo bảo mật trong Google Search Console để thấy phạm vi toàn site thay vì soi từng trang.
Cách sửa dứt điểm
Nguyên tắc gốc rất đơn giản: mọi tài nguyên đều phải đi qua HTTPS. Các bước thực tế:
- Đổi mọi đường dẫn
http://thànhhttps://trong mã nguồn, miễn là tài nguyên đó thực sự có bản HTTPS. Với tài nguyên nằm trên chính tên miền của bạn, tốt nhất dùng đường dẫn tương đối (ví dụ/images/logo.pngthay vì ghi cứng cả tên miền) để không bao giờ kẹt giao thức. - Quét cơ sở dữ liệu nếu là website WordPress. Đường dẫn HTTP thường bị nhồi cứng trong nội dung bài viết, phần cài đặt, hoặc dữ liệu tuần tự (serialized). Một lệnh thay thế đường dẫn trên toàn bộ cơ sở dữ liệu xử lý gọn việc này.
- Tài nguyên bên thứ ba không có HTTPS thì không thể ép. Khi đó hãy đổi sang nhà cung cấp khác có HTTPS, tự lưu bản sao về máy chủ của bạn, hoặc bỏ hẳn tài nguyên đó.
- Thêm header
Content-Security-Policy: upgrade-insecure-requestsnhư lớp phòng vệ cuối, ra lệnh cho trình duyệt nâng cấp mọi yêu cầu HTTP còn sót lên HTTPS trước khi gửi đi.
Sau khi sửa, tải lại trang với Console đang mở để xác nhận không còn dòng cảnh báo nào, và khoá xanh đã trở lại.
Mixed content nằm ở đâu trong bức tranh kỹ thuật
Sửa mixed content là một mảnh của việc dọn dẹp HTTPS, bên cạnh các vấn đề như chuyển hướng đúng chuẩn hay khai báo địa chỉ chuẩn. Nếu bạn đang rà soát toàn diện phần nền tảng, có thể tham khảo thêm về audit kỹ thuật website để không bỏ sót các lỗi liên quan. Khi cần một bên đồng hành xử lý phần hạ tầng và tối ưu SEO tổng thể, Web22 có thể hỗ trợ bạn.
Câu hỏi thường gặp
Có nên ép trình duyệt cho phép mixed content không?
Không nên. Việc nới quyền chỉ giấu cảnh báo trên máy bạn chứ không sửa lỗi, và khách của bạn vẫn thấy trang bị chặn. Hãy sửa từ gốc bằng cách chuyển tài nguyên sang HTTPS.
Vì sao trang vẫn mất khoá dù tôi đã cài SSL?
SSL chỉ bảo đảm phần HTML chính đi qua HTTPS. Chỉ cần một ảnh hoặc một tệp CSS còn nhúng bằng http:// là đủ khiến trình duyệt hạ chỉ báo bảo mật. Phải dọn hết tài nguyên HTTP thì khoá mới trở lại.