rel=”noopener” trong WordPress là gì?

Giới thiệu về Thuộc tính rel=”noopener” trong WordPress

Khi bạn thêm một liên kết vào trang web WordPress của mình, bạn có thể đã thấy hoặc nghe nói về thuộc tính rel="noopener". Thuộc tính này là một phần quan trọng của bảo mật web và có tác động đáng kể đến trải nghiệm người dùng. Bài viết này sẽ giải thích chi tiết về rel="noopener", tại sao nó quan trọng, cách nó hoạt động và cách sử dụng nó trong WordPress.

“noopener” là gì và Tại sao Nó Quan trọng?

Thuộc tính rel="noopener" là một thuộc tính HTML được sử dụng trong các thẻ <a> (liên kết). Nó giúp tăng cường bảo mật khi bạn liên kết đến một trang web bên ngoài, đặc biệt là khi trang web đó được mở trong một tab hoặc cửa sổ mới.

Vấn đề mà rel="noopener" giải quyết là một lỗ hổng bảo mật được gọi là “reverse tabnabbing”. Nếu không có rel="noopener", trang web được liên kết có thể truy cập và kiểm soát một phần của trang web gốc thông qua đối tượng window.opener trong JavaScript. Điều này có thể dẫn đến những hành vi độc hại như chuyển hướng người dùng đến một trang đăng nhập giả mạo để đánh cắp thông tin tài khoản (phishing), thay đổi nội dung trang web, hoặc thậm chí cài đặt phần mềm độc hại.

Hãy tưởng tượng bạn có một trang web đáng tin cậy và bạn liên kết đến một trang web bên ngoài. Nếu trang web bên ngoài đó độc hại, nó có thể sử dụng JavaScript để truy cập vào đối tượng window.opener của trang web bạn, và sau đó chuyển hướng trang web của bạn đến một trang lừa đảo. Người dùng của bạn, tin tưởng vào trang web của bạn, có thể sẽ nhập thông tin đăng nhập của họ vào trang lừa đảo này, và thông tin đó sẽ bị đánh cắp.

rel="noopener" ngăn chặn điều này bằng cách cắt đứt liên kết giữa trang web của bạn và trang web được liên kết. Khi bạn sử dụng rel="noopener", trang web được liên kết sẽ được mở trong một tab hoặc cửa sổ mới mà không có quyền truy cập vào đối tượng window.opener của trang web bạn.

Cách “noopener” Hoạt động

Khi bạn thêm rel="noopener" vào một liên kết, trình duyệt sẽ hiểu rằng bạn không muốn chia sẻ thông tin về trang web của bạn với trang web được liên kết. Điều này được thực hiện bằng cách:

• Ngăn chặn việc trang web được liên kết truy cập vào đối tượng window.opener của trang web bạn.
• Mở trang web được liên kết trong một tiến trình (process) riêng biệt (nếu trình duyệt hỗ trợ).

Về cơ bản, rel="noopener" giúp bảo vệ người dùng của bạn bằng cách đảm bảo rằng trang web bạn liên kết đến không thể gây hại cho trang web của bạn hoặc đánh cắp thông tin của người dùng.

“noreferrer” và “nofollow”: Các Thuộc tính Liên quan

Ngoài rel="noopener", bạn có thể gặp hai thuộc tính liên quan khác là rel="noreferrer" và rel="nofollow". Mặc dù chúng có mục đích khác nhau, chúng thường được sử dụng cùng với rel="noopener".

• rel="noreferrer": Thuộc tính này ngăn chặn việc trang web được liên kết nhận được thông tin referrer từ trang web của bạn. Thông tin referrer là URL của trang web mà người dùng đã truy cập trước khi đến trang web được liên kết. rel="noreferrer" giúp bảo vệ quyền riêng tư của người dùng.
• rel="nofollow": Thuộc tính này thông báo cho các công cụ tìm kiếm rằng bạn không “chấp thuận” trang web được liên kết. Điều này có nghĩa là bạn không muốn chuyển “link juice” (giá trị SEO) từ trang web của bạn sang trang web được liên kết. rel="nofollow" thường được sử dụng cho các liên kết đến các trang web mà bạn không hoàn toàn tin tưởng hoặc cho các liên kết quảng cáo.

Trong nhiều trường hợp, bạn có thể sử dụng cả rel="noopener" và rel="noreferrer" cùng nhau, đặc biệt là khi bạn liên kết đến một trang web mà bạn không hoàn toàn tin tưởng. Ví dụ:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Liên kết đến Example.com</a>

Tuy nhiên, lưu ý rằng rel="noopener" tự động bao gồm chức năng của rel="noreferrer" trên hầu hết các trình duyệt hiện đại khi sử dụng với target="_blank". Vì vậy, việc thêm cả hai thuộc tính có thể dư thừa.

