30/10/18

Hướng dẫn sửa lỗi SSL trong WordPress một cách đơn giản.

SSL (HTTPS) ngày càng trở nên phổ biến sau khi Google công bố họ sẽ ưu tiên các blog/ website sử dụng giao thức HTTPS trên bảng xếp hạng kết quả tìm kiếm. Trong WordPress, các bạn có thể cài đặt SSL một cách dễ dàng với sự trợ giúp của các plugin như WordPress HTTPS (SSL) hay Really Simple SSL. Tuy nhiên, chúng chưa thực sự “hoàn hảo” dẫn đến vẫn còn tồn tại một số lỗi SSL. Cụ thể là nhiều thành phần vẫn chưa thực sự hoạt động trên giao thức HTTPS khiến cho trình duyệt web không hiển thị biểu tượng ổ khóa màu xanh và dòng chữ “Secure” (bảo mật).

Điều này có thể khiến cho blog/ website của bạn kém an toàn và giảm mức độ uy tín trong mắt khách hàng. Đừng quá lo lắng, hôm nay, tôi sẽ hướng dẫn cho các bạn cách sửa lỗi SSL trong WordPress một cách đơn giản và nhanh chóng, bất cứ ai cũng có thể tự làm được.

Nguyên nhân khiến trình duyệt web không hiển thị ổ khóa bảo mật

Toàn bộ các file tĩnh trên website của bạn (JS, CSS, hình ảnh, web font…) chưa hoạt động trên giao thức HTTPS, đó chính là nguyên nhân khiến cho trình duyệt web không hiển thị ổ khóa bảo mật trên thanh địa chỉ.

Để kiểm tra xem những file nào đang chạy giao thức HTTP kém bảo mật, trên trình duyệt Google Chrome, các bạn click chuột phải vào giao diện website, chọn Inspect (hoặc bấm phím F12) rồi chọn tiếp tab Console. Danh sách các file gây lỗi SSL sẽ được bắt đầu bằng cảnh báo “Mixed Content” tương tự như hình bên dưới:


Nếu các file này được load từ website khác (không hỗ trợ HTTPS), cách duy nhất là tìm kiếm và loại bỏ chúng hoặc thay thế bằng một file khác tương đương được tải từ website của bạn với giao thức HTTPS.

Nếu các file này được load từ website của bạn, hãy tham khảo bài viết “Cài HTTPS cho WordPress trong nháy mắt với Really Simple SSL” để sửa lỗi SSL một cách nhanh chóng.

Ngoài ra, các bạn còn có thể sử dụng plugin SSL Insecure Content Fixer để xử lý vấn đề theo một phương pháp đơn giản hơn.

Sửa lỗi SSL trong WordPress với SSL Insecure Content Fixer

1. Đầu tiên, các bạn cần phải cài đặt và kích hoạt plugin SSL Insecure Content Fixer.


2. Tiếp theo, truy cập vào Settings => SSL Insecure Content. Tại đây, các bạn sẽ thấy một số tùy chọn như sau:


Trong đó:

Fix insecure content: lựa chọn level (cấp độ) sửa lỗi nội dung không bảo mật, được sắp xếp từ thấp đến cao: Off < Simple < Content < Widgets < Capture. Các bạn nên thử bắt đầu từ mức độ Simple, cho đến khi các lỗi SSL được khắc phục hoàn toàn (trình duyệt hiển thị ổ khóa màu xanh, không bị tam giác màu vàng trên ổ khóa nữa).

Fixes for specific plugins and themes: chỉ lựa chọn nếu website của bạn sử dụng các plugin như WooCommerce. Nếu không, hãy để trống cả 2 tùy chọn trong mục này.

HTTPS detection: lựa chọn cách WordPress phát hiện một trang được tải thông qua giao thức HTTPS (standard WordPress function – tính năng mặc định của WordPress; 

HTTP_X_FORWARDED_PROTO – lựa chọn nếu bạn có sử dụng load balancer, reverse proxy, NginX; HTTP_X_FORWARDED_SSL – lựa chọn nếu bạn sử dụng reverse proxy; HTTP_CF_VISITOR – lựa chọn nếu bạn sử dụng Flexible SSL của CloudFlare; unable to detect HTTPS – không phát hiện HTTPS).

Click vào nút Save Changes để lưu lại các thiết lập.

3. Truy cập website của bạn và kiểm tra xem các lỗi SSL đã được khắc phục triệt để chưa nhé. Chúc các bạn thành công!

Cài HTTPS cho WordPress với plugin Really Simple SSL

Lưu ý: bạn cần phải cài đặt thành công SSL lên hosting trước khi có thể cài đặt giao thức HTTPS lên website WordPress.

1. Đầu tiên, các bạn cần cài đặt và kích hoạt plugin Really Simple SSL.



