Hôm nay mình làm dịch vụ Cài đặt SSL cho một khách hàng nhưng gặp phải vấn đề thanh địa chỉ chưa hiển thị https màu xanh. Chắc chắn nhiều bạn trên Học VPS cũng từng gặp phải tình trạng tương tự, nếu chưa biết cách xử lý thì tham khảo bài viết này nhé.

Cụ thể HTTPS chưa hiện màu xanh là như thế này đây, nó có màu xám rất khó chịu:

Nguyên nhân xảy ra tình huống này là do website đã sử dụng HTTPS, tuy nhiên xuất hiện thành phần nào đó trên site vẫn đang sử dụng link HTTP, có thể là link hình ảnh, css, js…  Google Chrome gọi lỗi này là Resources – mixed content. Để xử lý các bạn cần chuyển hết link đó về HTTPS là xong.

Một số website hỗ trợ song song cả 2 loại link HTTP và HTTPS, lúc này bạn chỉ cần đơn giản replace HTTP thành HTTPS là ok. Ví dụ link của imgur.com, Google Fonts…

Trong trường hợp link HTTPS không hoạt động, bạn hãy upload những nội dung đó lên website đang chạy để có link HTTPS thay thế.

Giờ mình sẽ hướng dẫn các bạn cách tìm kiếm tất cả những thành phần ảnh hưởng khiến website chưa hiển thị xanh hoàn hảo.

1. Mở cửa sổ Developer Tools

Bạn truy cập vào website đang bị lỗi HTTPS, nhấn phím F12 (trên Windows/Linux) hoặc Command+Option+I (trên macOS) để mở Chrome Developer Tools, chuyển sang tab Security.

Thông báo lỗi từ Chrome sẽ tương tự như ảnh bên dưới:

Ở bên trái có thông báo Reload to view details, bạn hãy refresh trang giữ nguyên Developer Tools như vậy.

2. Tìm kiếm thành phần ảnh hưởng HTTPS

Sau khi reload xong, toàn bộ yếu tố gây ra lỗi mixed content sẽ được hiển thị, tương tự như sau:

Ở phía bên trái:

  • Main origin: Domain site bạn
  • Non-secure origins: Domain không sử dụng HTTPS
  • Secure origins: Domain đã sử dụng HTTPS

Nhiệm vụ của chúng ta là fix tất cả link có domain nằm trong Non-secure origins.

3. Thay thể link HTTP thành HTTPS

Click vào link View 1 request in Network Panel để hiển thị đường dẫn chi tiết. Bạn sẽ được chuyển qua tab Network.

Như hình bên trên, chỉ vì một file ảnh demo-1.jpg vẫn đang dùng link http nên ảnh hưởng cả website không hiển thị địa chỉ màu xanh.

Bạn hãy truy cập vào đường dẫn để xem file này là gì, nằm cụ thể ở đâu trên website để có phương án thay thế. Mình thường dùng những cách sau:

  • Sử dụng plugin Better Search Replace của WordPress để replace toàn bộ table của database.
  • Chỉnh lại trong phần Options của Theme mà website đang sử dụng.
  • Tìm link trong thư mục themes của website, cái này bị hard-code, cần tìm và sửa lại thủ công.

Thực tế khi mình cài đặt, trong 100 website, đa phần chỉ cần chỉnh sửa options của theme là giải quyết được vấn đề. Một số trường hợp khó nhằn hơn link bị hard-code trong những file .PHP của themes thì dùng lệnh grep với option recursive để search ra file cụ thể. Ví dụ:

grep -r "http://chonmuachuan.com" /home/chonmuachuan.com/public_html/wp-content/themes/

Website demo trong bài này khá đơn giản khi chỉ còn 1 lỗi mà thôi, sau khi chỉnh sửa xong bạn sẽ nhận được link màu xanh hoàn hảo như thế này:

Đơn giản vậy thôi, mình hi vọng bài viết sẽ có ích cho nhiều bạn. Trong trường hợp bạn không rành kỹ thuật chỉnh sửa, với mã nguồn WP có thể sử dụng plugin Really Simple SSL. Tuy vậy, tự sửa code vẫn là giải pháp tối ưu nhất.

Nếu có thêm thủ thuật nào thì hãy comment chia sẻ bên dưới nha.

Comment của bạn

Your email address will not be published. Required fields are marked *

