target='_blank'의 문제
html파일에서 a 태그 사용 시, target='_blank' 를 자주사용한다.
새창에서 열리는게 편하기 때문..
근데 새창에서 열 때, 성능과 보안면에서 취약해질 수 있다. (참고)
성능과 보안 취약해진다는 그이유..............................................................................................................................................................
내가 원래 열었던 페이지를 A라 하고, 원래 페이지에서 내가 링크타고 새탭으로 열었던 페이지를 Z 라고 한다면.
원래 A와 Z는 탭이 각각이니까 각각인 것 같지만, 사실은 Z가 원래 열었던 A를 참조하고 있다.
그래서 성능면에서는, 새로운 Z페이지에 javascript 동작이 엄청나게 많은 경우 A의 성능이 저하된다.
보안면에서는, Z가 javascript를 통해서 A에 접근이 가능해진다.
'나는 A랑 관련이 있어, 내가 바로 보조 브라우징 컨텍스트니까!!!'
자기를 생성한 A(원본 브라우징 컨텍스트)를 '오프너브라우징 컨텐스트'라는 근거를 가지고 javascript를 통해서 Z는 A에 접근이 가능해진다.
이를 이용한 피싱공격을 'Tab Naving'이라고 부른다.
그래서 등장한 rel="noopener"
Z는 A 원본 페이지에 javascript의 window.opener를 이용해서 A에 접근가능 하는 것이다. 근데 만약,
noopener를 적용하면, 벌어지는 일
window.opener=null이 된다.- 브라우저 컨텍스트의 연결을 끊어달라고 브라우저에게 말할 수 있다.
- 따라서, Z가 A에 Javascript를 사용해서 악의적으로 동작하는 것을 막을 수 있다.
- 검색 엔진 최적화에는 영향을 미치지 않는다.
rel="noreferrer"
noopener랑 똑같이 새로열린 사이트가 window.opener 객체에 접근하는 것을 방지한다.
근데 더 플러스된 것은,
브라우저가 해당 페이지를 불러오면서 HTTP요청 보낼 때, refer헤더를 생략한다.
그래서, 링크를 클릭 했을 때, Z가 열리면, 나(Z)는 A에서 왔다는 것을 숨길 수 있다.
마치, 이전의 위치추적을 당하지 않을 수 있는 듯하다. 따라서 개인정보 보호를 높일 수 있게 된다.
rel="nofollow"
검색엔진에게 링크된 웹사이트를 신뢰할 수 없으니까, 내 웹사이트랑 엮어서 신뢰도 판단을 하지말아줘! 라고 알리고 싶을 때 사용한다.
구글이 웹사이트 간 링크 연결 그래프, 페이지 평판도와 신뢰도를 바탕으로 검색결과를 순위화해서 띄우는데, 각 블로그에 무분별하게 달린 스팸 댓글이 페이지 순위에 영향을 주었다고 한다.
그래서 사이트 소유자의 의도랑 무관하게 평판이 내려가서 검색결과 랭킹에 영향을 주게 되었다고 한다. 그래서 nofollow 속성값은 댓글이나 포럼같은 참여 콘텐츠의 링크에 사용하기 적합하다.
보안 이슈 해결법:
- 보안 이슈가 무엇인지에 따라 다르겠지만,
target="_blank"할 때는, 일반적으로noreferrer,noopener를 둘다 사용하도록 한다.
구형브라우저의 경우에는 `noreferrer`만 지원하는 경우도 있다고 한다.
또, 크롬과 사파리의 경우, `target="_blank"` 가 달린 하이퍼링크 기본 동작으로 `noopener`가 되도록 변경되었다고는 하지만,
사파리 2018년, 크롬의 경우 2021년 --> 비교적 최근,, 에 기본 동작 변경이 이뤄진 것이기 때문에 아직 쓰도록 한다.
하지만, 앞으론 점차 안쓰게 될지도..- 검색 엔진을 통한 링크가 댓글이 달리는 링크를 주로 사용해서, 스팸 댓글 방지 해야한다면 --> nofollow를 사용합니다.
