개요
링크를 새 탭에서 열 때 a 태그에 target="_blank"를 많이 사용함 이 경우 window.opener로 원본 페이지에 접근 가능한 취약점과 리소스 간섭 이슈가 발생할 수 있음 rel=“noopener noreferrer"를 함께 지정해 리버스 태브내빙(reverse tabnabbing) 방지와 리퍼러 차단을 적용하는 것이 권장됨
핵심 개념
- target: 링크 대상 브라우징 컨텍스트 지정
- window.opener: 새 탭에서 원본 창을 참조하는 브라우저 객체
- rel=noopener: 새 탭에서 window.opener를 끊어 원본 페이지 접근 불가로 만듦, 리버스 태브내빙 방지
- rel=noreferrer: 새 탭으로 이동 시 Referer 헤더 전송 차단, 원본 페이지 URL 비공개
target 값 정리
- _self: 현재 탭에서 열기, 기본값이라 명시 생략 가능
- _blank: 새 탭에서 열기
target="_blank"만 사용할 때의 문제
- 보안 취약점 발생 가능 악성 페이지가 window.opener를 통해 부모 창의 location을 임의 변경하여 피싱 페이지로 리디렉션하는 리버스 태브내빙 위험 존재 원본 페이지의 데이터 접근 시도 등 추가 피해 가능성 있음
- 성능 간섭 가능성 새 탭이 원본과 같은 브라우징 컨텍스트 그룹에서 실행될 수 있어 이벤트 루프나 리소스 경쟁으로 지연이 커질 수 있음 무거운 스크립트가 열린 탭 간에 체감 성능 저하를 유발할 수 있음
해결책
- rel=“noopener” 새 탭의 window.opener를 null로 만들어 원본 페이지 참조 차단 탭 간 연결이 끊겨 보안 위험과 리소스 간섭 완화
- rel=“noreferrer” 이동 시 Referer 헤더를 제거해 원본 URL과 경로 노출 방지 분석이나 리퍼러 기반 측정이 필요한 경우에는 생략을 고려
사용 예시
필수 최소 속성만 명시
링크 열기
- 보안 우선이면 noopener 필수, 개인정보 보호까지 필요하면 noreferrer 추가
- 리퍼러 기반 분석이 필요하면 rel=“noopener"만 적용하고 noreferrer는 생략
동작 확인
- 새 탭에서 window.opener가 null이면 noopener 적용 상태 예시 콘솔 확인용 코드 한 줄 console.log(window.opener)
주의 사항과 베스트 프랙티스
- 최신 브라우저 일부는 target="_blank"에 대해 기본적으로 noopener를 적용하기도 함 다만 적용 범위와 시점이 브라우저마다 달라 명시적으로 rel=“noopener"를 추가하는 것이 안전함
- 외부 도메인으로 나가는 링크는 기본적으로 target="_blank” + rel=“noopener” 적용 권장
- 내부 네비게이션은 새 탭 강제 대신 사용자 선택 존중 권장
- 조직 차원에서 링크 컴포넌트의 기본값으로 rel=“noopener"를 강제하고, 필요 시 noreferrer를 옵션으로 제공하는 패턴 권장
마무리
새 탭 열기 자체는 간단하지만 보안과 프라이버시, 성능까지 고려하면 기본값만으로는 부족함 target="_blank"에는 최소 rel=“noopener"를 명시하고 상황에 따라 rel=“noreferrer"를 선택 적용하는 것을 기본 원칙으로 가져갈 것
참고자료
- MDN a 요소 target 속성 개요와 동작
- rel=noopener의 배경과 리버스 태브내빙 설명
- Lighthouse의 noopener 권고와 진단 기준