noreferrer,noopener,nofollow속성은 모두 HTML 링크 요소(<a>)에서rel속성을 통해 사용됩니다.
noreferrer
noreferrer 속성은 보안을 위해 사용됩니다. HTTP Referrer 헤더는 웹 사이트에서 다른 웹 사이트로 이동할 때, 이전 페이지의 URL 정보를 전송하는데, 이는 보안에 취약한 정보가 될 수 있습니다.
예를 들어, 사용자가 로그인 페이지를 입력한 후, 다른 웹 사이트로 이동하는 경우, HTTP Referrer 정보에 로그인 페이지의 URL이 포함될 수 있습니다. 이 경우, HTTP Referrer 정보를 전송하지 않음으로써 보안 문제를 해결할 수 있습니다.
사용 방법
<a href="https://example.com" rel="noreferrer">Example Website</a>위 코드에서 rel 속성에 noreferrer 값을 지정해줌으로써, 링크를 클릭할 때 HTTP Referrer 헤더가 전송되지 않도록 합니다.
noopener
noopener 속성은 새로운 창에서 링크를 열 때 보안을 위해 사용됩니다. target="_blank"로 링크를 열 때, 새로운 창과 부모 창이 서로 다른 문서 객체 모델(DOM)을 공유할 수 있습니다. 이는 새 창에서 원래 페이지를 조작할 수 있는 보안 문제가 발생할 수 있으며, 새로운 창에서 noopener 속성을 사용함으로써 부모 창과의 연결을 끊어 해결할 수 있습니다.
사용 방법
<a href="https://example.com" target="_blank" rel="noopener">Example Website</a>위 코드에서 target 속성에 _blank 값을 지정하여 새 창에서 링크를 열 수 있도록 합니다. rel 속성에 noopener 값을 추가하여, 새로운 창에 영향을 주는 부모 창과의 연결을 끊어 보안 상의 이슈를 방지합니다.
nofollow
nofollow 속성은 링크된 페이지의 검색 엔진 순위에 영향을 미치지 않도록 하기 위해 사용됩니다. 웹 사이트의 검색 엔진 최적화(SEO)를 고려할 때, 다른 웹 사이트로 연결되는 링크를 작성할 때 nofollow 속성을 사용하여 검색 엔진 로봇이 해당 링크를 따라가지 않도록 합니다. 이는 스팸 링크를 방지하고, 웹 사이트의 검색 엔진 순위를 높이기 위해 사용됩니다.
사용 방법
<a href="https://example.com" rel="nofollow">Example Website</a>위 코드에서 rel 속성에 nofollow 값을 지정해줌으로써, 검색 엔진 로봇이 해당 링크를 따라가지 않도록 합니다. 이는 SEO 관련 이슈를 해결하기 위해 사용됩니다.
3가지 속성을 한 번에 사용
<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">Example Website</a>위 코드에서 rel 속성에 noopener, noreferrer, nofollow를 모두 추가합니다. 이렇게 함으로써 링크를 클릭할 때 새로운 창에서 열리고, 보안 문제가 발생하지 않으며, 링크가 스팸 링크로 간주되지 않습니다.
하지만, 모든 경우에 noreferrer, noopener, nofollow를 함께 사용하는 것이 절적하지 않을 수도 있습니다.
예를 들어, 링크가 믿을 수 있는 사이트로 연결되는 경우 보안과 관련된 문제가 발생하지 않을 수 있으므로, noreferrer 또는 noopener 속성을 생략할 수도 있습니다. 또한, 링크된 페이지가 검색 엔진 순위에 영향을 미치는 것이 중요하지 않은 경우에는 nofollow 속성을 생략할 수도 있습니다. 따라서, 각 경우에 맞게 속성을 선택적으로 적용하는 것이 좋습니다. :)
