안녕하세요!
오늘은 우리가 자주 쓰는 target="_blank" 속성과 함께 알아두면 좋은
rel="noopener"의 역할과 그 이유에 대해 이야기해보려고 해요.
새 창으로 링크를 열기 위해 target="_blank"를 쓰는 건 퍼블리싱에서 정말 흔한 일이죠.
근데 여기에 생각보다 중요한 보안 이슈가 숨어있다는 사실, 알고 계셨나요?
target="_blank"의 보안 문제?
기본적으로 아래와 같은 마크업은 익숙하실 거예요
이 마크업은 현재 페이지는 그대로 두고, 링크를 새 탭(또는 창)에서 열도록 해줍니다.
하지만 문제는 이 새 창이 열렸을 때, 원래 창(window.opener)에 접근할 수 있다는 점이에요.
즉, 외부 사이트가 여러분의 페이지를 조작하거나 리다이렉트시킬 수 있다는 뜻이죠.
예를 들어 이런 일이 가능해요
외부 링크에서 이런 코드가 실행되면,
사용자가 보고 있던 원래 페이지가 갑자기 피싱 페이지로 바뀌어버릴 수도 있어요.
이건 보안적으로 꽤 심각한 문제예요.
그래서 등장한 게 바로 rel="noopener" 속성이에요!
rel="noopener"는 어떤 역할을 하나요?
이 속성을 추가하면,
새 창에서 window.opener 객체가 null로 설정되어
새 창에서 원래 창에 접근할 수 없게 돼요.
결과적으로 보안상 안전한 새 창 열기 방식이 됩니다.
추가로,
rel="noreferrer"는 noopener 기능도 포함하면서,
Referer 헤더까지 제거해서 링크 출처 정보도 넘기지 않게 돼요.
하지만 내부 링크나 추적이 필요한 경우엔 사용에 주의가 필요해요.
실무 팁!
외부 사이트로 연결되는 모든 target="_blank" 링크엔 무조건 rel="noopener" 추가하는 습관을 들이자
내부 링크에도 쓸 수 있지만, noreferrer는 추적을 끊으므로 주의
일부 CMS나 라이브러리(예: 워드프레스, React Router)는 기본 적용돼 있는 경우도 있음
noopener를 빠뜨리면 보안 취약점 보고서에 걸릴 수 있어요!
정리해볼게요!
target="_blank"는 새 창을 여는 데 쓰이지만, 보안상 opener 객체를 통해 원래 페이지가 공격당할 수 있어요
이를 막기 위해 rel="noopener"를 함께 써서 새 창에서 원래 창 접근을 차단해야 합니다
퍼블리셔, 프론트엔드 개발자 모두가 링크 하나에도 보안에 대한 의식을 가져야 하는 시대예요
사소해 보이는 링크 하나에도 보안 취약점이 생길 수 있어요.
단순히 "열린다"가 중요한 게 아니라, "안전하게 열린다"는 걸 신경 쓰는 게
우리가 지향해야 할 마크업의 방향이라고 생각해요.
HASY도 실무에서 마주치는 작지만 중요한 디테일들을
어떻게 하면 더 안전하고 효율적으로 다룰 수 있을지, 늘 고민하고 있습니다.
감사합니다!
