Wordpress

Mở tab mới với thẻ khai báo rel=”noopener”

Mở tab mới với thẻ khai báo rel=”noopener”
Được viết bởi Minh Hoàng

Series chia sẻ thủ thuật blog WordPress từ cơ bản đến nâng cao, cùng nhiều plugins, themes hữu ích.

Trong trường hợp bạn có một đường link trỏ tới domain không thuộc về bạn hoặc không chung domain, bạn nên sử dụng thẻ rel=”noopener” để an toàn hơn cho website của bạn. Trong tất cả các trường hợp sử dụng Internal Link (link nội bộ), rel=”noopener” không cần thiết phải cho vào.

– Có một vấn đề nho nhỏ trong các trình duyệt hiện nay là sử dụng một mã javascript để điều hướng một trang giới thiệu sang một URL mới. Sử dụng mã javascript window.opener.location = newURL. Cho dù bạn sử dụng target=”_blank” mở cửa sổ mới cho các đường link ra ngoài thì cũng không thể tránh khỏi lỗ hổng bảo mật trên.

– Cụ thể hơn, khi bạn trỏ một đường link sang Google.com chẳng hạn, người dùng click vào đường link sang Google.com. Nếu Google.com sử dụng mã Javascript trên thì có thể điều hướng website của bạn đang trên một tab khác trên trình duyệt chuyển hướng sang trang có chứa virus. Và sử dụng thẻ rel=”noopener” sẽ giúp tránh được điều đó.

What’s rel=”noopener” in WordPress

– Nếu bạn đã nâng cấp lên phiên bản WordPress 4.7.4 hoặc mới hơn, bạn cần chú ý là có một thẻ mới rel=”noopener” sẽ xuất hiện bên cạnh thẻ target=”_ blank” trong trình chỉnh sửa HTML. Thẻ này được tự động thêm vào tất cả liên kết nội bộ và liên kết ngoài khi bạn mở chúng trong một tab mới. Nó dạng như sau:

< a href="https://minhhn.com" rel="noopener" target="_blank">Minh Hoàng Blog< /a>
Nó là có hại cho trang web của bạn?

– Câu trả lời ngắn gọn là KHÔNG.

– Nhiều người dùng WordPress lo ngại rằng rel=”noopener” có thể tạo ra tất cả các liên kết nội bộ và bên ngoài như thẻ “nofollow” (thực sự tồi cho SEO). Nhưng thực tế, rel=”noopener” chỉ là chỉ dẫn cho trình duyệt của người dùng ngừng (stop) sử dụng đối tượng Javascript window.opener.

– SEO của trang web bị ảnh hưởng bởi các công cụ tìm kiếm và chứ không tương tác với thẻ rel=”noopener”. Tương tự vậy, các phần mềm phân tích website cũng hoàn toàn bỏ qua thẻ này.

Wordpress SEO rel="noopener"

Làm thế nào để remove rel=”noopener”?

– Chúng tôi không thấy bất kỳ lý do nào là tốt để xóa thẻ rel=”noopener” khỏi bài đăng của bạn. Nó không ảnh hưởng đến SEO, không ảnh hưởng đến các công cụ phân tích và các liên kết cũng sẽ không bị phá vỡ. Nó chỉ đơn thuần bảo vệ người dùng của bạn khỏi các liên kết nguy hiểm tiềm ẩn có thể chiếm quyền kiểm soát các tab của họ.

– Và nếu bạn muốn xóa thì tôi tin rằng bạn sẽ chỉ muốn xoá nó khi bạn muốn tận dụng tính năng window.opener cho một mục đích nào đó.

– Loại bỏ rel=”noopener” có thể gặp một chút khó khăn vì nó được tích hợp vào trình soạn thảo văn bản WordPress. Ngay cả khi bạn tự xóa nó khỏi mã HTML, nó sẽ được thêm lại khi bạn lưu tài liệu. Vì vậy, cách tốt nhất để vô hiệu hóa tính năng này là từ chính plugin soạn thảo TinyMCE.

– Để làm điều này, bạn sẽ phải thêm một số dòng mã trong tệp functions.php của theme WordPress của bạn.

// Note that this intentionally disables a tinyMCE security feature.
// Use of this code is NOT recommended.add_filter('tiny_mce_before_init','tinymce_allow_unsafe_link_target');
function tinymce_allow_unsafe_link_target( $mceInit ) {
    $mceInit['allow_unsafe_link_target']=true;
    return $mceInit;
}

– Xong khi làm xong, việc này sẽ stop WordPress tự động thêm thẻ rel=”noopener” trong bài đăng của bạn từ lúc này trở về sau. Tuy nhiên, điều này sẽ không xóa các thẻ đã được thêm vào trước khi thực hiện thao tác này, vì vậy bạn sẽ phải xóa chúng khỏi các bài đăng được lưu trước đó.

Kết luận:

– Bạn không cần phải lo lắng về thẻ rel=”noopener” vì nó là một bước tiến về tính bảo mật của khách truy cập trang web của bạn (trừ khi bạn muốn sử dụng tính năng window.opener). Bạn nên nắm lấy phiên bản tính năng bảo mật mới này.

– Nếu có bất kỳ lý do nào khác tại sao bạn đang tìm cách loại bỏ thẻ rel=”noopener”, thì hãy làm sáng tỏ cùng chúng tôi bằng cách nhận xét bên dưới.

Tham khảo hongkiat.

Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!

Giới thiệu

Minh Hoàng

Xin chào, tôi là Hoàng Ngọc Minh, hiện đang làm BrSE, tại công ty Toyota, Nhật Bản. Những gì tôi viết trên blog này là những trải nghiệm thực tế tôi đã đúc rút ra được trong cuộc sống, quá trình học tập và làm việc. Các bài viết được biên tập một cách chi tiết, linh hoạt để giúp bạn đọc có thể tiếp cận một cách dễ dàng nhất. Hi vọng nó sẽ có ích hoặc mang lại một góc nhìn khác cho bạn[...]

Translate »