43 Comments

  1. Trần Tuyến 1 comment

    he, mãi mới làm được, trước toàn để http. Nghe nói là https thì SEO tốt hơn 😀

  2. Tuấn Anh 1 comment

    Hi , mình check f12 web thấy báo như này mà vẫn không thấy màu xanh cho chữ https :

    This page is secure (valid HTTPS).
    Certificate – valid and trusted
    The connection to this site is using a valid, trusted server certificate issued by Let’s Encrypt Authority X3.
    View certificate
    Connection – secure (strong TLS 1.2)
    The connection to this site is encrypted and authenticated using TLS 1.2 (a strong protocol), ECDHE_RSA with X25519 (a strong key exchange), and AES_256_GCM (a strong cipher).
    Resources – all served securely
    All resources on this page are served securely.

    1. Việt Phương Moderator

      Phiên bản mới Chrome bỏ màu xanh đỏ rồi. Thông báo này là ok
      Resources – all served securely
      All resources on this page are served securely.

  3. anh phan 1 comment

    Bạn ơi cho mình hỏi là khi mình làm theo cách hướng dẫn của bạn, khi f12 thì mình thấy lỗi 304 thì phải xử lí sao ạ? Cảm ơn phần chia sẻ của bạn

    1. Việt Phương Moderator

      Bạn làm như thế nào? Và chụp ảnh màn hình mình xem chỗ 304

  4. iz4web 2 comment

    Hôm trước mình có mua con VPS cảu bên nhân hòa. loay hoay một hồi cài SSL mà không được nó cứ bắt phải nhập active key. điên ruột gọi cho hỗ trợ của bọn nó thì bảo là cái SSL pahri mua thêm 150k 1 domain. Bực cả mình trong khi núc mua mình đã xem rất kỹ thông tin là có thể cài SSL free. Thế là hủy dịch vụ luôn. chuyển về dùng host thường cho lành. đỡ mệt người.

    1. Việt Phương Moderator

      Oh, hàng miễn phí Let’s Encrypt cài đặt cũng mất tiền hả bạn?

    1. Việt Phương Moderator

      Việc ý nằm ở cấu hình webserver – Nginx Conf của bạn nhé. Bạn để redirect www sang non-www còn non-www thì show document root

  5. Bao Nam 5 comment

    Admin ơi mình cài let’s encrypt lên server apache, nhưng không hiểu sao chỉ cái virtual đầu tiên là chạy, mình thử đổi cái aaa lên trước abc thì aaa xanh, còn để như bên dưới thì abc xanh. Admin giúp mình với, cám ơn bạn nhiều.

    Cấu hình này mình để trong /etc/httpd/conf.d/ssl.conf

    NameVirtualHost *:443

    ServerName abc.com.vn:443
    SSLEngine on
    SSLCertificateFile /etc/httpd/ssl/abc.com.vn.crt
    SSLCertificateKeyFile /etc/httpd/ssl/abc.com.vn.key
    SSLCertificateChainFile /etc/httpd/ssl/abc.com.vn.ca.crt
    ServerAdmin namnb@aaa.com
    SetEnvIf X-Forwarded-For “^.*\..*\..*\..*” forwarded
    DocumentRoot /var/www/html/abc

    Options +Includes -Indexes
    AllowOverride All

    ServerName aaa.com:443
    SSLEngine on
    SSLCertificateFile /var/www/html/aaa/sslforfree/certificate.crt
    SSLCertificateKeyFile /var/www/html/aaa/sslforfree/private.key
    SSLCertificateChainFile /var/www/html/aaa/sslforfree/ca_bundle.crt
    ServerAdmin namnb@aaa.com
    SetEnvIf X-Forwarded-For “^.*\..*\..*\..*” forwarded
    DocumentRoot /var/www/html/aaa

    Options +Includes -Indexes
    AllowOverride All

      1. Bao Nam 5 comment

        tks ad trả lời, mình để trong block đó chứ, để trống trơn vậy file config bị lỗi đâu start apache được, tại mình copy bỏ lên comment thì bị lọc mất thôi, chứ mình copy vào comment đủ hết. Ad có bao giờ bị virtualhost mà cái đầu thì được, cái 2 thì không chạy như mình bao giờ không? giúp mình với 🙁

          1. Bao Nam 5 comment

            đây nè ad => https://pastebin.com/NVU0ZsPB

            domain 1 hiện tại xanh bình thường, domain 2 thì vẫn chạy nhưng https không xanh, nếu đổi vị trí 1 thành 2, 2 thành 1 trong vhost thì domain 2 lại xanh, còn 1 thì không xanh.
            check bằng ssl check online thì dường như ssl chỉ nhận được chứng chỉ trong block domain để đầu. Tks ad.

          2. Việt Phương Moderator

            Theo check thì domain 2 đang dùng chứng chỉ của domain 1 chứ không phải của bản thân nó.
            Bạn kiểm tra lại file chứng chỉ cho domain 2 chưa? Nhìn thì bạn cài SSLfree, sao không dùng Let’s?
            Và có vấn đề này mình thấy lạ là nếu bạn đổi 2 lên trên thì 2 xanh 1 không xanh?

          3. Bao Nam 5 comment

            vì server cũ Centos 5 nên không dùng let’s encrypt được.
            mình chuyển domain 2 lên đầu thì domain xanh, chứng tỏ chứng nhận ssl đúng, thư mục web vhost nó cũng chạy đúng nhưng cái ssl thì lại không nhận, mình chẳng biết tại sao nữa, huhu 🙁

          4. Bao Nam 5 comment

            nếu bạn sửa được mình cho bạn teamviewer vào sửa giúp mình, hic

  6. Nguyễn Hoàng Duy 8 comment

    Bạn ơi, cho mình hỏi là mình mắc lỗi y hệt ví dụ của bạn. Mình cũng sử dụng plugin Better Search Replace của WordPress để replace toàn bộ table của database nhưng không thành công và wordpress khi Thêm gói mở rộng thì báo lỗi “Đã sẩy ra một lỗi bất ngờ. Có vấn đề với WordPress.org hoặc cấu hình máy chủ này. Nếu bạn tiếp tục gặp lỗi, hãy vào diễn đàn hỗ trợ.” .
    Website của mình là https://khungtreotivi.com

        1. Việt Phương Moderator

          Bạn deactive Really Simple SSL đi xem được không, chứ lỗi này mô tả mơ hồ lắm không rõ ràng.
          Bạn sẽ cần phải kiểm tra tất cả mọi thứ

  7. trọng đức 6 comment

    Mình sử dụng theme greenmart trên evanto tặng miễn phí tháng 4 này.
    Khi cái SSL xong thi bị lỗi chỗ file logo.png
    Bạn chỉ mình cách xử lý trường hợp này đc không?
    bạn test dùm mình trên web: https://hongthu.com mình đặt trên OVH mua đợt khuyến mãi 2.5$ này.

      1. trongduc 6 comment

        Mình thử đủ các kiểu đều không được. chỉ bị mỗi cái logo.png là bị. Dùng template: Greenmart mới được canhme giới thiệu.
        Cuối cùng phải dùng plugin easy SSL để thời gian làm việc khác nữa.

  8. xsim 1 comment

    Bạn có thể cho mình hướng dẫn xử lý trước và sau khi đăng ký SSL để không ảnh hưởng xấu cho SEO ko

    1. Việt Phương Moderator

      2 cái của bạn đều trong theme. Bạn dùng shared host nên không thể dùng lệnh tìm nội dung trong file rồi.
      Cái icon thì mình nghi trong js còn lettalk thì bạn check footer chưa?

    1. Luân Trần Admin

      Dùng plugin Simple SSL thì đơn giản quá, mình thường cài không dùng plugin, đỡ nặng site.

      1. Trần Phượng 9 comment

        Nếu mà code chuẩn thì chỉ cần sửa lại options là xong còn nếu mà chơi tất đường dẫn tuyệt đối thì mất công Ctrl+H thôi.

        1. Việt Phương Moderator

          Một số theme WP mình cũng gặp tình trạng đường dẫn tuyệt đối nên sẽ khá mất thời gian cho việc tìm và sửa vấn đề này 🙂

  9. Thang Nguyen 2 comment

    Rất cảm ơn các bạn đã hỗ trợ mình. Dịch vụ rất tốt, nếu mai mốt có nhu cầu mình sẽ tiếp tục liên hệ với bên bạn.

  10. NguyenTung 25 comment

    Chào bác Luân,

    Bác nhớ đợi thêm thông tin em gửi và giúp em với bác nhé