💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 2025年3月1日
Mở trong tab mới
📌
Kết luận
Hãy thêm target="_blank" và rel="noopener noreferrer" cho liên kết ngoài
target="_blank". Tuy nhiên, việc bảo mật là vô cùng quan trọng.
📝 Mã thực tế tại đây
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Ví dụ</a>Tại sao cần có thuộc tính rel?
Nếu chỉ sử dụngtarget="_blank", trang web mới được mở sẽ có khả năng truy cập ngược lại trang gốc (thông qua cơ chế window.opener), điều này tiềm ẩn lỗ hổng bảo mật.
Việc thêm rel="noopener noreferrer" sẽ giúp ngăn chặn điều này.
| Thuộc tính | Hiệu quả |
|---|---|
noopener | Ngắt kết nối giữa trang mới và trang gốc |
noreferrer | Không gửi thông tin trang giới thiệu (referrer) |
Khi nào nên dùng?
| Mô hình | Thuộc tính target |
|---|---|
| Liên kết ngoài website | Dùng _blank + rel |
| Liên kết nội bộ | Không dùng target (chuyển trang ngay trong tab đó) |
Tổng kết
- Liên kết ngoài nên cótarget="_blank" + rel="noopener noreferrer"
- Luôn thêm rel để đảm bảo an toàn bảo mật
- Liên kết nội bộ không cần dùng target
Hãy thử trong phần bài tập
Hãy thử tạo một liên kết mở trong tab mới nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Hãy thiết lập để liên kết mở trong một tab mới bằng thuộc tính target="_blank".
Gợi ý khi gặp khó khăn
Thêm thuộc tính target vào thẻ a. Nên thêm cả rel để đảm bảo bảo mật.