[HTML] a 태그에 꼭 추가 해야 하는 속성(Attr)

요즘 Cursor AI 를 많이 이용 하고 있는데 여기서 몰랐던 코드를 구현해주는 상황때문에 포스팅하게 되었다.

 

기본적인 a 태그 + _blank 일 때

<a href ="" target="_blank">A태그입니다.</a>

 

이것까지는 아주 간단하고 당연한 내용인데,

 

<a
    href={work.link}
    target="_blank"
    rel="noopener noreferrer"
>a태그입니다</a>

추가 된 내용이 바로 rel 속성이다.

 

Rel ?? 보안적 측면에서 필요하다.

• noopener: 새 탭/창에서 열리는 페이지가 window.opener 속성을 통해 원래 페이지에 접근하는 것을 방지합니다.
  이것은 탭 내빙(tab nabbing)이라는 보안 취약점을 막아줍니다.
  탭 내빙은 새 탭에서 열린 페이지가 원래 페이지의 location을 변경하여 피싱 공격을 시도할 수 있는 방법입니다.
  
  
• noreferrer: 새 페이지로 이동할 때 HTTP 리퍼러(Referer) 헤더를 전송하지 않도록 합니다.
  이는 방문자의 개인정보 보호에 도움이 되며, 새 페이지가 어디에서 방문자가 왔는지 알 수 없게 합니다.

 

 

 

 

 

 

이 속성들은 외부 링크를 사용할 때 보안과 개인정보 보호를 강화하기 위한 웹 개발 모범 사례입니다.
특히 target="_blank" 를 사용할 때는 항상 rel="noopener noreferrer"를 함께 사용하는 것이 좋습니다.