HTML5에서 security와 관련 된 내용 정리

HTML5 관련된 여러 보안과 관련 된 내용 들 중에서

모의해킹이나 보안점검에 관련이 조금 있을 것 같은 내용 3가지를 정리해보려 합니다

1. innerHTML의 제한 사항

innerHTML을 사용하여 동적으로 DOM에 삽입할 경우, <script> 태그 내부의 JavaScript는 실행되지 않는다

2. <link rel="noopener"> 및 rel="noreferrer" 속성

보안을 위해 HTML5에서는 <a> 태그에 rel="noopener"와 rel="noreferrer" 속성을 추가

window.opener를 이용한 피싱 공격

1. 사용자가 A 사이트에서 target이 _blank인 링크를 클릭

// a태그 활용 (target X)
<a href="#">그냥 열기</a>

// a태그 활용2 (target은 _blank)
<a href="#" target="_blank">새 창으로 열기</a>

2. 새 탭으로 해당 링크가 열림

3. 이 때 해당 링크에서 window.opener.location을 B 사이트(피싱사이트)로 변경

window.opener.location = '피싱사이트 url ';

4. 피싱사이트인 B사이트는 UI가 A사이트와 똑같은 낚시 사이트

5. 사용자는 B 사이트로 돌아오지만 A 사이트와 교묘하게 똑같기 때문에 본래의 탭으로 돌아왔다고 생각함

6. 사용자는 피싱사이트인 B 사이트에서 개인정보를 입력

7. 피싱사이트인 B 사이트는 다시 A 사이트로 리다이렉션 하므로 사용자가 눈치를 못 챔

이러한 보안 취약점 피싱 공격을 방지하기 위해 noopener, noreferrer이 등장

target="_blank"가 적용되어 있는 링크를 클릭하면 원본 페이지에 대한 콘텍스트 권한을 제공하지 않고 새 탭에서 최상위 브라우징 콘텍스트를 새로 생성하여 링크를 열도록 한다

따라서 window.opener의 값이 null이 된다

다른 페이지로 이동할 때 링크를 건 페이지의 주소 등의 정보를 브라우저가 HTTP 프로토콜의 referrer이라는 헤더값 생략하여 정보 누출을 막는다

즉, noreferrer을 설정한 링크를 클릭하면 해당 유입이 어디서 발생하였는지에 대한 정보가 제공하지 않는다

<a href="#" target="_blank" rel="noopener noreferrer">새 창으로 열기</a>

최신의 크롬과 사파리의 경우 target="_blank"인 링크의 기본 동작이 noopener로 변경되었다고 한다

3. Sandbox 속성

HTML5의 <iframe> 태그는 sandbox 속성을 통해 외부 콘텐츠를 제한된 환경에서 실행할 수 있게 했다

기록하며 성장하는 라이프