<a> 태그를 이용해 외부 페이지를 열 때 보안상 고려해야 할 점은 무엇인가요?
<a>를 이용해 외부 링크를 연결할 때는 rel 속성을 적절히 설정하여 중요 정보가 유출되지 않도록 해야 합니다.
첫째, rel="noopener"를 설정하여 외부 페이지에서 opener 객체에 접근할 수 없도록 막아야 합니다. 기본적으로, target="_blank"가 설정된 <a> 를 통해 열린 외부 사이트에서 window.opener 객체에 접근할 수 있습니다. window.opener 객체에 대한 접근을 허용하면, 악의적으로 피싱 사이트로 연결시키는 탭 내빙(Tabnabbing) 공격이 가능해집니다. 이를 방지하기 위해서는 noopener를 설정해야 합니다.
둘째, rel="noreferrer"를 설정하여 Referer 헤더 정보가 노출되지 않도록 막아야 합니다. 브라우저는 링크 연결 시 Referer 헤더를 통해 사용자가 어떤 웹사이트에서 이동된 것인지를 전달하는데, 이 정보에 민감한 데이터가 포함될 수 있습니다. 예를 들어, URL에 세션 ID나 사용자 식별 정보가 포함되어 있다면 이 정보가 외부로 유출될 수 있습니다. 따라서 noreferrer를 설정하여 이를 예방해야 합니다.
참고로, noreferrer 속성에는 noopener와 마찬가지로 opener를 생략하는 기능도 포함됩니다.
셋째, rel="nofollow"를 설정하여 검색 엔진이 외부 링크를 따라가지 않도록 해야 합니다. 기본적으로 검색 엔진은 페이지 내의 링크를 따라가며 웹을 크롤링합니다. 하지만 검증되지 않은 외부 링크나 상업적 링크가 검색 엔진에 의해 인덱싱된다면 SEO 상 불리할 수 있습니다. 따라서 nofollow를 설정하여 검증되지 않은 외부 링크가 SEO에 악영향을 미치는 일을 막아야 합니다. 예를 들어, 사용자 생성 컨텐츠에서 스팸 링크를 방지하거나, 광고 링크가 SEO에 영향을 미치지 않도록 해야 합니다.
끝으로, noopener, noreferrer, nofollow 세 가지 속성은 함께 적용할 수 있습니다. 예를 들어 rel="noopener noreferrer nofollow"와 같이 조합하여 사용할 수 있습니다. 따라서 각 상황에 맞게 적절한 조합을 선택해야 합니다.
탭 내빙 공격이란 무엇인가요? 🤔
탭 내빙 공격은 사용자가 새롭게 열린 탭에서 기존 탭으로 돌아올 때, 해당 탭을 원본 사이트와 유사한 피싱 사이트로 이동시켜 공격을 시도하는 기법입니다. 사용자가 외부 링크를 클릭하여 새로운 탭이 열리고, 이후 원래 탭으로 돌아왔을 때 해당 페이지가 악성 사이트로 변경될 수 있습니다. 이를 방지하기 위해 rel="noopener"를 설정하면 새로운 탭이 원본 탭의 컨트롤을 가질 수 없게 되어 공격이 불가능해집니다.