NextJS에서 링크를 새탭으로 열기: 보안과 성능까지 생각하자

메인 블로그의 인기게시물 리스트 기능을 추가하면서 새탭으로 열게 하고싶었습니다.

 

 

 

 

Next.js와 같은 React 기반 프레임워크에서는 보통 컴포넌트를 사용해 라우팅을 처리하는데, 이때 새 탭에서 링크를 열도록 하기 위해서는 몇 가지 고려해야 할 점이 있습니다.

이번 글에서는 Next.js에서 링크를 새 탭으로 열 때 필요한 방법과 함께, 보안 및 성능을 고려한 설정에 대해 알아보겠습니다.

 

 

목차

 

 

 

기본 설정: target="_blank"

 

Next.js의 컴포넌트는 서버 사이드 렌더링과 클라이언트 사이드 라우팅을 모두 지원하는 라우팅 도구입니다.

 

그런데 새 탭에서 열어야 하는 외부 링크나 특정 페이지에 대해 설정할 때는 기본적으로 target="_blank" 속성을 사용합니다.

<Link
href={/${post.url}}
target="_blank"
{ /* 여기에 링크 텍스트 */ }

위 코드에서 target="_blank"는 클릭한 링크가 새 탭에서 열리도록 해줍니다.

하지만 이 방법만 사용하면 보안과 성능 문제에 노출될 수 있습니다.

 

 

보안 문제: Tabnabbing

target="_blank"는 편리한 속성이지만, 보안 취약점을 가지고 있습니다.

 

새 탭에서 열린 페이지는 원래 페이지의 window.opener 객체에 접근할 수 있는데, 이로 인해 Tabnabbing이라는 피싱 공격에 취약해질 수 있습니다.

 

Tabnabbing은 새로 열린 페이지가 원래 페이지의 JavaScript 객체에 접근해 원래 페이지를 피싱 사이트로 변경하는 기법입니다.

사용자는 원래 페이지로 돌아왔다고 생각하지만, 사실은 피싱 사이트로 이동하게 되어 중요한 정보를 탈취당할 수 있습니다.

 

 

보안과 성능을 위한 해결책: rel="noopener noreferrer"

rel="noopener noreferrer" 속성을 추가하면 이러한 문제를 쉽게 해결할 수 있습니다.

noopener: 새로 열린 페이지가 원본 페이지의 window.opener 객체에 접근하지 못하도록 막아, 보안성을 높여줍니다.

noreferrer: 원본 페이지가 새로 열린 페이지에 정보(Referer)를 전달하지 않도록 합니다. 이를 통해 개인정보 보호가 강화됩니다.

 

 

<Link
href={/${post.url}}
target="_blank"
rel="noopener noreferrer"
{ /* 여기에 링크 텍스트 */ }

성능 향상: 메모리 사용 최적화

rel="noopener"는 no 와opener 을 이어서 쓴 것 같은데요.

단순히 보안을 강화하는 것뿐만 아니라 브라우저 성능 최적화에도 기여합니다.

 

window.opener 객체가 없으면 새로 열린 탭과 원본 탭 간의 연결이 없어지므로, 브라우저는 두 페이지 간 자원을 공유할 필요가 없어집니다.

결과적으로 불필요한 메모리 사용이 줄어들어 성능이 향상됩니다.

 

결론

Next.js에서 링크를 새 탭으로 열 때는 단순히 target="_blank"를 사용하는 것만으로는 충분하지 않습니다.

html5로 개발할때 target="_blank" 만 추가 해서 구현해놓은 부분이 많았는데, rel 속성을 추가를 고려해봐야겠습니다.

 

 

<Link
href={/${post.url}}
target="_blank"
rel="noopener noreferrer"