“noopener” trong WordPress: Cách sử dụng

WordPress đã tự động thêm rel="noopener" vào các liên kết được mở trong tab mới kể từ phiên bản 4.7.4. Điều này có nghĩa là bạn thường không cần phải lo lắng về việc thêm nó một cách thủ công. Tuy nhiên, hiểu rõ cách hoạt động và cách kiểm tra là rất quan trọng.

WordPress Tự Động Thêm “noopener”

Khi bạn sử dụng trình soạn thảo WordPress (Gutenberg hoặc Classic) để tạo một liên kết và chọn tùy chọn “Mở trong tab mới”, WordPress sẽ tự động thêm thuộc tính rel="noopener" vào liên kết đó. Điều này giúp bảo vệ trang web của bạn và người dùng của bạn một cách tự động.

Kiểm tra “noopener”

Bạn có thể kiểm tra xem một liên kết có thuộc tính rel="noopener" hay không bằng cách xem mã HTML của trang web. Cách thực hiện:

• Nhấp chuột phải vào liên kết trên trang web của bạn và chọn “Kiểm tra” (Inspect) hoặc “Xem nguồn trang” (View Page Source).
• Tìm liên kết đó trong mã HTML.
• Kiểm tra xem thẻ <a> có chứa thuộc tính rel="noopener" hay không.

Nếu bạn không thấy rel="noopener", có thể bạn đã vô tình xóa nó hoặc chủ đề hoặc plugin của bạn đang ghi đè hành vi mặc định của WordPress. Trong trường hợp đó, bạn cần phải thêm nó một cách thủ công.

Thêm “noopener” Thủ Công

Nếu vì lý do nào đó WordPress không tự động thêm rel="noopener" hoặc bạn muốn thêm nó vào các liên kết đã tồn tại, bạn có thể thêm nó một cách thủ công. Có một vài cách để làm điều này:

1. Sử dụng trình soạn thảo HTML: Trong trình soạn thảo WordPress, bạn có thể chuyển sang chế độ “Text” (Văn bản) hoặc “Code” (Mã) và thêm rel="noopener" trực tiếp vào thẻ <a>.
2. Sử dụng plugin: Có một số plugin WordPress cho phép bạn thêm rel="noopener" vào tất cả các liên kết một cách tự động. Một số plugin cũng cung cấp các tùy chọn bổ sung để quản lý các thuộc tính liên kết khác.
3. Chỉnh sửa chủ đề (theme): Nếu bạn có kiến thức về lập trình web, bạn có thể chỉnh sửa tệp chủ đề của mình để tự động thêm rel="noopener" vào tất cả các liên kết. Tuy nhiên, cách này chỉ nên được thực hiện bởi những người có kinh nghiệm, vì nó có thể gây ra lỗi nếu thực hiện không đúng cách.

Tác động của “noopener” đến SEO

Việc sử dụng rel="noopener" không có tác động tiêu cực đến SEO. Thực tế, nó có thể cải thiện SEO bằng cách tăng cường bảo mật cho trang web của bạn. Các công cụ tìm kiếm như Google đánh giá cao các trang web an toàn và bảo mật, và việc sử dụng rel="noopener" là một trong những cách để thể hiện rằng bạn quan tâm đến bảo mật của người dùng.

Như đã đề cập trước đó, rel="noopener" có thể đi kèm với rel="noreferrer". Một số người lo ngại rằng rel="noreferrer" có thể ảnh hưởng đến việc theo dõi lưu lượng truy cập và hiệu suất của các chiến dịch tiếp thị. Tuy nhiên, các công cụ phân tích hiện đại như Google Analytics có thể xử lý các tình huống này một cách chính xác, vì vậy bạn không cần phải lo lắng về việc mất dữ liệu quan trọng.

Kết luận

rel="noopener" là một thuộc tính HTML quan trọng giúp tăng cường bảo mật cho trang web WordPress của bạn và bảo vệ người dùng của bạn khỏi các cuộc tấn công “reverse tabnabbing”. WordPress đã tự động thêm rel="noopener" vào các liên kết được mở trong tab mới kể từ phiên bản 4.7.4, nhưng bạn nên hiểu rõ cách hoạt động và cách kiểm tra để đảm bảo rằng trang web của bạn được bảo vệ tốt nhất.

Bằng cách sử dụng rel="noopener", bạn có thể yên tâm rằng bạn đang cung cấp một trải nghiệm an toàn và bảo mật cho người dùng của bạn, đồng thời bảo vệ trang web của bạn khỏi các mối đe dọa tiềm ẩn.