Intellectual Wanderlust

개발자가 주목할 IE8 세미나 중 "Ajax 개발자가 IE8에 대해 알아야 할 모든 것" 부분에 대한 참고자료 입니다. 질문은 댓글 혹은 메일(jania902 at gmail dot com)로 해주시기 바랍니다.

2009년 3월 11일 기준 자료이므로 이후에 내용이 바뀔 수 있습니다.

감사합니다.

IE8_for_Ajax_Developers_final.pptx

Segoe fonts.zip

세미나 동영상

개요

• 주제: Ajax 개발자가 IE8에 대해 알아야 할 모든 것
• 소개: IE8의 새로운 기능, 타 브라우저와의 호환성, 개발자용 도구, 성능 개선 등 IE8과 관련하여 Ajax 개발자가 알아야 할 주요 이슈들을 소개합니다.
• 장소: 코엑스 컨퍼런스 센터 401호
• 일시: 2009/03/11 13:30~18:00 중 16:00~16:50

주제

1. Ajax

XMLHttpRequest:

• XMLHttpRequest Enhancements in Internet Explorer 8

• timeout property와 ontimeout event 추가됨.

• setTimeout과 abort() 이용하던 기존 꼼수를 대체.

Cross Domain Request (XDR):

• XDomainRequest Object

  • Cross-site XMLHttpRequest aka XMLHttpRequest2 대신 XDomainRequest 객체를 통해 XDR 지원

• Client-side Cross-domain Security

  • XDomainRequest를 고려하게 된 배경에 대한 설명.

  • Security by Design 원칙

  • SameOriginPolicy에 기반한 기존 XMLHttpRequest를 cross domain 용으로 확장하여 쓰는 것은 위험하다는 주장과 여러 커뮤니티의 사례 인용.

• MDC HTTP Access Control

  • Firefox는 3.0 beta 단계에서 지원하다가 제거됨. 현재는 privileged script에서만 허용되는 상태. 3.5(or 3.1?) 이상에서 지원 예정.

• Getting closer to a standard for client-side cross-site requests

  • IE Beta 2 부터는 W3C Cross Origin Resource Sharing에 의거하여 기존의 XDomainRequestAllowed: 1 header 대신 Access-Control-Allow-Origin: *에 응답하도록 수정됨.

Cross Document Messaging (XDM):

• WHATWG XMD spec

  • XSS 공격은 막으면서 서로 다른 origin의 스크립트가 서로 메시지를 주고 받을 수 있도록 하기 위한 기능.

• An Introduction to Cross-Document Messaging in Internet Explorer 8

  • 기존의 IFRAME을 이용한 꼼수 혹은 서버측 Proxying을 이용하는 방법, GoogleCaja 등을 대체.

  • postMessage, onmessage

• Enabling Mashups in Internet Explorer 8 with Cross Document Messaging

  • Gadget 플랫폼을 구현하기 위한 좋은 방법.

• IE 8 and Cross Document Messaging

  • Firefox 3.1 RC 1, Webkit nightly도 XDM을 구현.

HTML/JSON Sanitizing:

• Native JSON in IE8

  • Built-in JSON object. 빠르고 안전한 JSON 처리.
  • Special functions, toJSON(), are added to the prototypes of Date, Number, String, boolean objects

  • Doug Crockford의 json2.js에 기반. 이를 사용하고 있던 웹 사이트에서는 호환성 문제가 생기지 않을 것.

• Native JSON in Firefox 3.1; Joins IE 8

  • Firefox 3.1 도 Native JSON 지원.
  • 참고로, Webkit nightly에서도 지원 중.

• toStaticHtml

Connectivity:

• AJAX - Connectivity Enhancements in Internet Explorer 8

  • HTTP/1.1 on Broadband인 경우 호스트당 최대 6개의 동시 연결(기존 2개). 이는 HTTP/1.1 스팩에 따른 것(A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy)이었으나 Broadband, Ajax 등으로 인해 상황이 바뀌었음.

  • window.maxConnectionsPerServer로 알아낼 수 있음

  • onLine property of window.navigator and window.clientInformation. "Work offline" 뿐 아니라 실제 연결이 끊어진 경우도 true

  • body의 online, offline 이벤트 핸들러 지원(HTML5)

DOM Storage:

• W3C HTML5 - Structued client-side storage

• Introduction to DOM Storage

  • "What is DOM Storage?" - cookie와 DOM storage 비교.

  • localStorage는 sessionStorage와 달리 여러 윈도/여러 세션 간 공유됨.

• Firefox는 현재 sessionStorage만 지원. 비표준인 globalStorage가 localStorage와 유사하게 활용될 수 있음.

• Webkit 최신 버전(Safari 4 public beta 등)은 sessionStorage와 localStorage 모두 지원.

Ajax Navigation:

