FrontEnd/React.js
[React.js] Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers
푸고배
2022. 6. 20. 21:25
target="_blank" 속성값을 사용해 새로 오픈한 페이지에는 window.opener가 존재한다는 것을 확인할 수 있다.
이는, 새로 오픈된 페이지에서 이전 페이지를 제어할 수 있는 권한이 있다는 것인데, 최악의 경우 window.opener 객체를 사용해 악의적인 동작이 가능하다.
하지만, rel="noopener"를 사용하면 새로 열린 페이지에서 window.opener 객체가 존재하지 않는 것을 확인할 수 있다.
유사한 기능으로 noreferrer는 새로 열린 사이트가 window.opener 객체를 조작하지 못하게 한다.
차이점은 noreferrer는 다른 페이지를 탐색할 때 브라우저가 참조 웹 페이지의 주소를 보내지 못하게 한다.
최신 브라우저의 대부분은 noopener를 지원하지만, noopener를 지원하지 않는 구형 브라우저의 적용을 위해 두 가지를 모두 사용하는 것이 좋다.
Reference
반응형