보안 개인정보 보호 noreferrer, noopener

보안 개인정보 보호 noreferrer, noopener

HTML의 <a> 태그에서 rel 속성에 사용하는 noreferrer와 noopener는 보안 및 개인정보 보호와 관련된 중요한 값들입니다. 특히 링크가 target="_blank"일 때 매우 중요하게 작용합니다.

---

1. noopener

• 역할: 새 창에서 열리는 페이지(예: target="_blank")가 원래 페이지의 JavaScript window 객체에 접근하는 것을 차단합니다.
• 보안 이유: 원래 페이지를 제어하거나 피싱, 악성 코드 실행 등의 보안 위험을 막기 위해 사용됩니다.

<a href="https://example.com" target="_blank" rel="noopener">Example</a>

이렇게 하면, example.com은 window.opener를 통해 원래 페이지를 제어할 수 없습니다.

---

2. noreferrer

• 역할: 위의 noopener의 효과를 포함하면서, 추가로 브라우저가 Referer 헤더를 전송하지 않도록 합니다.
• 개인정보 보호: 방문한 사용자가 어느 페이지에서 링크를 클릭했는지 새 창에 전달되지 않음.

<a href="https://example.com" target="_blank" rel="noreferrer">Example</a>

이 경우, Referer 헤더도 전송되지 않고, window.opener도 null입니다.

---

차이점 정리

속성	window.opener 접근 가능 여부	Referer 헤더 전송 여부
없음	가능	전송함
noopener	불가능	전송함
noreferrer	불가능	전송 안 함

 

---

결론

• 보안만 중요하면 → rel="noopener"
• 보안 + 개인정보 보호까지 고려하면 → rel="noreferrer"
• 실무에서는 종종 둘 다 같이 씀: rel="noopener noreferrer"