Источник: habrahabr
Введение
Браузер Internet Explorer имеет длинную историю, начавшуюся в 1995 году, когда в августе этого года компания Микрософт выпустила его, лицензировав у Spyglass, Inc. С тех пор прошло уже более 10 лет и Internet Explorer успел покорить мир, завоевав абсолютное большинство пользователей, а версия его вот-вот сменится на номер 8.Несмотря на широкое распространение, Internet Explorer пользуется дурной славой у разработчиков web-проектов. Виной тому множество факторов, основными из которых, на мой взгляд, являются вялое внедрение стандартов консорциума W3C и очень медленный переход на новые версии среди пользователей. Из-за того, что огромное количество пользователей все еще использует устаревшие браузеры, web-разработчикам приходится поддерживать и их, внедряя в свои коды всяческие трюки и так называемые хаки, чтобы один и тот же сайт выглядел одинаково как в браузерах Firefox, Safari и Opera, так и во всех распространенных версиях Internet Explorer.
Однако, с выпуском восьмой версии браузера, Микрософт, похоже, предпринимает попытки сгладить отношение разработчиков к своему детищу, предлагая им долгожданную поддержку стандартов, не оставляя в тоже время поддержку предыдущего кода, написанного под старые версии.
Эта статья призвана показать, что же нового появится в Internet Explorer 8 для разработчиков, что изменится и как использовать некоторые новые и полезные вещи которые предлагает нам этот браузер.
История браузера Internet Explorer для программиста
Выйдя в 1995 году первая версия IE не получила широкого распространения, как впрочем и версия вторая, которая включала в себя поддержку кроме SSL, cookies, такие вещи как VRML и RSA. Третьей версии, которая вышла в 1996 году, удалось добиться большего. Она получила поддержку CSS, ActiveX, фреймов и Java-аплетов. В четвертой версии появились DHTML и PNG. Пятая версия принесла поддержку XML/XSLT, улучшенную поддержку CSS версии 1 и 2, favicon, HTML Application. Особенно полезным окажется введение XMLHttpRequest, который гораздо позднее даст старт повсеместно используемой технологии AJAX. Шестая версия оказалась менее щедрой на нововведения: улучшена поддержка DHTML, частичная поддержка CSS level 1, DOM level 1 и SMIL 2.0. Вместе с тем, шестая версия, похоже, стала самой уязвимой в плане безопасности версией браузера. В седьмой версии Internet Explorer добавилась поддержка IDN, незначительно была улучшена поддержка CSS, DOM и HTML, улучшилась поддержка компрессии страниц через Gzip и deflate. Однако одним из главных исправлений стала долгожданная поддержка прозрачности для PNG-файлов.
Восьмая версия
Первая публичная бета-версия Internet Explorer 8 появилась в марте 2008 года. Сообщалось, что новая версия получит переписанный с нуля движок рендеринга, что команда разработчиков нацелена на поддержку стандартов, таких как CSS 2.1, CSS 3 и HTML 5, что будут исправлены множество ошибок предыдущих версий. И ожидания сбылись, новая версия содержала в себе многочисленные изменения в HTML и CSS, такие как введение тега abbr, поддержка автоматически генерируемого контента CSS, правила CSS display: table, paged media, DOM Storage, XDM, API селектров и многое другое. Кроме того, появилась поддержка Data: URI и XDomainRequest для кросс-доменного обмена, добавились новые функции в DOM, заявлена поддержка спецификации ARIA.
После знакомства с новой версией и ее нововведениями, складывается мнение, что компания Микрософт, наконец-то обратила свое внимание на web-разработчиков и взялась основательно переделать свой браузер к лучшему.
Механика восьмой версии. Прикидываемся седьмой версией
Новая версия рендеринга Internet Explorer может работать в трех режимах:
- Quirks и Strict - работают как и в IE7, в зависимости от DOCTYPE включается quirks-режим;
- Standards - основной режим IE 8, в котором максимально широко реализованы стандарты.
Для того чтобы задать необходимый вам режим нужно добавить на страницу meta-тэг следующего содержимого:
<meta http-equiv="X-UA-Compatible" content="IE=8" />Здесь, content - обозначает режим, в котором будет отображаться страница. Основные значения content следущие:
- "IE=7" - включает режим Strict в котором рендерятся все страницы;
- "IE=EmulateIE7" - включает режим совместимости с IE7, в котором в зависимости от DOCTYPE будет применяться либо стандартный для IE7 режим рендеринга (Strict), либо quirks-режим (Quirks);
- "IE=EmulateIE8" - страница форсируется в режим "IE8 Standards" вне зависимости от того, включен ли режим совместимости "Compatibility View" в браузере пользователя, а quirks-страницы отображаются в Quirks-режиме.
- "IE=8" - включается режим максимального соответствия стандартам "IE8 Standards".
<meta http-equiv="X-UA-Compatible" content="FF=3" />Вдобавок к этому, у параметра content существует значение "edge", которое позволяет указывать на поддержку максимально старшей версии браузера:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />Кроме указания тега "meta" есть еще один способ управлять режимом браузера - это передача http-заголовка:
X-UA-Compatible: IE=EmulateIE7
Механизмы обеспечения безопасности
Защита памяти средствами DEP/NX
Функция "Включить защиту памяти для снижения риска атаки из интернета" доступна и в седьмой версии браузера, но она не включена по умолчанию. Правда, на 64-битных платформах этой функции нет, но только потому, что все процессы в 64-битных версиях Windows защищены через DEP. Теперь же, данная функция будет включена по умолчанию. Напомню, что DEP/NX позволяет предотвратить выполнение кода, который помечен как данные. Таким образом, отсекается целый пласт атак, таких как переполнение буфера.
Улучшения в ActiveX
В восьмой версии Internet Explorer элементы ActiveX могут быть установлены только для определенного пользователя (Per-User ActiveX), что снижает риск заражения, при учете того, что пользователь не работает под правами администратора. В этом случае под ударом находится только профиль одного пользователя и ничего больше.
Per-Site ActiveX - новая техника, которая позволяет задать элементу ActiveX возможность исполнения только на одном единственном (вашем собственном) сайте и нигде больше. Пользователь также может разрешить использование, скажем Silverlight, только на том сервере, где он первый раз понадобился. Как и все остальное, управление механизмом установки ActiveX будет доступно для администраторов через групповые политики.
XSS-фильтр
Самое интересное, на мой взгляд, нововведение - это встроенный XSS-фильтр, который позволяет защитить пользователя от "Cross-Site Scripting"-атак. Чтобы хотя бы приблизительно оценить величину угрозы от XSS-атак можно перейти по адресу XSSed.com, и посмотреть какие, не самые мелкие публичные ресурсы, подвержены этим атакам. Любой пользователь потенциально может оказаться жертвой, просто перейдя на эти ресурсы, и сейчас число таких обнаруженных "дырявых" сайтов перевалило уже за 20 тысяч.
XSS-фильтр Internet Explorer 8 направлен против xss-атак т.н. типа Type1. Согласно информации с Wikipedia атаки такого типа самые распространенные.
Для тех сайтов, которые по какой-то причине не хотят позволить пользователю включить защиту против XSS на их ресурсах доступна опция в заголовках HTTP:
X-XSS-Protection: 0
Она может понадобиться тем, кто в своих проектах использовал техники схожие с XSS-атаками.
Другие изменения безопасности
- добавлена новая функция toStaticHTML, которая позволит избежать внедрения опасного кода на страницы путем форматирования html-тегов, эта функция делает тоже, что и функции библиотеки Microsoft Anti-Cross Site Scripting Library;
- Internet Explorer 8 реализует функции ECMAScript 3.1 для работы с JSON. Для обеспечения безопасности, объект для работы с JSON содержит функцию parse, которая, так же как и toStaticHTML, надежно форматирует потенциально-опасный текст;
- в новой версии Internet Explorer браузер содержит улучшения в т.н. механизме MIME-sniffing. Этот функционал позволяет определять браузеру содержимое страницы не по "content-type", а по содержанию. Нередко такое определение позволяло внедрить опасный код. Теперь, например, при "content-type: image/*" не будет рендерится вложенный html- или скрипт-код. Для управления фильтром разработчик может воспользоваться новым параметром authoritative и указать "Content-Type: text/plain; authoritative=true;" и в таком случае IE8 не будет пытаться определить тип содержимого, выведя его согласно указанию в "Content-Type";
- новые параметры для HTTP-заголовков X-Download-Options: noopen и Content-Disposition: attachment; filename=untrustedfile.html позволяют заставить браузер сохранить содержимое вместо его отображения. Это может понадобиться в тех случаях, когда web-приложению требуется передать пользователю страницу с небезопасным содержимым. В случае сохранения его на клиенте и последующем открытии такие страницы не будут работать в контексте сервера, что оставит его в безопасности;
- в контроле File Upload теперь в целях безопасности изменили статус поля ввода на read-only. В дополнение к этому, с той же целью, IE8 теперь не будет отправлять полный путь файла, вместо этого отправляться будет только его имя.
Изменения касающиеся CSS
CCS-выражения
Одним из принципиальных решений команды разработчиков Internet Explorer в плане поддержки CSS является отказ от так называемых CCS-выражений (CSS expressions). Эти выражения позволяли интегрировать в CSS-код JavaScript-выражения для манипулирования содержимым css параметров. CSS-выражения в восьмой версии Internet Explorer будет отключены по умолчанию. В числе причин названы безопасность и высокая затратность в плане производительности. Однако поддержка CSS-выражений сохранится в режимах совместимости Strict и Quirks, для поддержки уже написанного кода.
Изменение в именовании свойств
Микрософт изменила порядок именования некоторых свойств CSS. Теперь все "нестандартные свойства" получают префикс "-ms-". Для того, чтобы полностью соответствовать CSS 2.1 в IE 8 такой префикс получили свойства подходящие под следующие условия:
- если свойство - это расширение Микрософт (не определено в спецификации или модуле CSS);
- если свойство - часть CSS-спецификации или модуля, которая не получила статус Candidate Recommendation от W3C;
- если свойство только частично реализовывает свойство, определенное в спецификации CSS.
Вот список свойств, которые получили приставку "-ms-" (с указанием причины):
| Property | Type | W3C Status |
| -ms-accelerator | Extension | |
| -ms-background-position-x | CSS3 | Working Draft |
| -ms-background-position-y | CSS3 | Working Draft |
| -ms-behavior | Extension | |
| -ms-block-progression | CSS3 | Editor's Draft |
| -ms-filter | Extension | |
| -ms-ime-mode | Extension | |
| -ms-layout-grid | CSS3 | Editor's Draft |
| -ms-layout-grid-char | CSS3 | Editor's Draft |
| -ms-layout-grid-line | CSS3 | Editor's Draft |
| -ms-layout-grid-mode | CSS3 | Editor's Draft |
| -ms-layout-grid-type | CSS3 | Editor's Draft |
| -ms-line-break | CSS3 | Working Draft |
| -ms-line-grid-mode | CSS3 | Editor's Draft |
| -ms-interpolation-mode | Extension | |
| -ms-overflow-x | CSS3 | Working Draft |
| -ms-overflow-y | CSS3 | Working Draft |
| -ms-scrollbar-3dlight-color | Extension | |
| -ms-scrollbar-arrow-color | Extension | |
| -ms-scrollbar-base-color | Extension | |
| -ms-scrollbar-darkshadow-color | Extension | |
| -ms-scrollbar-face-color | Extension | |
| -ms-scrollbar-highlight-color | Extension | |
| -ms-scrollbar-shadow-color | Extension | |
| -ms-scrollbar-track-color | Extension | |
| -ms-text-align-last | CSS3 | Working Draft |
| -ms-text-autospace | CSS3 | Working Draft |
| -ms-text-justify | CSS3 | Working Draft |
| -ms-text-kashida-space | CSS3 | Working Draft |
| -ms-text-overflow | CSS3 | Working Draft |
| -ms-text-underline-position | Extension | |
| -ms-word-break | CSS3 | Working Draft |
| -ms-word-wrap | CSS3 | Working Draft |
| -ms-writing-mode | CSS3 | Editor's Draft |
| -ms-zoom | Extension |
Разработчики понимают, что для многих сайтов придется переводить старые значения на новые, поэтому старые значения, хотя и будут считаться устаревшими, будут поддерживаться в восьмой версии ради совместимости. При разработке же нового кода для IE 8 следует использовать только новые именования.
Свойство filter
Изменения коснулись такого свойства, как filter. Ранее, к сожалению, синтаксис filter не соответствовал CSS 2.1. Например, в указанном коде запятые считались недопустимыми.
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2);В новой версии браузера синтаксис filter приведен к соответствию требованиям спецификации CSS:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2)";нетрудно заметить, что в новом синтаксисе значение свойства взято в кавычки.
Поддержка CSS 2.1
Для более полной реализации CSS 2.1 добавлена поддержка следующих псевдо-классов:
- :active (вместо частичной поддержки, будет полная)
- :focus
- :lang©
- @page :first
- @page :left
- @page :right
Последние три не доступны в beta2, но будут добавлены в финальную версию. Кроме того добавлена поддержка следующих псевдо-элементов:
- :before
- :after
Следующие элементы будут поддерживаться в полном объеме вместо частичной поддержки либо добавятся:
- list-style-type
- background-position
- font-weight
- white-space
- word-spacing
- content
- counter-increment
- counter-reset
- quotes
- border-collapse
- border-spacing
- border-style
- caption-side
- empty-cells
- bottom
- display
- left
- right
- top
- z-index
- orphans
- page-break-inside
- widows
- outline
- outline-color
- outline-style
- outline-width
- box-sizing (элемент CSS 3)
Функции CSS
Помимо существующей поддержки функции url(), в восьмой версии будет добавлена поддержка еще двух функций counter() и attr().
JavaScript и AJAX в IE8
В помощь программистам команда разработчиков Internet Explorer внесла значительные изменения и нововведения в механизм JavaScript.
XDomainRequest (XDR)
XDR - это новый объект похожий на XMLHttpRequest, но который предназначен для обмена информацией через домены. Синтаксис XDR соответствует черновику W3C "Access Control for Cross-Site Requests".
Cross-document Messaging (XDM)
XDM - это еще одна технология, которая позволяет обмениваться текстовыми сообщениями фреймам с разных доменов, которые размещены на одной странице. Такой обмен происходит через HTML5-метод postMessage:
var testframe = document.getElementsByTagName('iframe')[0];
testframe.contentWindow.postMessage('Привет!');Для того, чтобы получить такое сообщение документ во фрейме должен зарегистрировать обработчик сообщения "onmessage":
document.attachEvent('onmessage',function(e) {
…
});
DOM Storage
DOM Storage - это механизм, который позволяет хранить на стороне клиента данные не прибегая при этом к механизму cookie. В отличие от cookie, DOM storage лишены целого ряда ограничений: размер сохраняемых данных значительно увеличен, данные DOM storage не отсылаются на сервер при каждом запросе, кроме того можно управлять тем, как сохраненная в DOM storage информация будет видна в других окнах.
В Internet Explorer реализовано три объекта по работе с DOM storage:
- window.sessionStorage - предназначен для хранения данных на время существования вкладки браузера, данные доступны с разных страниц пока действует контекст вкладки. Данные не восстанавливаются если произошла исключительная ситуация или браузер был закрыт;
- window.localStorage - предназначен для долговременного хранения данных (около 10 Мб) для каждого домена и субдомена, причем домены и субдомены могут получать данные друг друга, но при этом субдомены не могут получать данные другого субдомена;
- объект Storage - реализует логику для работы как sessionStorage, так и localStorage, содержит необходимые методы, свойства и события.
Ниже приведен небольшой пример того как можно работать с DOM storage:
localStorage.setItem("name","Владимир");
…
var name = localStorage.getItem("name");XMLHttpRequest
XMLHttpRequest получил новое свойство timeout, позволяеющее задавать количество миллисекунд, которое хост будет ждать ответа, после истечения которых произойдет событие ontimeout:
var xhr = new XMLHttpRequest();
xhr.timeout = 10000;
xhr.ontimeout = onTimeout;
…
function onTimeout ()
{
alert("timeout!");
}Новые функции
В JavaScript Internet Explorer 8 также были добавлены несколько функций:
- ToStaticHTML - форматирует исходную строку так, что заменяет строки с тегами на безопасные строки для предотвращения XSS-атак;
- toJSON, JSON.parse, JSON.stringify - служат для работы со строкой содержащей json-данные, приводят объект. Синтаксис функции базируется на ECMAScript 3.1.
Инструмент Developer Tools. Profiler JavaScript.
В восьмой версии Internet Explorer к радости программистов добавлен инструмент, который способен побороться с широко распространенным дополнением Firebug для браузера Firefox.
Панель содержит следующие инструменты и функции:
- инспекция html-кода страниц;
- просмотр и редактирование применяемых стилей;
- выделение элемента по наведению курсора мыши;
- встроенный мощный отладчик JavaScript-кода;
- блокировка скриптов, css, всплывающих окон;
- вывод на отображаемую страницу информации о Id и классе элементов, ссылках;
- подсветку элементов по типу, по позиционированию и по другим параметрам;
- управление изображениями на странице, просмотр информации;
- встроенную динамическую линейку;
- встроенный color picker;
- ссылки на валидацию.
Кроме того, эта панель содержит замечательный функционал - профайлер JavaScript кода:
Этот инструмент позволяет легко отследить узкие места в вашем JavaScript-коде и тем самым повысить производительность сайта и скорость загрузки страниц.
Заключение
В этой статье я попытался рассмотреть новые возможности Internet Explorer, которые он предоставляет программисту. Как оказалось, новая версия браузера несет в себе массу изменений, улучшений, исправлений и добавлений для разработчиков web-проектов. На момент написания статьи последней версией Internet Explorer 8 оставалась beta2, но уже по ней заметно, что компания Микрософт уделила своему браузеру самое пристальное внимание и значительно усовершенствовала его. Для разработчиков важно быть в курсе тенденций в web. Разработка новой версии популярного браузера - это одна из таких тенденций. Надеюсь, что приведенный материал помог разработчикам пополнить свои знания и быть в курсе некоторых новых возможностей, которые предложит финальная версия Internet Explorer 8.
Ссылки по теме