새탭에서 안전하게 링크 열기: noopener와 noreferrer 속성

VS Code의 Emmet 자동완성 기능을 활용하면, a 태그에 target="_blank"를 설정할 때 자동으로 rel="noopener noreferrer"가 추가됩니다. 이 기능이 자동으로 추가되는 이유는 무엇일까요? ref 속성 rel은 "relationship"의 줄임말로, 웹 브라우저와 검색 엔진에게 현재 문서와 링크된 문서 사이의 연관 관계를 명시합니다. 일반적으로 사용자에게 직접적인 영향을 주지는 않습니다. 보안상의 이유 target="_blank"를 사용하면, 연결된 웹 페이지가 새 탭에서 열리게 됩니다. 이 과정에서 보안상 취약점이 발생할 수 있습니다. 예를 들어, 연결된 페이지가 악의적인 사람에 의해 만들어졌다면, window.opener.location을 조작해 부모 윈도우를 가짜 페이지로 리다이렉션할 가능성이 있습니다. noopener와 noreferrer noopener: 이 속성을 사용하면, 새로 열린 탭은 원본 페이지와 window.opener를 통한 스크립트 액세스를 허용하지 않습니다. 즉, window.opener의 값이 null로 설정됩니다. 이는 탭나핑(tabnapping) 공격을 방지하는 데 유용합니다. noreferrer: 이 속성은 브라우저가 새 탭을 열 때 'Referer' 헤더를 전송하지 않도록 합니다. 이를 통해 참조자 정보의 수집을 방지하게 됩니다. target="_blank"를 사용할 때는 이와 관련된 보안 취약점을 해결하기 위해 rel 속성에 noopener와 noreferrer를 추가하여 사용자에게 더 안전한 환경을 제공해보세요.

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 9월 17일 오전 12:08

 • 

저장 9조회 2,149

댓글 0

    함께 읽은 게시물

    이번 구글 I/O, 구글 여러분들 행사전에 입이 근질근질하셨겠네요. ㅎㅎ


    내용은 다들 소개하셨으니 한줄평하자면, 구글이 처음으로 OpenAI에 비해 반발짝정도 앞서나간 이벤트인 것 같습니다.


    더불어 출시한 모델과 서비스들을 보니.. 역시 AI는 돈빨이며 구글이 돈빨을 제대로 세웠.. 쿨럭..

    조회 418


    주니어 개발자들이 읽으면 좋은 테크 아티클 모음📚

    F-Lab 에서 주니어 개발자들이(사실 개발자라면 누구나) 보시면 좋을 아티클 모음을 공유해 주었네요! 검색엔진부터 비동기 처리, NoSQL 등 다양한 분야의 아티클들이 공유되어 있으니 관심있으신 분들은 보시면 좋겠습니다. F-Lab 에서 공유해주신 아티클 주제를 나열해보면 다음과 같습니다. 📌 구글이 직접 말하는 검색엔진의 원리 (tali.kr) 📌 검색 엔진은 어떻게 작동하는가 (xo.dev) 📌 네이버의 검색엔진의 특징과 알고리즘 (tistory.com) 📌 [네이버 블로그]네이버 검색의 원리 : 네이버 블... 더 보기

    주니어 개발자들이 읽으면 좋은 테크 아티클 모음

    F-Lab : 상위 1% 개발자들의 멘토링

    주니어 개발자들이 읽으면 좋은 테크 아티클 모음

     • 

    저장 136 • 조회 3,699


    오늘은 투자 완료일이자 아미고 런칭 100일. 별 생각 없었는데, VC 파트너님이 축하한다며 파티 안하냐고 전화주셨길래 편의점에서 맥주 한 캔과 꼬깔콘으로 조촐하게 파티 했습니다. 이제부터가 진짜 시작이겠죠. 잘 부탁드립니다.

    ... 더 보기

    조회 1,500


    이직의 조건

    

    ... 더 보기

    개발자의 장애 공유 문화

    ... 더 보기

    개발자의 장애 공유 문화

    K리그 프로그래머

    개발자의 장애 공유 문화

     • 

    저장 19 • 조회 3,866


    감사합니다. 멋진 서비스 잘 만들어보겠습니다.

    ... 더 보기

    조회 1,198