HTML5 와 보안.

컴포지트 2012.04.18 13:06 Views : 34741

우리나라 프로젝트들 보면 대부분 웹이 베이스입니다.
아무래도 응용으로 하기엔 UI/UX 구성이 웹보다 어렵고 낮은 생산성이 이유겠죠.
하지만 보안에 대해서는 당연히 한계가 드러나다 보니, 응용의 힘을 빌리기도 합니다.
그렇다 보니 액티브엑스가 주류를 이루고 있죠.
그 과정에서 HTML5 라는 새로운 기술 표준이 생겨납니다.
아직 우리나라에서는 HTML5 용도를 모바일에만 한정하고 있죠.
하지만 계속 나오는 HTML5 표준은 점점 응용으로 의존하던 시대를 벗어나게끔 유도를 하는 것 같습니다.
아마 기술표준이 잘 재정된다면, 응용의 의존을 받지 않고도 충분한 보안 웹 사이트를 만들 수 있다는 기대감이 크죠.
현재까지 나온 기술이 전부는 아니지만, 새로이 생긴 API를 통한 웹 보안 기술을 하나 살펴보고자 합니다.
그 예를 파일업로드로 들어보죠.

현재 HTML 기술로는 input type="file" 에 대해서 얻을 수 있는 정보로는,
파일 이름, 크기 등이죠.
하지만 파일 내용은 죽었다 깨어나도 못보는 게 현실입니다.
그래서 비SSL 환경에서 폼 전송 시 업로드 파일을 제외한 모든 요소가 암호화가 가능했죠.

HTML5 에서는 아직 Draft 상태지만, File API가 생겼습니다.
HTML5 에서는 업로드할 파일을 미리 보는 용도로 읽기만이라도 할 수 있게 됐습니다.
파일 내용을 읽을 수만 있어도 나름 축복인 것 같습니다.
그 이유는 파일을 굳이 변경할 필요 없고, 바로 폼을 전송할 때 공개키 암호화 항목에 파일 업로드를 포함할 수 있다는 기대감을 가질 수 있게 되더군요.
보안을 요구하는 사내 웹 사이트나 정부표준 프레임워크(..는 전혀 기대할 거 없지만)에서 폼 전송 암호화 시 비SSL 환경 또는 SSL 환경이라 해도 자체 암호화를 통하여 오가는 정보를 확실히 훔쳐볼 수 없는 대안이 나올까 싶습니다.

모의 ECMAScript 입니다.
document.forms['myform'].submit=function(){
    var that=this;
    var myfile=document.getElementById('myfile').files[0];//파일 개체 불러오기
    var reader=new FileReader();//비동기 파일 읽기 객체
    reader.onload=function(event){
        //인코딩한 파일 내용을 암호화 대상 폼에 포함.
        that.elements['encfile'].value=event.target.result;
    };
    //Data URI 로 Base64 인코딩 된 내용으로 파일 내용 받기.
    reader.readAsDataURL("myfile);
    var params='';//폼 URL 인코딩 결과 담기
    for(var i=0,elems=this.elements;i<elems.length;i++){
        if(elems[i].name=='encresult') continue;
        //TODO : 암호화할 양식들을 모두 name=value&name=value...
        elems[i].disabled=true;
    }
    this.elements['encresult'].value=RC4.encrypt(params,'암호키');
    return true;//폼 전송 시작
};

아마 여러분들도 웹사이트를 만들면서 보안 문제 같은 부분에 많이 신경썼을 지도 모르죠.
새로운 HTML5 표준에서는 웹에서 할 수 있는 최대한의 기능을 담을 텐데,
이렇게 HTML5 를 통한 보안 웹을 구성하는 여러가지 기술. 여러분들은 어떻게 생각하십니까?
No. Subject Author Date Views
» HTML5 와 보안. [2] 컴포지트 2012.04.18 34741
46 [HTML5사례] Cut the Rope / 컷 더 로프 게임이 HTML5로 발표 되었네요. 흥미로워요. [2] 코난(김대우) 2012.01.10 29981
45 HTML5로 블로그 마크업을 짜보자! [1] 컴포지트 2011.07.26 21347
44 [HTML5 동영상 강좌] 16. Web Worker [2] 우정환 2011.07.14 35057
43 [HTML5 동영상 강좌] 20. File API 우정환 2011.07.14 39163
42 [HTML5 동영상 강좌] 19. SVG 우정환 2011.07.14 33947
41 [HTML5 동영상 강좌] 18. Geolocation API 우정환 2011.07.14 31593
40 [HTML5 동영상 강좌] 17. Web Socket 우정환 2011.07.14 33384
39 [HTML5 동영상 강좌] 15. Web SQL Database 우정환 2011.07.14 33184
38 [HTML5 동영상 강좌] 14. Web Storage 우정환 2011.07.14 32410
37 [HTML5 동영상 강좌] 13. Communication API 우정환 2011.07.14 30283
36 [HTML5 동영상 강좌] 12. Offline Web Application 우정환 2011.07.14 30193
35 [HTML5 동영상 강좌] 11. Drag & Drop API 우정환 2011.07.14 32116
34 [HTML5 동영상 강좌] 10. Canvas Element 우정환 2011.07.14 32728
33 [HTML5 동영상 강좌] 9. Audio Element 우정환 2011.07.14 29625
32 [HTML5 동영상 강좌] 8. Video Element 우정환 2011.07.14 31081
31 [HTML5 동영상 강좌] 7. Rich Text Edit API 우정환 2011.07.14 31175
30 [HTML5 동영상 강좌] 6. Strong Web Form 우정환 2011.07.14 32060
29 [HTML5 동영상 강좌] 5. Sementic Element (2) 우정환 2011.07.14 32389
28 [HTML5 동영상 강좌] 4. Sementic Element (1) [5] 우정환 2011.07.14 42551





XE Login