Trong thế giới của lập trình và phát triển web, việc hiểu rõ về các thuộc tính HTML là quan trọng để đảm bảo an toàn và bảo mật cho trang web. Một trong những thuộc tính quan trọng mà người phát triển thường gặp là 'rel="noopener"'. Hãy cùng chúng ta khám phá chi tiết về thuộc tính này và tại sao nó quan trọng trong ngữ cảnh bảo mật trực tuyến.
rel noopener là gì
1. rel noopener là gì?
rel="noopener" là một thuộc tính HTML được sử dụng trong các thẻ (liên kết) để cải thiện tính bảo mật khi mở liên kết trong một tab hoặc cửa sổ mới. Nó đặc biệt quan trọng khi liên kết đó là một liên kết ngoại trên trang web.
Khi một trang web mở một liên kết bằng cách sử dụng target="_blank" để mở trong một tab hoặc cửa sổ mới, trang mới đó sẽ có quyền truy cập đến window.opener trong JavaScript. Điều này có thể tạo ra một lỗ hổng bảo mật mà hacker có thể sử dụng để thực hiện các cuộc tấn công chéo giữa các trang web (Cross-Site Scripting - XSS).
Khi bạn thêm rel="noopener" vào thẻ liên kết, nó ngăn chặn trang mới khỏi việc truy cập window.opener, làm giảm nguy cơ tấn công XSS và cải thiện tính an toàn của trang web.
Ngoài ra, rel="noopener" có thể đi kèm với rel="noreferrer" để ngăn chặn trang mới từ việc truy cập thông tin nguồn gốc của nó, tăng cường tính riêng tư.
2. Rel noopener trong WordPress là gì?
Khi bạn thêm một liên kết vào trang web WordPress, bạn có thể sử dụng các thuộc tính HTML để kiểm soát cách mà hành vi của người dùng được quản lý khi họ nhấp vào liên kết. Chẳng hạn, khi bạn tạo một liên kết, có một công tắc cho phép bạn mở liên kết đó trong một tab mới. Mã HTML được tạo ra bởi WordPress cho liên kết có dạng như sau:
| external link |
5. Làm thế nào để vô hiệu hóa rel="noopener" trong WordPress?
Không cần phải loại bỏ rel="noopener" từ các liên kết trên trang web. rel="noopener" đóng vai trò quan trọng trong việc bảo vệ an ninh trang web mà không gây ảnh hưởng đến hiệu suất hoặc SEO của trang.
Tuy nhiên, nếu bạn muốn vô hiệu hóa nó, bạn có thể tắt trình soạn thảo block Gutenberg trong WordPress và chuyển sang trình soạn thảo cổ điển.
Điều này là do nếu bạn thủ công loại bỏ rel=”noopener” từ liên kết, trình soạn thảo block sẽ tự động thêm nó lại để đảm bảo an toàn cho trang web.
Khi trình soạn thảo block bị tắt, bạn có thể thêm một đoạn mã vào tệp functions.php của theme hoặc sử dụng plugin WPCode (được khuyến nghị). Hướng dẫn cụ thể về cách thêm mã tùy chỉnh vào WordPress có thể được tìm thấy trong hướng dẫn của Vietnix.
Đơn giản là sao chép đoạn mã sau vào một đoạn mã PHP mới:
| add_filter('tiny_mce_before_init','wpb_disable_noopener'); function wpb_disable_noopener( $mceInit ) { $mceInit['allow_unsafe_link_target']=true; return $mceInit; } |
Hãy đảm bảo rằng bạn bật chuyển đổi Active và sau đó nhấp vào nút Lưu Snippet.
Điều này sẽ ngăn WordPress thêm rel="noopener" vào các liên kết mới. Bạn cũng có thể cần chỉnh sửa thủ công bất kỳ liên kết cũ nào để xóa thuộc tính này.
Nếu bạn muốn có sự kiểm soát chi tiết hơn về các thuộc tính rel được thêm vào các liên kết trong WordPress, Vietnix đề xuất sử dụng plugin AIOSEO, cho phép bạn thêm tiêu đề, nofollow, và các thuộc tính liên kết khác ngay trong trình soạn thảo WordPress.
Nội dung bài viết:
Bình luận