문서의 이전 판입니다!


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는 브라우저가 닫히기 전까지만 접근이 가능하다. 유효기간을 별도로 정하지 않는다는 점을 제외하면 쿠키와 비슷하게 동작한다고 볼 수 있다.

나. 안전한 코딩 기법

다. 예제