오늘은 날씨가 좋군요 ^^

상쾌하기도 하고~ 제가 12층에서 근무하는데 전경이 좋습니다 ^^

Data URI Support : Windows Internet Explorer 8

오늘은 이걸 알아보도록 하겠습니다.

먼저 IE8의 랜더링 화면을 보려면 Tool메뉴 - Developer Tools - View - Change Compatibility - Mode에서
Standards(Internet Explorer 8)을 선택해야 합니다. ㅎㅎ 잠시 팁이였구요.

Data URI... 과연 이것은 무엇일까요? 다들 아시나요?? 저는 이야기만 들어봤을뿐 실제로 사용해 본 적은 없었습니다.

그래서 이기능이 IE에서 지원이 안되고 있었는지 조차 별 관심이 없었던거죠.. 화이트페이퍼를 보면서 "이거 원래 안되었었나?"라는 의문이 들었죠. 근데 원래 지원안했답니다. ^^

테스트를 해보니 FF 2, FF 3, Safari 3, Opera 9.x 에서는 다 지원되는군요... 역시 IE는 외톨이였나봅니다. ^^

잠시 딴대로 이야기가 샜었는데.. 왜 Data URI를 사용할까요? MS에서 제공한 화이트페이퍼에는 이렇게 정의하고 있습니다.

"css나 image와 같은 작은 외부 자원들를 웹페이지에 직접적으로 삽입할 수 있게 한다"라고 되어있습니다.

그럼 왜 직접 삽입해야할까요? 이유는 보안입니다. 즉 이미지나 css등의 경로를 웹페이지에 적어주는 방식(<img src="/xxx/xxx.jpg" />)은 URI가 노출되어 해당 서버의 디렉토리 구조를 노출하게 됩니다. 또한 css의 경우도 마찬가지겠지요. 그럼 여기서 의문이 생기죠... data URI를 사용하면 어느정도까지 보안을 강화해 주는걸까요?

제가 테스트 해본바로는
1. URI 숨김으로 인한 서버의 디렉토리 구조 감춤
2. 웹페이지에 직접 해당 리소스를 넣음으로서 http connection을 통해 이미지를 가져오는 일이 없음, 즉 이미지를 별도로 다운로드하지 않음.

2번에서 알수있듯이 이미지자체를 웹페이지에 넣다보니 웹페이지 사이즈가 커짐을 알 수 있습니다. 당연하겠죠?

아래 그림은 네이버 로고를 Data URI로 넣은 모습입니다.

아래의 그림은 Data URI와 <img>를 함께 사용한 것입니다.

위 그림 두개에서 자세히 보셔야 할부분은 FireBug의 화면중 Net이란 곳이구요... Net은 실제 웹상에서
데이터가 network를 통해 브라우져가 해당 리소스를 다운받았다는 것을 표시해줍니다.

1번의 그림의 경우 이미지 다운이 안된것으로 표시가 되었고, 2번의 경우 그림이 다운된 것으로 표시가 되었습니다.

MS에서는 Object / Img / Link / Css 엘리먼트만을 지원한다고 하는군요.

백문이불여일견... 테스트한 html을 첨부하니 다운받으셔서 직접 테스트 해보시는게 가장 좋을것 같습니다.

테스트 파일 :




posted by blankus

오랜만에 포스팅을 하는 것 같습니다.

그동안 너무 방황하며 살았던것 같구요... 이제 따스한 봄(?)이 저멀리서 다가오고 있으니 마음도 추스리고

열심히 또 블로그질을 해야겠습니다.

그 시작으로 IE 8 beta 1이 선보였는데, 무엇이 어떻게 바뀌었는지를 알아보도록 하겠습니다.

1. Data URI Support
2. HTML Improvements and ACID2
3. Improved Namespace Support
4. DOM Core Improvements
5. CSS 2.1 Compliance
6. Selectors API
7. Circular-Memory-Leak Mitigration
8. Versioning and Cross-Document Interaction
9. Better AJAX development
10. Versioning and Internet Explorer Modes
11. Improved Protected-Mode API Support
12. Platform Performance Improvements

이 순서로 진행할 예정입니다.

posted by blankus