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