• AJAX - Introducing AJAX Navigations

  • Prev/Back 버튼 문제 지원을 위한 onhashchange 이벤트 추가. document.location.hash가 바뀌면 호출됨.

  • iframe, hash+setInterval 등을 이용한 기존의 꼼수를 대체.

2. 프로그래밍 일반

JScript:

• ECMAScript 3 and beyond

  • 기존 JScript와 ECMAScript 스팩의 차이를 밝히고 이를 제거하는 것이 첫 단계라는 글. See JScript Deviations from ES3

  • 엄청난 악플들. 요약하자면 "8년 동안 뭐하다가 이제서야 고치는가", "JScript 문제를 왜 Javascript 문제라고 말하는가".

• John Resig on ECMAScript Harmony

  • ECMAScript 4(Mozilla, Apple, Opera, Google)와 ECMAScript 3.1(Microsoft, Yahoo) 그룹 간의 합의. ECMAScript Harmony 프로젝트 시작됨.

  • DeFactoStandards를 실제 표준으로. 예를 들면 JS Getter/Setter는 Mozilla, Apple, Opera에서 이미 구현한 기능.

• ECMAScript 3 and beyond - the road to "Harmony"

  • Harmony에 대한 MSDN JScript 블로그의 글. 특별한 내용은 없음.

• What's New in JScript for IE8 Beta 2

  • IE Beta 2의 개선사항 요약.
  • 업계 최초의 Native JSON 지원. (2009년 3월 현재 Firefox 3.1 및 Webkit nightly에서 지원. 결국 누가 최초냐는 누가 먼저 정식 릴리즈를 하느냐의 문제)
  • Developer Tool 지원 향상. 이를테면 console.log 지원, profiler 추가 등

  • Platform Improvements for IE8 Beta 2에 의하면 Beta 2에서 DOM prototype 지원 시작.

• What is coming up with IE8 and 9?

  • IE Team과의 web chat 요약. JScript 향상에 집중하고 있다고. "We're certainly focusing heavily on improving Javascript, in IE8 and beyond. I'd expect to see great things here in the future."

Performance:

• GC Improvements in JScript for Internet Explorer 8 Beta 1

  • IE8 Beta 1에서는 애플리케이션의 메모리 소비량에 따라 GC 실행 주기가 적응적으로 변하도록 개선

• Performance Improvements in Internet Explorer 8 Beta 2

  • JScript에 의해 참조되는 DOM 객체를 일반 JS 객체와 동일하게 취급. 따라서 Circular Reference로 인한 Memory Leak 문제가 발생하지 않음. IE7의 경우 페이지를 이동할 때에만 메모리가 release 되었음.
  • Array 연산, String concatenation 등의 성능 향상
  • Function calls, object creation, accessing object prototype properties and specific lookup patterns for JScript variables scoped to the window or this objects.
  • Unblocked downloads
  • Native JSON support
  • Selector API
• Performance Profiler (see Developer Tools)

Selector API:

• Selecting Objects with JavaScript

• Selectors API Test Suite in IE 8

  • 대부분 브라우저의 최신 빌드에서는 99% 성공. IE8은 44%만 성공. Major problem areas are lack of whitespace trimming, incorrect exceptions being thrown, and lack of full CSS 3 selector support.

• Thoughts on querySelectorAll

  • 전체 문서에서 찾은 후 범위에 의해 필터링하는 방식의 문제. Alex Russell (dojo), Andrew Dupont (prototype), John Resig (jquery) 등은 Spec 버그로 간주.

• :visited는 보안상(privacy) 무시

• W3C Selectors API

• 결론: 기존 브라우저들 때문에 어차피 앞으로 최소 1~2년 간은 Selector API를 직접 쓸 일 없을 것. 적당한 라이브러리를 쓸 것을 권장함. 라이브러리 성능이 크게 향상될 것이라는 점에 의의가 있음.

DOM:

• Document Object Model Prototypes, Part 1: Introduction

  • Prototype 개념 소개.
  • DOM Prototype 지원 소개 및 표준과의 차이점(hierarchy)
  • DOM Prototype을 활용하는 좋은 사례 두 가지.
  • IE8에서는 delete가 동적으로 추가된 property를 올바르게 지울 수 있음

  • var $ = document.getElementById 후에 $를 호출하면 $의 this는 document로 자동 binding. 하지만 이 방식은 추천하지 않음.

  • 기타 호환성 문제 요약.

• Document Object Model Prototypes, Part 2: Accessor (getter/setter) Support

  • ECMAScript Harmony에 기반한 access 지원 소개
  • 기타 브라우저와의 호환성 언급

• Next IE 8 Release Candidate to have updated getter/setter support and DOM prototypes

  • IE8의 accessor 소개 및 기타 브라우저와의 호환성 문제 언급.

  • 기타 브라우저와 다른 방식으로 구현된 이유에 대해서는 ECMAScript getters and setters interoperability의 두번째 comment(by Kris Zyp) 참고.

