rel 속성 설정

<a>를 이용해 외부 링크를 연결할 때는 rel 속성을 설정하여 중요 정보가 유출되지 않도록 해야함

1. rel="noopener"

외부 페이지에서 window.opener 객체에 접근하지 못하도록 방지

(→ 기본적으로 target=”_black”가 설정된 <a>를 통해 열린 외부 사이트에서 window.opener 객체에 접근 할 수 있음)

<a href="https://example.com" target="_blank" rel="noopener">Example 사이트 방문</a>

• target="_blank"로 열린 외부 사이트가 원본 탭을 조작하는 탭 내빙(Tabnabbing) 공격을 막기 위해 사용 ### 탭 내빙 공격(Tabnabbing) 사용자가 새롭게 열린 탭에서 기존 탭으로 돌아올 때, 해당 탭을 원본 사이트와 유사한 피싱 사이트로 이동시켜 공격을 시도하는 기법

2. rel="noreferrer"

Referer 헤더 정보가 노출 방지

Referer 헤더

웹 브라우저가 현재 페이지로 이동하기 전에 사용자가 어떤 페이지에 있었는지 서버에 전달하는 HTTP 요청 헤더

(→ Referer 헤더의 URL에 세션 ID나 사용자 식별 정보가 포함되어 있다면 외부로 유출될 수 있음)

<a href="https://example.com" target="_blank" rel="noreferrer">Example 사이트 방문</a>

• noopener 기능도 포함되어 있어 탭 내빙 공격도 방지됨

3. rel="nofollow"

검색 엔진이 해당 링크를 따라가지 않도록 설정

(→ 기본적으로 검색 엔진은 페이지 내의 링크를 따라가며 웹을 크롤링하지만 검증되지 않은 외부 링크나 상업적 링크가 검색 엔진에 의해 인덱싱된다면 SEO 상 불리할 수 있음)

<a href="https://example.com" rel="nofollow">외부 사이트 방문</a>

• 검증되지 않은 외부 링크가 SEO에 미치는 부정적 영향을 방지
• 사용자 생성 콘텐츠에서 스팸 링크 방지, 광고 링크가 SEO에 영향을 미치지 않도록 활용