Chủ đề ‘Lỗi Mixed-Content HTTPS’ – Với phiên bản trình duyệt Chrome 62 (10/2017) sắp ra mắt, Google sẽ phát cảnh báo thiếu an toàn ngay trên trình duyệt đối với các website không sử dụng giao thức HTTPS SSL. Kèm theo đó Google Search cũng đánh dấu việc ưu tiên mức độ SEO đối với các site sử dụng giao thức HTTPS cao hơn so với các site giao thức HTTP. Vì vậy mà nhu cầu chuyển đổi giao thức từ HTTP sang HTTPS đang khá là nhiều.
Việc chuyển đổi sang HTTPS với các thao tác hướng dẫn như mua chứng chỉ số SSL hay xài SSL Free Let’s Encrypt, cấu hình SSL trên Hosting/Web Server,.. đã được bàn nhiều. Nếu bạn thực hiện tốt thì không có vấn đề gì cả, nhưng vẫn sẽ có những trường hợp bị dính một lỗi rất kinh điển mang tên Mixed-Content khi chuyển đổi website sang giao thức HTTPS.
Vậy Mixed-Content là gì ? Nhận biết lỗi này như thế nào ? Xử lý ra sao ? Các bạn hãy cùng đón đọc bài viết này nhé.
Contents
Tình huống lỗi thực tế khi website chuyển đổi từ HTTP sang HTTPS
Khi website chuyển đổi từ HTTP sang HTTPS SSL thì xuất hiện thông báo “website của bạn không đáng tin cậy” mặc dù các cấu hình SSL phía Web Server, chứng chỉ SSL đang sử dụng, ssl certificate chain,… đều ok hết. Sau khi bạn kiểm tra một lúc thì phát hiện một số đường dẫn URL content resource website khi load (F12 Developer Chrome) không có HTTPS nên bị cảnh báo.
Và lỗi này được gọi là Mixed-Content. Với một cách gọi tóm gọn thì lỗi này nghĩa là : trang web (web page) bạn truy cập hiện đang tải những tài nguyên tĩnh (hình ảnh, css, js,..) hoặc tài nguyên ngoài website (external font, js quảng cáo,…) có chứa URL không phải HTTPS.
Vậy chúng ta cùng tìm hiểu về lỗi Mixed-Content cũng như cách khắc phục lỗi này nhé.
Hình ảnh ví dụ về lỗi mixed content
1. Mixed-content là gì ?
Như bạn biết thì mỗi khi người dùng truy cập một trang web của 1 website. Thì trình duyệt web sẽ thực hiện gửi Request HTTP đến website, phía dưới backend sẽ xử lý request và trả về nội dung .html cho trình duyệt. Sau khi trình duyệt nhận được nội dung .html có chứa các thông tin đường dẫn tài nguyên như css, hình ảnh (image), javascript,… sẽ tự động được trình duyệt web đi tải chúng về để đầy đủ tài nguyên tiến hành render giao diện trang web cho bạn.
Mixed-content là một vấn đề xảy ra khi có sự trộn lẫn 1 vài link liên kết tài nguyên giữa 2 giao thức HTTPS (secure) và HTTP (insecure) trong nội dung .html mà website trả về khi người dùng truy xuất 1 trang cụ thể. Khi ấy trình duyệt sẽ cảnh báo truy cập không đáng tin cậy, nếu tiếp tục truy cập sẽ thấy mặc dù site vẫn hoạt động với giao thức HTTPS nhưng không hiện khóa xanh nữa thay vào đó là màu xám hoặc màu đỏ choét.
Các link liên kết bị trộn lẫn này có thể là link liên kết cứng (hình ảnh, js, css,..), plugin của bên thứ 3 hoặc liên kết bên ngoài với giao thức không an toàn HTTP. Một website chỉ hiện khóa xanh khi được cài chứng chỉ SSL và nội dung website đã thay đổi các nội dung tuân thủ theo giao thức HTTPS. Dù chỉ 1 file hình ảnh, hay audio hoặc chỉ 1 liên kết bên ngoài chạy với liên kết HTTP thì lập tức sẽ mất khóa xanh ngay.
Lưu ý:
– Do lỗi Mixed-content phụ thuộc vào nội dung .html có chứa link liên kết tài nguyên không phải HTTPS. Nên website của bạn sẽ có trường hợp trang bài viết này bị lỗi Mixed-Content nhưng trang khác hay trang chủ lại không bị lỗi Mixed-Content.
Mixed-content có nguy hiểm không ?
Mã nguồn chạy với giao thức HTTPS có thể hạn chế được các cuộc tấn công cơ bản như sniffers, man-in-middle. Tuy nhiên khi bị lỗi mixed-content, những trang web này sẽ trở nên thiếu an toàn hơn và khá dễ bị kẻ tấn công khai thác phần nào.
Đó là chưa kể khi site của bạn đã có lượng truy cập nhất định, khi người truy cập đi đến site của bạn có thể họ sẽ có 2 phản ứng sau:
- Họ chú ý tới cảnh báo bảo mật, nhưng họ vẫn tiếp tục truy cập không an toàn. Điều này thật sự nguy hiểm nếu site của bạn là 1 trang thương mại điện tử hoặc trang giao dịch.
- Họ chú ý tới cảnh báo bảo mật và thoát hẳn trang của bạn luôn vì cho rằng bạn không làm tốt khâu bảo mật mã nguồn nên mới để lỗi trên xuất hiện. Thế là mất đi một khách hàng, điều này khá là bất lợi cho việc kinh doanh phải không nào?
Link liên kết tài nguyên bên thứ 3
Thường nếu bạn có gắn các đoạn mã javascript của bên site khác để quảng cáo, theo dõi traffic, gắn banner,… và chúng cũng có thể gây ra lỗi Mixed-content.
Đối với các link liên kết bạn lấy từ bên site thứ 3 làm site bạn lỗi Mixed-content bạn có thể sửa theo các cách sau:
- Sử dụng một liên kết ngoài khác hỗ trợ HTTPS.
- Đưa liên kết này trực tiếp lên máy chủ chạy mã nguồn của bạn bằng cách up nội dung của liên kết vào mã nguồn.
- Nếu không làm được 2 cách trên thì xóa hẳn liên kết đó khỏi mã nguồn của bạn luôn.
2. Các loại Mixed-content
Có 2 loại Mixed-Content: active mixed-content (mixed scripting) và passive mixed-content (display content). Sự khác biệt của chúng nằm ở mức độ nguy hiểm khi content được rewrite như một phần của man-in-middle attack.
2.1 Passive Mixed-content
Lỗi xảy ra khi một trang website đang chạy giao thức HTTPS tải các link file tài nguyên chỉ có URL HTTP (non-HTTPS) như hình ảnh (image), audio, video,.. Với lỗi này không thực sự phá vỡ cấu trúc bảo mật của site, bằng chứng là khi bạn truy cập vẫn sẽ load được site nhưng trình duyệt hiện khóa xám thay vì khóa xanh. Nội dung của passive mixed-content là những liên kết hiển thị nội dung cố định không tương tác với các thành phần tạo định dạng hay hành vi còn lại của mã nguồn. Điều này cũng sẽ giới hạn mức độ nguy hiểm khi kẻ xấu có thể thực hiện. Với Passive mixed-content mối đe dọa trang có thể chứa nội dung giả mạo hoặc cokkies của người dùng bị đánh cấp.
Loại lỗi này thường bị ở những thẻ HTML có chứa link không phải giao thức HTTPS sau:
- <img> (“src” attribute)
- <audio> (“src” attribute)
- <video> (“src” attribute)
- <object> subresources
ví dụ passive mixed content
2.2 Active Mixed-content
Lỗi xảy ra khi một trang HTTPS tải các link tài nguyên/file script thông qua giao thức HTTP, điều này phá vỡ cấu trúc bảo mật và trình duyệt lập tức cảnh báo bạn truy cập không an toàn ngay.
Lỗi Active Mixed-content nguy hiểm hơn Passive Mixed-content rất nhiều vì nó có quyền truy cập vào tất cả các phần của DOM (Document Object Model). Với man-in-middle, attacker có thể lấy được request ở HTTP và viết lại response đi kèm với các file JavaScript mã độc dẫn đến việc bị đánh cắp thông tin nhạy cảm, lừa đảo, chuyển hướng nội dung đến các trang mã độc …
Loại lỗi này thường bị ở những thẻ HTML có chứa link không phải giao thức HTTPS sau. Thường gặp ở cả các link liên kết bên thứ 3.:
- <script> (“src” attribute)
- <link> (“href” attribute) (CSS included)
- <iframe> (“src” attribute)
- XMLHttpRequest requests
- CSS where a url is used (e.g. @font-face, background image, etc)
- <object> (“data” attribute)
ví dụ active mixed content
3. Kiểm tra và tìm lỗi Mixed-content
Có rất nhiều công cụ online để kiểm tra lỗi Mixed-Content, ở đây mình liệt kê vài công cụ phổ biến.
3.1 Why No Padlock
Why No Padlock? là một web check online vấn đề HTTPS khá tiện, bạn chỉ cần điền URL vào box “Secure URL”. Bấm check và chờ khoảng vài mươi giây là sẽ có kết quả, trang check này sẽ list ra các link còn đang sử dụng HTTP, như kết quả mình test thử bên dưới.
3.2 SSL Check
SSL check cũng tương tự vậy, đây cũng là 1 trang kiểm tra HTTPS online. Kết quả mình thử nghiệm bên dưới.
3.3 Chrome Developer Tools
Chrome Dev Tools là công cụ có lẽ được nhiều người sử dụng nhất và bản thân mình cũng sử dụng nó rất nhiều để debug lỗi liên quan mã nguồn.
Sử dụng rất đơn giản, bạn sử dụng trình duyệt Chrome để truy cập site lỗi, bạn bấm F12 hoặc tổ hợp phím Ctrl + Shift + I. Chuyển qua tab console sẽ thấy lỗi hiển thị ngay.
4. Hướng dẫn xử lý lỗi Mixed-content
Do hiện tại phần đông người dùng Internet sử dụng Web cá nhân là nền tảng WordPress, nên bài viết sẽ tập trung hướng xử lý cho Website WordPress cũng như hướng xử lý chung cho các website nền tảng khác.
4.1 CMS WordPress
Với mã nguồn thông dụng như WordPress thật đơn giản để khắc phục vấn đề này, bạn làm theo 4 cách sau đảm bảo web bạn sẽ khắc phục được lỗi.
Cách 1: Định nghĩa lại giá trị cấu hình wordpress address và site address trong : Setting > Genaral
hoặc là cấu hình lại giá trị thông tin tương ứng trong file wp-config.php .
define('WP_HOME', 'https://domain.com');
define('WP_SITEURL', 'https://domain.com');
Cách 2: phần này là phụ, bạn có thể buộc trang đăng nhập theo chuẩn HTTPS. Thêm đoạn code cấu hình sau vào file wp-config.php .
define('FORCE_SSL_ADMIN', true);
Cách 3: Bạn cài thêm 2 plugin sau vào, nó sẽ tự động fix các liên kết tài nguyên dạng HTTP sang HTTPS theo định nghĩa giá trị WP_HOME và WP_SITEURL ở trên khi xuất .html cho bạn mà không cần bạn phải thao tác gì thêm.
Logo quen thuộc của plugin Really Simple SSL
Còn đây là log của plugin SSL Insecure Content Fixer
Cách 4: Nếu cả 3 cách trên vẫn không được buộc các bạn phải sửa link trực tiếp trong cơ sở dữ liệu. Để làm cách này trước tiên bạn phải backup lại database đã nhé vì lệnh mình hướng dẫn sẽ tương tác trực tiêp vào database nên phải backup cho chắc.
Các bạn có thể sử dụng plugin backWPup để backup (nếu bạn quen plugin khác thì cứ xài nhé): https://vi.wordpress.org/plugins/backwpup/
hoặc dump database ra nếu bạn đang sử dụng VPS với cú pháp đơn giản:
# mysqldump -u <user_name> -p <database_name> > data.sql
Tiếp đến các bạn hãy tải plugin ARI Adminer về :https://wordpress.org/plugins/ari-adminer/
Plugin này cho phép bạn tương tác trực tiếp đến cơ sở dữ liệu mà không cần đến phpMyAdmin hay giao diện dòng lệnh trên OS Linux của bạn. Rất thích hợp với người dùng cơ bản và quản trị viên quản trị web.
Logo của ARI Adminer plugin
Đi đến giao diện adminer, vào phần Câu lệnh SQL chạy các lệnh sau:
UPDATE wp_options SET option_value = replace(option_value, 'http://domain.com', 'https://domain.com') WHERE option_name = 'home' OR option_name = 'siteurl'; UPDATE wp_posts SET guid = replace(guid, 'http://domain.com','https://domain.com'); UPDATE wp_posts SET post_content = replace(post_content, 'http://domain.com', 'https://domain.com'); UPDATE wp_postmeta SET meta_value = replace(meta_value,'http://domain.com','https://domain.com');
Giao diện thực hiện lệnh của ARI Adminer
Chú thích:
– domain.com : là tên miền của bạn sẽ được thay thế vào nhé.
Lần lượt chạy các lệnh còn lại và kiểm tra thành quả. Bạn cũng có thể thực hiện được trên giao diện phpMyAdmin nếu muốn.
Giao diện thực hiện lệnh của phpMyAdmin
Lưu ý:
– Cách này không có tác dụng đối với các link liên kết tài nguyên bên ngoài tên miền website của bạn. Ví dụ như link quảng cáo, hình ảnh, javascript, thống kê,.. của dịch vụ thứ 3 sử dụng giao thức HTTP.
4.2 Website CMS khác
Với các CMS khác hướng xử lý chung có thể hướng dẫn là nếu phát hiện thấy trang post nào bị lỗi Mixed-Content. Thì hãy kiểm tra link liên kết tài nguyên nào đang sử dụng giao thức HTTP như các bước trên, sau đó thay thế chúng bằng HTTPS trong source code hay CSDL.
Ví dụ ở trình duyệt Chrome bạn mở Chrom Developer Tools, Ctrl + U tab mới mở ra, bạn bấm tiếp Ctrl + F và bạn tìm kiếm với 2 nội dung sau:
src=”http: (tìm kiếm với ngoặc kép) src=’http: (tìm kiếm với dấu ngoặc đơn)
Dựa vào kết quả bạn mở source ra sửa lại, xong trang này rồi tới trang khác lần lượt đến khi fix được đầy đủ các link liên kết hết HTTP, khóa xanh xuất hiện lại thì thôi.
Tổng kết thì với nội dung trên bạn đã có thể hiểu được lỗi Mixed-Content là gì khi đang chuyển đổi giao thức HTTP sang HTTPS cho website của bạn rồi phải không ? Và khi website gặp vấn đề bị cảnh báo “không an toàn” và bạn phát hiện cũng do lỗi ‘Mixed-Content’ thì hy vọng bài viết đã cung cấp được cách thức để bạn tự xử lý vấn đề trên. Chúc các bạn thành công.
Quách Chí Cường (VINADATA.VN)
