View
286
Download
6
Category
Preview:
DESCRIPTION
Николай Сиварев "Приручая сайты" Я.Субботник в Новосибирске О докладе: В Метрике есть карта кликов, карта ссылок, плеер Вебвизора – всё это веб-приложения, которые поверх произвольной страницы в интернете показывают какие-то данные. Рассказ пойдет о нескольких подходах к созданию таких приложений, достоинствах и недостатках каждого подхода.
Citation preview
Я.Субботник, Новосибирск, 19 ноября 2011 года
Разработчик интерфейсов Николай Сиварев
Приручая сайты
• Есть произвольная страница в интернете
• Необходимо на ней что-‐то показать
Формулировка задачи
2
Вебвизор
3
Карта ссылок
4
Терминология
• Страница, на которой показываем данные — страница-‐жертва.
• Наш скрипт, подключаемый на страницу-‐жертву — вирус.
5
6
Подгрузка скрипта
Как задетектить режим приложения?
• Признак в GET параметрах • Признак внутри #hash • Признак в window.name
7
Подгрузка скрипта
window.open('hhp://site.ru/', 'MyName');
<a href='hhp://site.ru/' target='MyName'>link</a>
<iframe src='hhp://site.ru/' name='MyName'></iframe>
8
Как задать window.name?
Подгрузка скрипта
Какой скрипт грузить?
• Несколько приложений • Несколько локалей • Загрузка dev-‐версии
9
Подгрузка скрипта
Указание пути к скрипту
• В GET параметрах • В #hash • В window.name
Обязательно проверить на корректность!
10
Подгрузка скрипта
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = scriptUrl;
var head = document.getElementsByTagName('head')[0];
head.insertBefore(s, head.firstChild);
11
12
Проблемы
• Общее пространство JavaScript • Общий CSS • Общий DOM
13
Подгрузка скрипта
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = scriptUrl;
var head = document.getElementsByTagName('head')[0];
head.insertBefore(s, head.firstChild);
14
Создаём iframe
var div = document.createElement('div');
div.innerHTML = '<iframe name="MyName" allowtransparency="true" frameborder="0"></iframe>';
var iframe = div.firstChild;
document.body.appendChild(iframe);
15
Подключаем скрипт в iframe
var iframeDoc = iframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write('<!doctype html>');
iframeDoc.write('<html><head>');
iframeDoc.write('<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />');
16
Подключаем скрипт в iframe
iframeDoc.write('</head><body>');
iframeDoc.write('<script src="' + scriptPath + '"></script>');
iframeDoc.write('</body></html>');
iframeDoc.close();
17
18
Достоинства
• Полностью изолированный JavaScript
• Частично изолированный CSS
• Частично изолированный DOM
19
Недостатки
• CSS всё ещё частично общий
• DOM всё ещё частично общий
• Интерфейс в ифрейме ограничен рамками ифрейма
20
21
Достоинства
• Полностью изолированы и JavaScript, и CSS, и DOM.
Бонус • Сайт превратился в скриншот
22
Ещё проблемы
Общение с родным сервером
• JSONP • Кроссдоменный XMLHhpRequest
Плохо?
23
Ещё проблемы
• Невозможно контролировать процесс загрузки приложения
24
Ещё проблемы
• Невозможно перезагрузить исследуемую страницу без перезагрузки интерфейса
25
26
27
Кроссдоменное общение
targetWin.postMessage('message', '*');
window.onmessage = function(message) {
// ...
};
postMessage в IE синхронна!
28
… но
• Страница, выпрыгивающая из фрейма, выпрыгнет из нашего приложения.
• IE не младше 8-‐й версии
29
Резюме
Идеального варианта нет!
30
Разработчик интерфейсов
sivarev@yandex-‐team.ru
Николай Сиварев
Recommended