• Responding to Change: Updated Getter/Setter Syntax in IE8 RC 1

  • 기타 브라우저와 다른 방식으로 구현된 이유 설명.
  • 기존의 getter, setter가 get, set으로 바뀜.

3. 개발 도구

Developer Tool:

• Discovering Internet Explorer Developer Tools

  • 기능 전반에 걸친 간략한 설명

• Using the Windows Internet Explorer 8 Developer Tools to Fix Your Site

  • User Guide 형식의 소개글

• Developer Tools in Internet Explorer 8 Beta 2

  • Beta 2에서 추가된 점들 설명

  • console.log 지원

  • JScript Profiler
  • CSS Live editing
  • Browser Mode와 Document Mode. Browser Mode는 "IE7에서 어떻게 보일까?"를 테스트, Document Mode에서는 "Rendering Mode를 바꾸면 어떻게 보일까?"를 테스트.

• Debugging Script with the Developer Tools

  • breakpoint 설정, watch, stacktrace, step-into/over/out, console

• Profiling Script with the Developer Tools

  • profiling and exporting

• Introducing the IE8 Developer Tools JScript Profiler

• Developer Tools User Interface Reference

  • Developers Tool - UI 설명

• Developer Tools Keyboard Shortcuts Reference

  • Developers Tool - 단축키 설명

• StandaloneInternetExplorer

• Selenium, JSSpec

4. 참고자료

Overview articles:

• Developer Information Index for Internet Explorer 8

• What's New in Internet Explorer 8 (Script)

• What's New in Internet Explorer 8

• Updates for AJAX in IE8 Beta 2

Sites:

• MSDN Internet Explorer 8

• MSDN JScript Blog

• MSDN IE Blog

• MSDN Ask IE Blog

• ajaxian.com - topics on 'microsoft'

• ajaxian.com - topics on 'ie'

• http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)

• http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers

이번 세션에서 다루지 않는 주제들

Accessibility and ARIA:

• ...

Rendering Mode and Standard Compliance:

• HTML Enhancements in Internet Explorer 8

• Standards Compliance Updates in Internet Explorer 8

• Defining Document Compatibility

• CSS Improvements in Internet Explorer 8

• Standards by Default: What Does It Mean?

• Implementing the META Switch on IIS

• Implementing the META Switch on Apache

• HTML and CSS Support

• What Will Windows Internet Explorer Report as the User-Agent String?

• The Internet Explorer 8 User-Agent String (Updated Edition)

• Version Vectors

• META Tags and Locking in Future Compatibility

• Ending Expressions

• Microsoft CSS Vendor Extensions

• The CSS Corner: Using Filters In IE8

• Just The Facts: Recap of Compatibility View

• IE8 and Standards

• Microsoft changes IE 8 defaults to be "standards mode"

• X-UA-Compatible: IE=EmulateIE7

• Internal IE-HTML DOM still isn’t XHTML compliant

• Standards Compliance Updates in Internet Explorer 8

• Compatibility Master Table by PPK

• CSS Compatibility and Internet Explorer

• The CSS Corner: Alternate Style Sheets

• The Default Layout Mode

• Attribute Differences in Internet Explorer 8

Security:

• IE8 Security Part V: Comprehensive Protection

  • XDR, XDM
  • HTML Sanitization, JSON Sanitization(Safer Mashups: JSON Sanitization 부분에서 HTML/JSON sanitization을 같이 쓰는 예시)

  • MIME-Handling Changes - Restrict Upsniff(images/*를 html/script로 해석하지 않음), Sniffing opt-out(Content-Type: text/plain; authoritative=true;), Force Save(X-Download-Options: noopen)

• IE8 Security Part VI: Beta 2 Update

  • document.domain의 원래 값(app1.example.com)을 느슨하게(loosen)하는 것은 허용(example.com, 다시 조이는 것(tighten)은 막음(app1.example.com). 다른 브라우저와 통일된 동작. 다른 도메인과 데이터를 교환하려면 XDM, XDR 등을 사용할 것.

  • Restricting Frame-Targeting: a.com에서 window.open으로 만든 새 창 a가 있을 때, b.com이 target을 a로 하여 window.open을 하면 새 창이 열리도록.

  • Beta1의 authoritative=true 방식을 X-Content-Type-Options: nosniff 방식으로 변경.

  • CSS expression 제거(IE8 표준 랜더링 모드)

• Statistical Validation of the IE8 XSS Filter

  • 70% 정도의 XSS 공격을 막아줄 수 있는 자동 XSS Filter

• IE8 Security Part VII: ClickJacking Defenses

• Birth of a Security Feature: ClickJacking Defense

  • ClickJacking Defenses 설명