• 목록

📌 rel="noopener"의 역할[code]<a href="https://example.com" target="_blank" rel="noopener">새 창에서 열기</a>[/code]target="_blank"를 사용하면 새 창 또는 새 탭에서 링크가 열립니다.
하지만 기본적으로 새 창에서 열린 페이지(example.com)는 원래 페이지(내 사이트)의 window.opener 속성을 통해 부모 페이지의 JavaScript 객체에 접근할 수 있습니다.
rel="noopener"를 사용하면 새 창에서 부모 페이지(window.opener)에 접근하지 못하도록 차단합니다.
→ 즉, 보안 취약점을 방지할 수 있습니다.

🔍 왜 rel="noopener"를 사용해야 할까요?
1️⃣ 보안 취약점 방지 (Tabnabbing 공격)
만약 rel="noopener"를 사용하지 않으면, 악성 사이트에서 원래 페이지를 조작할 수 있는 위험이 있습니다.
❌ 취약한 코드 예시 (rel="noopener" 없이)[code]<a href="https://malicious-site.com" target="_blank">새 창에서 열기</a>[/code]사용자가 이 링크를 클릭하면 malicious-site.com이 원래 사이트의 window.opener 속성을 조작할 수 있음
예를 들어, 아래와 같이 원래 페이지를 가짜 로그인 페이지로 바꿀 수도 있음[code]window.opener.location = "https://fake-login-page.com";[/code]결과적으로 사용자가 자신도 모르게 가짜 로그인 페이지에 로그인 정보를 입력할 위험이 생깁니다.

2️⃣ 성능 최적화
rel="noopener"를 사용하면 새 창에서 열린 페이지가 원래 페이지의 리소스를 공유하지 않도록 합니다.
즉, 메모리 사용량을 줄이고 성능을 향상시킬 수 있습니다.

📌 rel="noopener" vs rel="noreferrer" 차이점
rel="noopener" 새 창에서 부모 페이지 접근 차단  window.opener 차단 ✅ 차단됨  HTTP Referrer 정보 전달 ✅ 전달됨
rel="noreferrer"  새 창에서 부모 페이지 접근 차단 + Referer 정보 차단    window.opener 차단 ✅ 차단됨  HTTP Referrer 정보 전달 ❌ 차단됨
rel="noopener noreferrer" 를 사용하면 보안이 더욱 강화됩니다.
예를 들어, 내 사이트에서 링크를 클릭한 흔적(Referrer 정보)이 상대 사이트에 남지 않게 할 수도 있습니다.[code]<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  보안 강화 링크
</a>[/code]
✅ 결론
rel="noopener"는 보안 취약점을 방지하고 성능을 개선하는 속성입니다.
target="_blank"를 사용할 때 반드시 rel="noopener"를 추가하는 것이 좋습니다.
더 강력한 보안을 위해 rel="noopener noreferrer"를 사용할 수도 있습니다.