2. Tiếp theo, các bạn truy cập vào Settings => SSL và kiểm tra xem trạng thái của plugin đã đạt đủ 4 dấu tick màu xanh hay chưa. Nếu rồi thì có nghĩa là site của bạn đã vận hành hoàn hảo trên giao thức HTTPS.


Riêng đối với HTTP Stric Transport Security (HSTS), các bạn có thể tham khảo bài viết “Cấu hình HSTS cho blog/ website thông qua file .htaccess” để cấu hình mà không cần nâng cấp lên bản trả phí của plugin Really Simple SSL.

3. Nếu vẫn có lỗi khiến cho trình duyệt không hiện ổ khóa màu xanh, hãy chuyển qua tab Settings và kiểm tra xem 2 mục Auto replace mixed content và Enable Javascript redirection to SSL đã được tick hay chưa.



Ngoài ra:

Nếu bạn sử dụng web server NginX hoặc các web server không hỗ trợ file .htaccess, hãy tick thêm vào mục Enable WordPress 301 redirection to SSL để redirect bằng tính năng redirection của WordPress.

Nếu bạn sử dụng web server Apache hoặc LiteSpeed (có hỗ trợ file .htaccess), hãy tick thêm vào mục Enable 301 .htaccess redirect để chèn code redirect vào file .htaccess.
Các bạn cũng có thể tick đồng thời cả 2 mục này. Click vào nút Save để lưu lại và kiểm tra kết quả. Chúc các bạn thành công!

Sau khi cài HTTPS cho website, đừng quên truy cập Google Search Console và Google Analytics để khai báo lại URL với giao thức mới nhé. Tham khảo link ở phần đầu bài viết này để biết thêm chi tiết.

Các bước cài đặt chứng chỉ số SSL miễn phí Let's Encrypt trên DirectAdmin bắt buộc phải làm

Hiện nay Let's Encrypt đang cung cấp chứng chỉ SSL miễn phí duy nhất trên thế giới.

1. Các bước chuẩn bị

Đầu tiên Quý Khách cần có 1 Hosting, tên miền và source code. Có thể là website đang sử dụng hoặc lập mới website.
Thông tin tài khoản Hosting và tên miền sẽ cần đến cho các thao tác tiếp theo



2. Kích hoạt SSL miễn phí Let's Encrypt trên Hosting DirectAdmin

Các Quý Khách đăng nhập vào Hosting sau đó click Home => Domain Setup => click chọn domain đang cần cài đặt SSL. Quan trọng nhất Quý Khách phải tích chọn 2 ô như hình dưới đây:
Secure SSL và Use a symbolic link from private_html to public_html - allows for same data in http and https Sau đó click "Save"


Kích hoạt SSL miễn phí Let's Encrypt trên Hosting DirectAdmin

Như vậy là Quý Khách đã cài đặt để Hosting hiểu rằng Quý Khách đang muốn sử dụng giao thức https thay vì http. Và dữ liệu https thay vì lấy trong thư mục private_html thì lấy luôn từ public_html

Kích hoạt SSL Let's Encrypt miễn phí trên Hosting Directadmin

Sau khi đăng nhập Hosting DirectAdmin Quý Khách hãy click "SSL Certificates" trong mục advanced features (Gần phía cuối bên trái)

Tích chọn ô 1 và 2 như ảnh dưới đây. Mục 3 điền email của Quý Khách (Không cần email theo tên miền đang kích hoạt SSL - mail bất kỳ của Quý Khách). Key Size (bits), Certificate Type chọn như hình dưới đây. Sau đó kéo chuột xuống dưới và click save.

Free & automatic certificate from Let's Encrypt

=> Như vậy việc cài đặt SSL đã hoàn tất. Quý Khách truy cập https sẽ không bị cảnh báo trình duyệt nữa. Tuy nhiên biểu tượng https có thể không là màu xanh, Truy cập http, https đều được (Như vậy không tốt cho SEO) Vì Vậy Quý khách hãy tiếp thao tác số 4 nhé.


4. Direct domain www sang non-www giao thức https bằng file .htaccess

Thêm vào đoạn sau: (Thay abc.vn bằng tên miền của Quý Khách)

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}:443%{REQUEST_URI} [END]

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^www.abc.vn [NC]
RewriteRule ^(.*)$ https://abc.vn/$1 [L,R=301]

RewriteEngine on
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?option=$1 [L,QSA]


=> Như vậy là hoàn tất Việc cài đặt SSL cho domain của Quý Khách rồi đó.

======================================
Cài HTTPS cho WordPress trong nháy mắt với Plugin in Really Simple SSL

Fix mixed content when migrating site to HTTPS (tutorial)==> Cài plugin (Better Search replace) hoặc vào database edit lại