HTML target 링크 보안 - rel 옵션 noopener, noreferrer, nofollow 방법과 이유
페이지 정보
조회 641회 작성일 22-06-26 14:52
본문
target 링크 보안
rel 옵션 noopener, noreferrer, nofollow
링크 타겟을 새창으로 했을 때 target="_blank"를 사용한다.
이때 보안에 취약점이 생기는 데, 이 링크 보안을 위해서 사용하는 것이 rel 옵션이다. 여기에는 noopener, noreferrer, nofollow 등이 있는데, 사용 방법과 이유 등을 설명한다.
target 링크 보안 - rel 옵션 noopener, noreferrer, nofollow 방법과 이유
target 링크 보안 문제점
이제부터 링크를 건 페이지를 A라고 하고, 링크에서 새로 열린 페이지를 B라고 하겠다.
보통 A에서 B를 새창으로 띄울 때, HTML로 링크를 거는 코드 소스는 target="_blank"다.
문제는 이 두 홈페이지가 우리가 모르게 연결될 수 있다는 것이다.
예를 들어, B사이트에 악성 코드가 있는지 모르고 링크를 걸었다고 하자.
이때 새창으로 뜬 B에서 악성코드를 이용해서 A사이트를 조종할 수 있는 보안 문제가 있다.
보통 자바스크립트의 window.opener 등을 이용하며, 가짜 페이지로 연결하거나 마음대로 스크립트를 공유하며, 주소 정보를 공유하는 문제를 일으킨다.
그래서 최근에는 target="_blank" 옵션으로 Rel을 사용한다. 사용 방법은 아래와 같다.
[code]
<a href="주소" target="링크 방법" rel="보안 옵션">클릭 대상</a>
[/code]
위에서 언급한 보안 문제를 해결하기 위해 target 태그 다음에 rel를 붙인 것이다.
링크 보안 rel 옵션 설명와 예제
A페이지에서 링크를 걸 때 Rel에는 noopener, noreferrer, nofollow을 사용할 수 있다.
각각의 의미는 아래와 같다.
- nofollow : 광고성 링크 등에 대해 검색 순위에 영향을 주지 않도록 한다.
- noopener : 링크된 B에서 링크 건 A를 연결할 수 없게 한다.
- noreferrer : 링크 건 A의 정보가 링크된 B로 연결되지 않게 한다.
이것으로 타겟 링크 예제 코드 소스를 보자면 아래와 같다.
[code]
<a href="http://www.kiss7.kr" target="_blank" rel="nofollow noreferrer noopener">www.kiss7.kr</a>
[/code]
참고로 알아둘 것은, 이런 코드들은 링크된 B사이트를 믿을 수 없을 때 반드시 사용해야 한다는 것이다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)
그러나 자신의 사이트로 링크가 들어오게 할 때는 굳이 사용하지 않아도 된다.
또한, 유명 사이트에서는 자동으로 링크에 저 코드가 붙게 만들기도 한다.