noreferrer, noopener, nofollow: 보안, SEO 및 처리 방법

인간은 망각의 동물이다. 특정한 행동이나 생각을 자주 하지 않으면 우리 뇌 속에서는 신경의 가지치기 현상이 일어난다고 한다. 우리가 어떤 생각, 기분, 행동을 수행하지 않으면 뇌는 그와 연관된 뉴런들을 발화시키지 않는데, 그 결과 그러한 생각, 기분, 행동이 점점 약해지다가 결국 시들어버리고 잊게 되는 것을 신경 가지치기라고 한다. 그렇기 때문에 우리는 초등학교 시절처럼 리코더를 연주할 수 없는거고, 곡면의 부피를 구하는 적분 공식이나 근의 공식등에 대해 더는 기억하지 못하는 것이다. 쉽건, 어렵건 지금 나는 무조건 많이 생각하고 자꾸 써보고 사용해보는 것 밖에 방도가 없다 생각한다.

 

 

웹 개발에서 noreferrer, noopener, nofollow 등의 속성은 보안 및 검색 엔진 최적화 (SEO) 측면에서 중요한 역할을 한다. 이러한 속성을 사용하는 이유와 보안 이슈에 대처하는 방법, 그리고 SEO 관련된 고려 사항에 대해 알아보았다.

 

 

1. noreferrer

rel="noreferrer"은 하이퍼링크를 통해 다른 웹 페이지로 이동할 때, Referer 헤더를 제거하는 역할을 한다.
Referer 헤더는 사용자가 어떤 웹페이지에서 링크를 클릭했는지를 알려주는데, 이를 통해 사용자의 개인 정보가 노출될 수 있는 보안 문제를 방지하므로, 개인 정보 보호를 강화하기 위해 외부 링크에 대해 항상 noreferrer를 주로 사용한다.

<a href="https://example.com" rel="noreferrer">외부 링크</a>

 

 

 

2. noopener

rel="noopener"은 하이퍼링크를 통해 다른 웹 페이지로 이동할 때, 새로 열린 창의 window.opener 속성을 null로 설정하여 보안 문제를 예방한다.
새 창이나 탭이 window.opener를 통해 부모 창에 접근하면서 보안 문제가 발생할 수 있는데, noopener를 사용하여 외부 링크가 새 창이나 탭에서 열릴 때, 부모 창에 접근하는 것을 방지할 수 있다.

 

<a href="https://example.com" target="_blank" rel="noopener">새 창으로 열기</a>

 

 

 

3. nofollow

 

`rel="nofollow"`는 검색 엔진에게 해당 링크를 따라가지 말라는 지시를 제공하며, 주로 사용자가 작성한 댓글이나 외부에서 가져온 링크 등에 적용하여 스팸 링크로 간주되지 않도록 한다.
사용자 입력이나 신뢰할 수 없는 출처에서 가져온 링크에 nofollow를 적용하여 스팸 링크를 방지한다.

 

<a href="https://example.com" rel="nofollow">신뢰할 수 없는 출처의 링크</a>

 

 

또한, nofollow는 검색 엔진 크롤러가 해당 링크를 따라가지 않도록 막는 역할을 하기 때문에, SEO에 중요한 페이지 간의 링크 구조를 고려하여 nofollow를 사용한다.

<a href="https://example.com" rel="nofollow">SEO에 영향을 미치지 않을 링크</a>

 

 

결론:
각 속성은 웹 보안 및 SEO를 향상시키기 위한 다양한 목적으로 사용되며, 특히 사용 시에는 해당 상황에 적합한 속성을 선택하여 웹사이트의 보안성과 검색 엔진 최적화를 고려하는 것이 중요하다.