[직접] noopener, noreffer | opener바꾸어보며 위험성 체험하기

천지윤·2024년 3월 3일
1

기술

목록 보기
5/6
post-thumbnail

a링크에 noopener, noreffer를 적어주어야 보안성을 올릴 수 있다고 한다. 하지만 글로만 보면 필요성이 크게 느껴지지 않아서 직접 안했을 때 어떤 일이 발생할 수 있는지 확인해보았다.

noopener

1. rel="noopener" 를 적어주지 않았을 때

내 포트폴리오 페이지의 깃허브 링크를 활용해서 noopener가 무슨 역할을 하는지 알아보았다.
현재 브라우저에서 기본으로 noopener 하고 있기 때문에 확인할 수 없다. 그냥 치면 아래와 같이 null이 뜬다.

2. rel="opener" 일부러 입력해서 확인하기

따라서 a태그에 rel="opener" 를 입력해주었다.
깃허브 링크를 타고 들어가서 그 탭에서 window.opener 를 콘솔에 찍어보았다.
이 탭을 연 곳이 어디인지 표시해준다.


여기서 아래와 같이 opener의 링크를 바꾸어버리면, 내 포트폴리오 페이지는 없어지고 네이버페이지로 바뀌어있다.
(뒤로가기하면 본래 링크가 담겨있던 페이지가 나온다.)


해킹할 때는 여기에 로그인이 만료된 것 처럼꾸면서 아이디와 비밀번호는 입력하게 만든다고 한다. 이전 탭과 연결 할 수 없도록 끊어야 한다.

또한 연결되어있다면 같은 프로세스에 실행이 된다고 한다. 따라서 한 쪽이 복잡한 기능을 실행하고 있다면 연결된 다른 탭에서도 성능 저하가 발생할 수 있는 것이다.

noferrer

1. rel = "noferrer" 를 적어주지 않았을 때

일반적으로 소스 - 새로고침 - 첫번째파일 - 헤더에서 referer 에 어디서 이 링크로 접속했는지 담겨있다.

2. rel = "noferrer" 를 적으면

rel="noferrer"를 적어주면 헤더에 Referer 가 포함되어 있지 않다.
또한 rel="noopener"와 마찬가지로 opener에 접근하지 못한다.

웹을 사용하면서 링크를 눌렀을 때 refer 가 있는지 한번 확인해보자. 찾아보는 재미가 있다. IE지원을 위해 noopenernoferrer 모두 적어주는 거라고 한다..

통계를 수집할 때 직접유입으로 표시된다는 단점이 있다.

참고자료
https://yozm.wishket.com/magazine/detail/1586/
https://joshua-dev-story.blogspot.com/2020/12/html-rel-noopener-noreferrer.html

profile
호기심 많은 개발자

0개의 댓글

관련 채용 정보