링크에 noopener noreferrer 사용하는 이유
얼마전 공신력 있는 어떤 단체의 HTML 오픈 소스를 보다가 rel="noopener noreferrer"라는 코드를 처음 보았습니다. noopener와 noreferrer는 어떤 역할을 하고 일반적으로 필요한 코드일까요❓
우리는 HTML 코딩에서 링크를 만들 때 <a> 요소를 사용합니다. 그리고 <a> 요소의 href 속성에 명시한 웹 페이지(URL)를 새 탭에서 열게 할 경우에는 target="_blank" 속성을 추가합니다. 그런데 여기서 target="_blank"만 사용하면 보안상 취약점이 생기고 퍼포먼스가 떨어질 우려가 있다는 사실❗ 아셨나요? 이 문제를 해결하는 방법을 설명해 보겠습니다.
target 속성의 값
본론으로 들어가기 전에, target 속성에 어떤 값을 지정할 수 있는지 정리해 보겠습니다. target은 'href 속성의 URL에 해당하는 웹 페이지를 어디에서 열 것인가?'를 지정하기 위한 속성으로 크게 2가지가 있습니다.
첫 번째로 _self는 연결한 웹 페이지를 현재의 탭에서 엽니다. 코드는 아래와 같이 작성합니다. 하지만 _self는 기본 설정이므로 target 속성을 생략하더라도 같은 동작을 합니다.
<a href="연결할 페이지의 URL" target="_self">현재의 탭에서 보기</a>두 번째로 _blank는 연결한 웹 페이지를 새로운 탭에서 엽니다. 코드는 아래와 같이 작성합니다.
<a href="연결할 페이지의 URL" target="_blank">새 탭에서 보기</a>target="_blank"의 문제점
1. 보안상 취약점이 생긴다
target="_blank"가 사용된 링크를 사용자가 클릭하면 새 탭에서 링크된 페이지가 열립니다. 가령 이 링크된 페이지가 악의를 가진 사람이 만든 것이고, 이 페이지의 JavaScript에서 window.opener로 부모 윈도우(링크를 건 페이지)의 오브젝트에 접근해서 'window.opener.location = 새로운URL'로 부모 윈도우의 URL을 바꿔친다고 생각해 보세요.
이렇게 부모 윈도우의 정보를 마음대로 사용하거나 조작한다면 어떤 일이 벌어질까요? 개인정보 유출을 유도하는 가짜 페이지로 부적절한 리디렉션을 하는 등의 보안상에 심각한 문제가 발생할 수도 있습니다.
2. 퍼포먼스가 떨어질 수 있다
target="_blank"가 사용된 링크에 의해 열린 링크된 페이지는 링크를 건 페이지와 같은 프로세스를 통해서 실행됩니다. 그러므로 가령 링크된 페이지에서 높은 부하를 유발하는 JavaScript가 실행되고 있으면 링크를 건 페이지에도 그 영향이 미쳐져 의도하지 않게 퍼포먼스가 떨어지는 문제가 발생할 수도 있습니다.
target="_blank"의 문제점 해결 방법
1. noopener 지정
noopener(노오프너)를 지정하면, 링크된 페이지에서 window.opener을 사용해서 링크를 건 페이지를 참조(reference)할 수 없게 됩니다. 더불어 링크된 페이지와 링크를 건 페이지는 별개의 프로세스로 취급되기 때문에 서로 연결되어 퍼포먼스가 떨어지는 일도 없게 됩니다.
신뢰할 수 없는 페이지로 이동하는 링크를 부득이하게 만들어야 할 때 사용하면 유용하겠죠?
2. noreferrer 지정
noreferrer(노리퍼러)를 지정하면 다른 페이지로 이동할 때, 링크를 건 페이지의 주소 등의 정보를 브라우저가 Referer: HTTP 헤더로 리퍼러(referer 또는 referrer)로서 송신하지 않습니다.
3. noopener와 noreferrer 코드 작성
코드는 아래와 같이 작성합니다. rel 속성은 링크된 페이지(href="연결할 페이지의 URL")와의 관계(relationship)를 나타냅니다. 그리고 공백으로 구분해서 관계 목록을 나열하여 지정할 수 있습니다.
<a href="연결할 페이지의 URL" target="_blank" rel="noopener noreferrer">새 탭에서 보기</a>맺음말
target="_blank"의 문제점과 그 해결 방법에 대해서 소개하였습니다.
정리하면 target="_blank"에는 보안상 취약점이 발생하고 퍼포먼스가 저하되는 2가지 문제가 있고, 이 문제를 해결하기 위해서는 noopener noreferrer를 지정해야 한다는 것입니다.
어느 유명한 웹사이트 제작 플랫폼에서는 target="_blank"에 자동으로 rel="noopener noreferrer"가 붙는다고 합니다. 그만큼 일반화되었고 이제는 필수 요소라는 것을 보여주는 증거입니다.
이 글을 읽고 '링크에 noopener noreferrer 사용하는 이유'에 대한 궁금증이 조금은 풀렸으면 좋겠네요🙂
noopener noreferrer 이런 것도 있었군요. 보안을 위해서라도 새창에서 여는 링크는 noopener를 지정해야겠네요.
답글삭제역시 웹 개발은 복잡한 것 같습니다.
아마도 기억에 구글 개발자 커뮤니티에 있는 내용이었는데
삭제블로그 글 작성할 때 자동으로 지정되게 끔 수정해 주면 좋을 텐데요^^
안녕하세요. 수아님 덕분에 noopener와 noreferrer와의 차이점을 쉽게 이해했습니다. 블로거(Blogger) 링크 삽입시 nofollow에 체크할 수 있도록 되어 있는데 'rel=nofollow'는검색 봇이 팔로우하지 않는 것으로 알고 있습니다. nofollow는 일반적으로 어떨 때 사용하는 것인가요?
답글삭제보람, 감사합니다^^/
삭제개발 작업할 때는 사용해 본 적 없어서 잘 모르겠네요. 블로그에서는 저의 경우, 글 본문에 샘플 페이지 링크 걸 때 사용합니다.
노란글씨로 경고창이 뜨기에 살펴봤더니 보안상 취약점이 있다고 나오네요. 덕분에 좋은 공부가 되었습니다.감사합니다.
답글삭제워드프레스 블로그에 noopener, noreferrer 옵션이 자동으로 붙여서 궁금했는데 잘 배우고 갑니다.
답글삭제안녕하세요? 좋은 글 잘 보았습니다. 감사합니다.
답글삭제여전히 해결되지 않은 부분이 있어, 답답한 마음에 문의 드려요.
티스토리 블로그에서 글 작성하면서 자신의 또 다른 글을 링크 걸때,
'현재창 열기'를 하자면 HTML소스에서 target="_blank"를 삭제해야 되겠지요?
그때 뒤에 따라붙는 rel="noopener noreferrer"도 함께 삭제해줘야하는지,
아니면 target="_blank"만 삭제하는게 시스템에 부합하는 것인지 잘 모르겠습니다.
어떻게 해야 할까요?
When using target, consider adding rel="noreferrer" to avoid exploitation of the window.opener API.
삭제Linking to another page using target="_blank" will run the new page on the same process as your page. If the new page is executing expensive JS, your page's performance may suffer. To avoid this use rel="noopener".
target 옵션을 별도로 쓰지 않는 경우 noopener, noreferrer는 불필요합니다.
바쁘시지만 ... 티스토리 블로그원문에서 링크걸기에 주소를 기재하고 새창으로 열기를 선택한후 작성한글을 다시 보면 ...본문에 링크로 가기윈한 문구아래쪽에 파란색등의 링크 표시 줄이 나타나서 영 깔끔치가 않고 보기싫어서 ..안생기게 하고싶은데..아무리 찾아봐도 안보이네요 .혹시 태그 좀 알려주실수있을까요?
답글삭제