<a> 태그를 이용해 외부 페이지를 열 때 보안 체크리스트

답변 확인

• <a>태그로 외부 페이지를 열 때, 기본적으로 새로운 페이지가 현재 페이지에서 열리기 때문에 보안상 취약점을 초래할 수 있음
• 외부 사이트로부터 악의적인 코드를 삽입당할 가능성을 줄이기 위해 몇 가지 보안 조치를 적용하는 것이 중요함

📌 보안 고려 사항

✅ 1. rel="noopener"와 rel="noreferrer" 사용

• noopener: 새로 열린 페이지에서 window.opener 객체를 통해 부모 페이지에 접근하지 못하도록 막아줌. 이를 통해 외부 페이지가 부모 페이지의 정보를 악용하는 것을 방지
• noreferrer: 새 페이지가 부모 페이지의 참조(referrer)를 전달 하지 않도록 방지함. 민감한 정보를 보호하고 개인정보 유출을 방지함

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

✅ 2. target="_blank" 사용 시 주의

• target="_blank"는 링크를 새 탭에서 열 때 사용되며, 외부 페이지가 부모 페이지의 객체에 접근하는 것을 방지하려면 noopener나 noreferrer를 함께 사용해야 함
• window.opener 객체를 통해 악성 코드가 부모 페이지에 접근할 수 있기 때문에 이를 차단하는 것이 중요

✅ 3. 외부 사이트에 신뢰성 있는 URL 사용

• 외부 링크를 추가할 때, 해당 URL이 신뢰할 수 있는지 확인해야 함. 잘못된 외부 링크는 피싱, 멀웨어, 스팸 등을 초래할 수 있음

• URL을 검증하고, 자동으로 사용자 입력을 통해 외부 링크를 추가하지 않도록 해야 함

✅ 4. 적절한 보안 헤더 설정

• 외부 페이지로 이동할 때는 보안 헤더를 통해 잠재적인 보안 위협을 차단할 수 있음. Content-Security-Policy(CSP) 같은 헤더를 설정하여 외부 콘텐츠에 대한 액세스를 제한할 수 있음

✅ 5. 링크 설명 추가

• 외부 링크를 클릭할 때 사용자가 링크를 추측할 수 있도록 적절한 설명을 추가하는 것이 좋음. 예를 들어, 링크가 외부 사이트로 이동한다는 안내를 함께 제공하면 사용자에게 도움이 됨

<a href="https://example.com" target="_blank" rel="noopener noreferrer"
  >Visit Example (external site)</a
>

🔹 결론

• <a> 태그로 외부 페이지를 열 때, target="\_blank"를 사용하면 보안 취약점이 발생할 수 있으므로 rel="noopener noreferrer"와 함께 사용하여 이를 예방해야 함

• 신뢰할 수 있는 URL만 사용하고, 보안 헤더와 사용자에게 명확한 설명을 제공하는 것이 중요

📚 참고 자료

• [요즘IT] 하이퍼링크를 신뢰할 수 없다면? noopener, noreferrer, nofollow