일반적으로 target="_blank" 를 사용할때 우리는 rel 요소를 사용하지 않죠.

<a href= '/test.php' target="_blank">test</a>

그래서 최근 이런 취약점을 이용해 우리의 사이트를 피싱을 사용하여 정보를 빼가는 일들이 증가하고 있습니다.

위 일반적인 링크를 클릭하게되면 자격증명을 쉽게 넘겨주게 됩니다.

그래서 아래 처럼 rel 요소를 추가해서 보안 설정을 할 수 있습니다.

<a href= '/test.php' rel="noopener noreferrer" target="_blank">test</a>

참고) rel 속성값

rel 속성은 링크된 문서와의 관계(Relationship)을 지정함.

rel을 사용할수 있는 태그는 a, area, link이며 이 태그에 rel 요소의 속성으로 사용합니다.

rel 속성은 사용자에게 직접 혜택을 주는것은 아니지만

브라우저나 검색엔진에게 링크 관계에 대한 정보를 주어 사용자의 요청에 더 정확한 대응이 가능하게 해줌.

이 속성값을 지정하다보면 한 가지 속성만으로 성격을 단정짓기 어려운 경우가 생김.

2가지 이상의 속성값을 지정할 시에는 속성값을 띄어쓰기로 구분함. (ex> rel = "alternate external")

rel은 href 속성의 추가 정보이므로 href 속성이 있을때만 지정합니다.

rel은 주로 헤더에서 link 주로 사용해 왔지만 최근에는 a, area에도 확장 사용되고 있습니다. 

위 보안 이슈에 따른 a 요소를 기준으로 rel 속성값을 간략히 설명하겠습니다.

1) rel = "alternate"

현재 문서를 대체하기위한 문서 링크를 지정. 인쇄용 문서, 번역 문서처럼 현재 문서와 같은 내용이지만 형식이 다른 문서라는 사실을 알려줌. (link, a, area)

2) rel = "author"

현재 문서의 저작자에 관한 문서 링크를 지정. (link, a, area)

3) rel = "bookmark"

고유 주소를 가진 문서 링크를 지정. 현재 문서의 주소가 변경될 가능성이 있다면 사용자 고유의 주소로 이동시킨 다음 즐겨찾기 등록이 이뤄지도록 해야함. 이럴때 bookmark 속상값을 사용 (a, area)

4) rel = "external"

외부에 있는 문서를 지정하기위한 속성 (a, area)

5) rel = "help"

도움말이 있는 문서 링크를 지정하기 위한 속성. (link, a, area)

6) rel = "license"

현재 문서의 저작권 정보가 있는 문서 링크를 지정 (link, a, area)

7) rel = "nofollow"

검색엔진이 링크된 문서로 따라가지 않도록 지정하는 속성. 검색엔진이 문서 내의 모든 링크를 따라가지 않게 하려면 meta 요소에 nofollow를 지정하고 특정 링크마다 개별적으로 지정하려면 a, area 요소에 지정함. (a, area)

8) rel = "noreferrer"

링크를 선택하더라도 레퍼러가 발생하지 않도록 문서 링크를 지정. 링크를 통해 문서에 접근시 링크가 있는 문서의 url이 링크로 들어온 문서의 웹서버로 전달됨. 이 url 정보를 레퍼러라고 함. noreferrer을 지정하면 레퍼러를 전송하지 않음. (a, area)

9) rel = "sidebar"

링크된 문서를 사이드바 용도로 지정하는 속성. (link, a, area)

10) rel = "tag"

현재 문서에 대한 태그를 지정. 검색엔진이 핵심 키워드로 인식하고 인덱싱 작업의 효율을 높임. (link, a, area)

11) rel = "prev"

이전 문서를 지정 (link, a, area)

12) rel = "next"

다음 문서를 지정 (link, a, area) 

참고)

@웹학교 님이 알려주신 보안 이슈를 기반으로 자료를 찾아 간략히 정리했습니다.