เมื่อลิงก์ไปยังหน้าเว็บในเว็บไซต์อื่นโดยใช้แอตทริบิวต์ target="_blank" คุณอาจทำให้เว็บไซต์มีปัญหาด้านประสิทธิภาพและความปลอดภัยได้ ดังนี้
- หน้าอื่นอาจทำงานบนกระบวนการเดียวกับหน้าเว็บ หากหน้าอื่นใช้ JavaScript จำนวนมาก ประสิทธิภาพของหน้าอาจได้รับผลกระทบ
- หน้าอื่นจะเข้าถึงออบเจ็กต์
windowด้วยพร็อพเพอร์ตี้window.openerได้ ซึ่งอาจทำให้หน้าอื่นเปลี่ยนเส้นทางหน้าเว็บไปยัง URL ที่เป็นอันตรายได้
การเพิ่ม rel="noopener" หรือ rel="noreferrer" ลงในลิงก์ target="_blank" จะหลีกเลี่ยงปัญหาเหล่านี้ไม่ได้
วิธีที่การตรวจสอบปลายทางแบบข้ามต้นทางของ Lighthouse ล้มเหลว
Lighthouse จะแจ้งลิงก์ที่ไม่ปลอดภัยไปยังปลายทางแบบข้ามต้นทาง
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"
ดูโพสต์แชร์ทรัพยากรข้ามต้นทางอย่างปลอดภัยสำหรับข้อมูลเพิ่มเติม