เมื่อลิงก์ไปยังหน้าเว็บในเว็บไซต์อื่นโดยใช้แอตทริบิวต์ target="_blank"
คุณอาจทำให้เว็บไซต์มีปัญหาด้านประสิทธิภาพและความปลอดภัยได้ ดังนี้
- หน้าอื่นอาจทำงานบนกระบวนการเดียวกับหน้าเว็บ หากหน้าอื่นใช้ JavaScript จำนวนมาก ประสิทธิภาพของหน้าอาจได้รับผลกระทบ
- หน้าอื่นจะเข้าถึงออบเจ็กต์
window
ด้วยพร็อพเพอร์ตี้window.opener
ได้ ซึ่งอาจทำให้หน้าอื่นเปลี่ยนเส้นทางหน้าเว็บไปยัง URL ที่เป็นอันตรายได้
การเพิ่ม rel="noopener"
หรือ rel="noreferrer"
ลงในลิงก์ target="_blank"
จะหลีกเลี่ยงปัญหาเหล่านี้ไม่ได้
วิธีที่การตรวจสอบปลายทางแบบข้ามต้นทางของ Lighthouse ล้มเหลว
Lighthouse จะแจ้งลิงก์ที่ไม่ปลอดภัยไปยังปลายทางแบบข้ามต้นทาง
![การตรวจสอบ Lighthouse แสดงลิงก์ที่ไม่ปลอดภัยไปยังปลายทางแบบข้ามต้นทาง](https://developer.chrome.com/static/docs/lighthouse/best-practices/external-anchors-use-rel-noopener/image/lighthouse-audit-showing-b1f47b11d85bc.png?authuser=5&hl=th)
Lighthouse ใช้กระบวนการต่อไปนี้เพื่อระบุว่าลิงก์ไม่ปลอดภัย
- รวบรวมแท็ก
<a>
ทั้งหมดที่มีแอตทริบิวต์target="_blank"
แต่ไม่ใช่แอตทริบิวต์rel="noopener"
หรือrel="noreferrer"
- กรองลิงก์โฮสต์เดียวกันออก
เนื่องจาก Lighthouse จะกรองลิงก์โฮสต์เดียวกันออก ดังนั้นจึงมีกรณี Edge ที่คุณควรทราบในกรณีที่กำลังทำงานในเว็บไซต์ขนาดใหญ่ หากหน้าเว็บหนึ่งมีลิงก์ target="_blank"
ไปยังหน้าอื่นในเว็บไซต์โดยไม่ใช้ rel="noopener"
ผลกระทบด้านประสิทธิภาพของการตรวจสอบนี้จะยังคงมีผล
แต่คุณจะไม่เห็นลิงก์เหล่านี้ในผลการค้นหาของ Lighthouse
วิธีปรับปรุงประสิทธิภาพเว็บไซต์และป้องกันช่องโหว่ด้านความปลอดภัย
เพิ่ม rel="noopener"
หรือ rel="noreferrer"
ในแต่ละลิงก์ที่ระบุไว้ในรายงาน Lighthouse
โดยทั่วไป เมื่อคุณใช้ target="_blank"
ให้เพิ่ม rel="noopener"
หรือ rel="noreferrer"
เสมอ:
<a href="https://examplepetstore.com" target="_blank" rel="noopener">
Example Pet Store
</a>
rel="noopener"
ป้องกันไม่ให้หน้าเว็บใหม่เข้าถึงพร็อพเพอร์ตี้window.opener
และดูแลให้หน้าเว็บทำงานในกระบวนการที่แยกต่างหากrel="noreferrer"
ให้ผลเหมือนกันแต่ยังป้องกันไม่ให้ส่งส่วนหัวReferer
ไปยังหน้าใหม่ด้วย ดูประเภทลิงก์ "noreferrer"
ดูโพสต์แชร์ทรัพยากรข้ามต้นทางอย่างปลอดภัยสำหรับข้อมูลเพิ่มเติม