ลิงก์ไปปลายทางแบบข้ามต้นทางไม่ปลอดภัย

เมื่อคุณลิงก์ไปยังหน้าเว็บบนเว็บไซต์อื่นโดยใช้แอตทริบิวต์ target="_blank" คุณจะพบปัญหาด้านประสิทธิภาพและความปลอดภัยของเว็บไซต์

  • หน้าเว็บอื่นอาจทำงานในขั้นตอนเดียวกับหน้าเว็บของคุณ หากอีกหน้าหนึ่งเรียกใช้ JavaScript จำนวนมาก ประสิทธิภาพของหน้าเว็บอาจลดลง
  • อีกหน้าหนึ่งจะเข้าถึงออบเจ็กต์ window ของคุณด้วยพร็อพเพอร์ตี้ window.opener ได้ ซึ่งอาจทำให้หน้าอื่นเปลี่ยนเส้นทางหน้าเว็บของคุณไปยัง URL ที่เป็นอันตรายได้

กำลังเพิ่ม rel="noopener" หรือ rel="noreferrer" กับลิงก์ target="_blank" เพื่อหลีกเลี่ยงปัญหาเหล่านี้

วิธีที่การตรวจสอบปลายทางแบบข้ามต้นทางของ Lighthouse ล้มเหลว

Lighthouse แจ้งลิงก์ที่ไม่ปลอดภัยไปยังปลายทางแบบข้ามต้นทาง

การตรวจสอบ Lighthouse ที่แสดงลิงก์ที่ไม่ปลอดภัยไปยังปลายทางแบบข้ามต้นทาง

Lighthouse ใช้ขั้นตอนต่อไปนี้เพื่อระบุว่าลิงก์ไม่ปลอดภัย

  1. รวบรวมแท็ก <a> ทั้งหมดที่มีแอตทริบิวต์ target="_blank" แต่ไม่ใช่แอตทริบิวต์ rel="noopener" หรือ rel="noreferrer"
  2. กรองลิงก์โฮสต์เดียวกันออก

เนื่องจาก Lighthouse กรองลิงก์โฮสต์เดียวกันออก มีกรณีที่เป็นปัญหาที่คุณควรทราบหากกำลังทำงานร่วมกับเว็บไซต์ขนาดใหญ่ หากหน้าหนึ่งมีลิงก์ 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 ด้วย ส่งไปยังหน้าใหม่ได้ ดูประเภทลิงก์ "ไม่มี URL ที่มา"

โปรดดูหัวข้อแชร์ทรัพยากรแบบข้ามต้นทางอย่างปลอดภัย โพสต์เพื่อดูข้อมูลเพิ่มเติม

แหล่งข้อมูล