2301112 30분 TIL (a태그 noopener noreferrer / SOLID)
1. noopner와 noreferer가 뭘까?
코드를 보다 a태그에서 noopner와 noreferer라는 속성을 봤는 데 궁금해서 찾아봤다.
a태그에 새 탭을 띄울 때 사용하는 target="_blank"라는 속성만 사용하면 보안상의 취약점이 생기고 퍼포먼스가 떨어진다고 한다!
흐헉!!
1) 보안상의 취약점
: 새 탭에 링크된 페이지가 악의를 가진 사람이 만든 것이고 이 페이지에서 자바스크립트 로직을 통해 부모 윈도우의 URL을 바꿔치기 할 수도 있다. 이렇게 부모 윈도우의 정보를 마음대로 사용 및 조작한다면 개인 정보 유출을 유도하는 가짜 페이지로 부적절한 리디렉션 하는 등 보안상의 문제가 발생 할 수 있다.
해결법: noreferrer 지정
- noreferrer 지정 시 다른 페이지로 이동할 때, 링크를 건 페이지의 주소 등의 정보를 브라우저가 Referer로 송신하지 않는다.
2) 퍼포먼스 저하
: "_blank"로 열린 페이지는 링크를 건 페이지와 같은 프로세스를 통해 실행된다.
이때 가령 링크된 페이지에서 높은 부하를 유발하는 자바스크립트가 실행 시 링크를 건 페이지도 영향을 미쳐 퍼포먼스가 떨어지는 문제가 발생할 수 있다
해결법: noopener 지정
- noopener 지정 시 링크된 페이지에서 window.opener를 사용해서 링크를 건 페이지를 참조(reference)할 수 없다.
이때 두 페이지는 별개의 프로세스로 취급되기 때문에 서로 연결되어 퍼포먼스가 저하되는 일을 방지한다.
참고자료
https://joshua-dev-story.blogspot.com/2020/12/html-rel-noopener-noreferrer.html
2. SOLID 원칙이란 ?
요즘 디자인 패턴과 디자인 설계에 대한 관심이 많아 찾던 중 알게된 디자인 설계 패턴이다.
각 문자가 다음과 같은 5가지 디자인 원칙 중 하나를 나타내는 약어라고 한다.
- 단일 책임 원칙(SRP)
- 개방 폐쇄 원칙(OCP)
- Liskov 치환 원칙(LSP)
- 인터페이스 분리 원칙(ISP)
- 의존성 역전 원칙(DIP)
모두 명확해서 감이 잡히는데 DIP를 어떻게 써야하는 지 모호한 것 같다.
이 부분을 더 찾아보고 정리해보자.
참고자료