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를 어떻게 써야하는 지 모호한 것 같다.

이 부분을 더 찾아보고 정리해보자. 

 

 

 

 

 

참고자료 

https://itchallenger.tistory.com/627