window.open()과 target, rel 속성
📌 window.open()
1 | window.open("https://www.w3schools.com"); |
새 브라우저 탭에서 해당 URL을 연다.
- 기본값이
target="_blank"이다.
❗️ 하이퍼 링크를 신뢰할 수 없다면…
target="\_blank" 속성이 적용되어 있다면
새롭게 열린 페이지가 원본 페이지와 동일한 프로세스에서 실행될 수 있다.
새로 열린 페이지는 보조 브라우징 컨텍스트이다. 새로 열린 페이지는 자기 자신을 생성한 원본 브라우징 컨텍스트를 오프너 브라우징 컨텍스트라는 이름으로 참조하고 있다.
만약 보조 브라우징 컨텍스트가 많은 JavaScript를 실행하는 경우 원본 페이지의 성능이 저하될 수 있다.
- 단, 위와 같은 문제는 최신 브라우저에서 발생하지 않도록 처리가 되어있다.
👿 Tab nabbing(탭 내빙) - 피싱 공격
가장 큰 문제는 새롭게 열린 페이지에서 JavaScript를 통해 원본 페이지에 직접 접근이 가능해지는 문제이다.
window.opener를 이용해 원본 페이지에 접근 가능한데 이를 **탭 내빙(Tab nabbing)**이라고 부른다.
- 사용자가 새탭을 열었다.
- 해커가 새 탭에 window.opener.location을 사용하여 원본 사이트와 교묘하게 다른 링크로 바꾼다.
- 사용자는 본래 탭으로 돌아오니 로그인일 풀렸다고 생각하여 정보를 입력한다.
- 피싱 사이트가 사용자의 로그인 정보를 탈취한 후 다시 원래 링크로 되돌려 놓는다.
이러한 탭 내빙 문제는 target="_blank" 속성이 적용되어 있을 때만 발생한다.window.open() 메서드는 기본속성이다.
그러므로 이러한 피싱 공격을 막기 위해 rel='noopener' 속성을 설정해줘야한다.
noreferer
noreferer는 noopener와 동일한 기능을 하지만 추가로 브라우저가 해당 페이지를 불러오면서 HTTP 요청을 보낼 때 referer Header를 생략하는 기능이 있다.
즉, noreferer 속성이 있으면 링크 클릭 시 해당 유입이 어디에서 발생하였는지에 대한 정보가 새 페이지에 제공되지 않는다.
- 일반적으로는 noopener noreferer 두 속성을 같이 적어준다.
nofollow
nofollow 속성은 검색 엔진에게 링크된 웹 사이트를 보증하거나 신뢰할 수 없으니 현재 웹 사이트와 연결하지 않기를 바라는 경우에 사용한다.
- 스팸 댓글이 등장하여 나오게 되었다.
스팸 댓글이 달린 게시물은 사이트 소유와 상관없이 평판이 내려가게 되어서 구글이 이에 대한 해결책으로 nofollow 를 제시하였다.
nofollow 속성이 설정된 링크는 크롤링하지 않고 검색 엔진에도 영향을 미치지 않는다.
그러므로 댓글이나 포럼과 같이 사용자가 참여 콘텐츠의 링크에 적합하다.
🏓 소감
allWAIs 링크 컴포넌트를 만들다가 window.location.href 속성을 사용하다가 새창을 열어주는 메서드인 window.open() 속성을 알게되었다.
그러다가 예전에 HTML 수업 때 배운 noopener, noreferer 속성이 잘 기억이 나지 않아 정리하기 위해 공부하였다.
이번 기회에 제대로 정리할 수 있어서 오래 기억에 남을 것 같다.