몰랐던 프론트 세계..!
업무 중에 새로운 탭을 열어서 링크 이동시켜달라는 사양이 있어서,
'아! 이건 아주 간단히 되겠구나~~'하고 PR을 날렸지만.. Approve받기 실패한..
가슴 아프지만, 내일의 나를 위해 기록해두자!
우선, 새로운 탭을 열고 '링크' 이동을 하기 위한 속성으로는 `_blank` 가 있다.
이거 자체로 '새 탭으로 이동' 은 가능하다!
문제는 Security(보안) 그리고 SEO(Search Engine Optimizer)!
결론부터 말하자면, `_blank` 속성은 반드시 아래의 속성과 같이 써야한다.
3가지 속성을 모두 쓰는 것이 좋다!
보안 관련된 속성부터 보자면, `noopener`, `noreferrer`!
window.opener`noopener`를 사용하지 않으면, 링크로 이동한 탭에서 `window.opener`를 이용해서 이전 페이지(부모 페이지)를 제어할 수 있게 된다.
문제는 이 제어가 가능한 점을 악용할 수 있다는 것.
window.opener로 무엇을 할 수 있을까?
- 부모 페이지에서 사용된 변수에 접근이 가능하다.
- 부모 페이지에 정의된 함수를 실행할 수 있다.
위의 두 가지 점만 보더라도, 일반 유저에게 이러한 제어권을 넘기는 것 자체가 위험..!
`noreferrer` 도 `noopener`와 마찬가지로 window.opener를 감추지만, 차이점은 `noreferrer`는 브라우저가 참조할 수 있는 이전 페이지의 정보도 감춘다는 것!
따라서, 로그분석툴 등을 사용 중이라면, 유저의 행동패턴 추적이 어려울 수 있다. 이게 문제가 되는 이유는 이 정보가 간단하지 않은 디버깅에서 아주 중요한 역할을 하기 때문에... 경험해본 사람은 알 것..
다음 SEO 랑 관련해서 `nofollow`!
SEO에서 중요한 것 중 하나가 신뢰도 높은 링크를 보유하는 것!
이를 통해서 서비스의 SEO 순위를 높일 수 있다!
우선 '링크쥬스' 라는 SEO 용어를 알아야하는데,
링크쥬스란, 한 페이지 또는 다른 페이지로 전달되는 가치 나 자산을 나타내는 용어 라고 한다.
예를 들어, 하나의 페이지에 더 많은 수의 링크가 있을수록 SEO는 더 신뢰도 높은 페이지로 인식하고 검색순위를 올린다는 것.
이때, 하나하나의 링크를 쥬스라는 개념으로 더 많은 쥬스를 소유한 페이지가 더 유익한 페이지로 인식하는 방식이다.
`nofollow`는 이 링크쥬스를 전달하고 싶지 않을 때 사용한다.
TBD: nofollow에 대해서는 좀 더 알아봐야겠다..!
'개발' 카테고리의 다른 글
| Jest 사용법 (Usage) (0) | 2021.05.30 |
|---|---|
| 프론트엔드 vs. 백엔드 테스트 (0) | 2021.05.22 |
| Java 접근 제한자 (Access Modifier) (0) | 2021.05.15 |
| concourse 테스트 (0) | 2021.05.05 |
| circle-ci 테스트 (0) | 2021.04.30 |