<a> 를 이용해 외부 링크를 연결할 때는 rel 속성을 적절히 설정하여 중요 정보가 유출되지 않도록 해야한다.
1. rel="noopener"를 설정하여 외부 페이지에서 opener 객체에 접근할 수 없도록 막아야 한다.
기본적으로, target= "_blank"가 설정된 <a> 를 통해 열린 외부 사이트에서 window.opener 객체에 접근할 수 있다.
이에 객체에 대한 접근을 허용하면, 악의적으로 피싱 사이트로 연결시키는 탭 내빙(Tabnabbing) 공격이 가능해진다. 이를 방지하기 위해서는 noopener를 설정해야한다.
2. rel="noreferrrer"를 설정하여 Referer 헤더 정보가 노출되지 않도록 막아야한다.
브라우저는 링크 연결시 referer 헤더를 통해 사용자가 어떤 웹사이트에서 이동된 것인지를 전달하는데, 이 정보에 민감한 데이터가 포함될 수 있다. 예를들어, URL에 세션 ID나 사용자 식별 정보가 포함되어 있다면, 이 정보가 외부로 유출될 수 있다. 따라서 noreferer를 설정하여 이를 예방해야 한다. ** noreferer 속성에는 noopener와 마찬가지로 opener를 생략하는 기능도 포함된다.
3. rel="nofollow"를 설정하여 검색 엔진이 외부링크를 따라가지 않도록 해야한다.
기본적으로 검색 엔진은 페이지 내의 링크를 따라가며 웹을 크로링한다. 하지만 검증되지않은 외부 링크나 상업적으로 링크가 검색엔진에 의해 인덱싱된다면 SEO상 불리할 수 있다. 따라서 nofollw 를 설정하여 검증되지 않은 외부링크가 SEO에 악영향을 미치는 일을 막아야 한다. 예를 들어, 사용자 생성 컨텐츠에서 스팸링크를 방지하거나, 광고링크가 SEO에 영향을 미치지 않도록 해야한다.
세가지 속성은 한 번에 적용 가능하다.
// rel="noopener norefferer nofollow"와 같이 조합하여 사용
🤔 Tab nabbing 공격이란 ?
탭 내빙 공격은 사용자가 새롭게 열린 탭에서 기존 탭으로 돌아올 때, 해당 탭을 원본 사이트와 유사한 피싱 사이트로 이동시켜 공격을 시도하는 기법이다. 사용자가 외부 링크를 클릭하여 새로운 탭이 열리고, 이후 원래 탭으로 돌아왔을때 해당 페이지가 악성 사이트로 변경될 수 있다. 이를 방지하기위해 rel="noopener"를 설정하면 새로운 탭이 원본 탭의 컨트롤을 가질 수 없게 되어 공격이 불가능해진다.
💡 관리툴에서 링크 태그로 이동할 링크를 입력받는 영역이 있는데, 외부링크를 등록하는 과정에서 이런 부분은 놓치고 있었던 부분같다.
내부에서 외부로 이동, 다시 서비스의 내부 앱으로 돌아오는 과정에서 피싱 사이트로 이동하는 탭 내빙 과 같은 공격 예방을 위해 <a> 태그의 속성들을 다시 살펴봐야할 것 같다.
'프론트엔드 개발자로 일하기' 카테고리의 다른 글
| 테스트하기 쉬운 코드들의 조건은 무엇이 있을까? (0) | 2025.03.14 |
|---|---|
| typescript의 infer 키워드 (0) | 2025.03.12 |
| String과 Array의 차이 (0) | 2025.03.10 |
| 효과적인 디버깅 방법 (2) | 2025.02.24 |
| git 브랜치 전략과 git Flow (0) | 2025.02.18 |