[HTML] a태그 noopener와 noreferrer 정리

728x90

목 차

noopener: 새로 열린 페이지가 원본 페이지의 참조를 가져올 수 없게 하여 보안을 강화.
noreferrer: 새로 열린 페이지가 원본 페이지의 리퍼러 정보를 받지 못하게 하여 개인정보 보호를 강화. noopener의 기능도 포함.
target="_blank"를 사용할 때 발생할 수 있는 보안 위협을 줄이고, 사용자의 개인정보를 보호할 수 있습니다.

1. 왜 noopener, noreferrer를 사용하나요?

noopener와 noreferrer는 보안과 개인정보 보호를 강화하기 위해 HTML의 <a> 태그에서 사용하는 rel 속성 값입니다. 이 값들은 주로 target="_blank"와 함께 사용되며, 새 창을 열 때 발생할 수 있는 보안 위험을 방지하는 데 도움이 됩니다.

noopener는 링크가 새 창이나 새 탭에서 열릴 때, 원본 페이지와 새로 열린 페이지 간의 참조 연결을 끊는 역할을 합니다.
target="_blank"를 사용하여 새 창을 열면, 새 창의 JavaScript에서 원본 창(링크를 클릭한 페이지)에 대한 참조(window.opener)를 가질 수 있게 됩니다. 악의적인 웹사이트는 이 참조를 이용해 원본 창의 페이지를 제어하거나 보안에 위협을 가할 수 있습니다.
noopener를 사용하면 새로 열린 페이지가 원본 페이지의 window.opener 객체를 사용할 수 없게 됩니다. 즉, 새 페이지가 원본 페이지를 수정하거나 제어하는 것을 방지합니다.

<a href="https://spirit0833.tistory.com" target="_blank" rel="noopener">Example</a>

noreferrer는 새 페이지가 원본 페이지의 정보(리퍼러 정보)를 받지 않도록 합니다.
사용자가 링크를 클릭해서 다른 웹사이트로 이동할 때, 브라우저는 기본적으로 원본 페이지의 URL을 새 웹사이트에 전달합니다. 이를 '리퍼러 정보(Referer)'라고 합니다.
noreferrer를 사용하면 새로 열린 페이지가 원본 페이지의 URL 정보를 받지 못하게 합니다. 이는 개인정보 보호 측면에서 유용합니다. 또한, noreferrer는 noopener의 기능을 포함하고 있어, 새로 열린 페이지가 원본 페이지에 대한 참조를 가질 수 없게 합니다.

<a href="https://spirit0833.tistory.com" target="_blank" rel="noreferrer">Example</a>

<a href="https://spirit0833.tistory.com" target="_blank" rel="noopener noreferrer">Example</a>

728x90