[jquery] jquery로 a 태그 target 변경하는 방법 + 보안 문제

[jquery] jquery로 a 태그 target 변경하는 방법 + 보안 문제

jquery로 a태그의 타겟을 설정 혹은 변경하는 방법과 보안 취약점에 대하여 알아보기

 

jquery로 a태그 target 변경하는 방법과 보안 취약점

 

[ 타겟 종류 ]

타겟 종류는 self, blank, parent, top, framename이 있다.

 

속성	설명
_self	현재 창에 열기 (기본)
_blank	새 창이나 새 탭으로 열기
_parent	부모 창에 열기
_top	가장 상단 창에 열기
"framename"	특정 프레임 창으로 열기

 

[ 타겟 설정 방법 ]

타겟이 설정되어있지 않은 a태그가 div 태그 안에 있다고 가정해보자.

타겟이 설정되어있지 않으면 기본 값인 _self로 설정된다.

 

<div id = "div1">
	<a href="https://www.zpxlcm.tistory.com/"> 주앤정 블로그 </a>
</div>

 

 

방법 1. jquery로 타겟 설정

a 태그를 감싸고 있는 div 태그의 아이디로 a를 찾은 후 attr() 함수로 속성을 변경한다.

<script>
  $(document).ready(function(){
    $('#div1 a').attr('target', '_blank');
  });
</script>

(jquery를 사용해 타겟 설정)

 

방법 2. jquery 사용하지 않고 타겟 설정

a 태그를 찾은 후 반복문에서 setAttribute() 함수로 속성을 변경한다.

a 태그가 여러개 있을 때 원하는 태그만 지정하기에 더 용이하다.

<script>
  window.onload = function(){
    var anc = document.getElementById('div1').getElementsByTagName('a');
    
    for (var i=0; i<anc.length; i++){
      anc[i].setAttribute('target', '_blank');
    }
  }
</script>

(jquery를 사용하지 않고 타겟 설정)

 

---

 

[ _blank 보안 이슈 : 탭내빙(Tabnabbing) ]

 

 탭내빙(Tabnabbing)이란?

링크(target이 _blank인 태그)를 클릭했을 때 새롭게 열린 탭(또는 페이지)에서 기존의 문서인 location을 피싱 사이트로 변경해 정보를 탈취하는 공격 기술

 

탭내빙 시나리오 (출처 : 레진기술블로그)

새 탭이 열려 부모 탭(원래 페이지)이 가려져있는 동안 부모 탭을 변경한다.

부모 탭을 로그인 화면으로 변경해 사용자가 부모 탭으로 돌아와 로그인을 하게 되면 입력한 정보를 탈취하거나,

피싱 페이지로 변경했다가 원래 페이지로 돌려놓아 사용자가 모르게 정보를 탈취하는 등의 방법으로 공격한다.

 

[ 대응방안 ]

a 태그 내에 rel 속성을 추가하여 공격을 방지한다.

target 속성을 추가할 수 있는 area, base, form 태그와 이메일 폼*에도 rel 속성을 추가해야한다.

* gmail과 같은 이메일 이용 시 이메일 본문에 있는 a 태그에 _blank 속성이 자동 추가되기 때문

 

방법 1. noopener 추가

noopener 속성은 헤더와 함께 참조자 정보를 보내지 않도록 하는 속성으로, window.opener를 무효화한다.

<a href="https://www.tistory.com" target=_blank rel="noopener"> 주앤정 블로그 </a>

(noopener 속성 사용 예시)

 

방법 2. noreferrer 추가

noreferrer 속성은 noopener과 유사하나 링크를 열었을 때 referrer을 전송하지 않아 referrer 정보 유출을 방지할 수 있다.

<a href="https://www.tistory.com" target=_blank rel="noopener"> 주앤정 블로그 </a>

(noreferrer 속성 사용 예시)

방법 3. nofollow 추가

nofollow 속성은 문서에 포함된 링크를 따라가지 못 하도록 지정하는 속성이다.

meta 태그에 nofollow 속성을 지정하게 되면 모든 링크를 따라가지 못 하도록 한다.

<a href="https://www.tistory.com" target=_blank rel="nofollow"> 주앤정 블로그 </a>

(nofollow 속성 사용 예시)

[ 테스트 ]

Window Opener Demo 페이지에서 테스트 해보기

개발자 모드에서 스크립트 요청(공격)이 거부됨을 확인할 수 있다.

 

Window Opener Demo 페이지

link rel=noopener DEMO | labs.jxck.io