Копирование сайтов

1. Сохранение страницы из браузера

Подопытными кроликами для эксперимента для копирования из браузера будут сайты: http://energytrip.club/ и http://pimpyoureyes.ru/

Когда мы на сайте мы нажимаем Ctrl+S — то есть хотим сохранить страницу, либо нажимаем правую кнопку мыши и выбираем пункт «Сохранить как».

Сохраняем.

Смотрим.

ОРИГИНАЛ

КОПИЯ

ОРИГИНАЛ

На первый взгляд неплохо получилось для сайта http://pimpyoureyes.ru/, сначала подумал, что один в один, но посмотрев чуть получше — съехал фон влево и получилось не так красиво. Эксперимент для этого сайта удачный, так как открыв консоль и поняв что именно не достает можно с легкостью поправить, чтобы работало все на 100%.

Но для сайта http://energytrip.club/ результат уже далеко не такой радужный, здесь количество ошибок во много раз больше, хотя оба сайта были одностраничниками. Результат очень плохой, некуда негодный!

Почему второй сайт дал такой плохой результат? Ответ: не сохранились локально фоновые рисунки! А разве существуют такие программы, которые смогут скачать сразу картинки из CSS свойств, например, распарсить строку со свойством background-image: url-to-image и сохранить картинку в нужном месте? Ответ: читайте мануал дальше. С примером копирования сайта с помощью браузера можно закончить. Этот способ умеет сохранять файлы, которые принадлежат тому же домену, но не сохраняет например картинки из свойства бекграунд и не сохраняет файлы, которые принадлежат другому домену.

Вывод: данный способ подойдет только для очень простых задач.

Посмотреть видео как использовать 2 и 3 способ можно в папке «/video». Для первого способа папка «/video/httrack», для второго способа папка «/video/wget».

2. Использование программы httrack

Для общего развития и чтобы картина была более полная опишем возможности программы httrack.

Скачать программу можно отсюда: https://www.httrack.com/page/2/en/index.html

Эта программа очень популярна для windows пользователей, вам нужно установить подходящую для вас версию, как правило они все идут с консольной версией, то есть там написано (also included: command line version).

В GUI варианте многое удаляется, отсекается.

1) Открываем терминал (консоль).

2) Посмотрим возможности программы.

> httrack --help

3) Базовый функционал весьма прост.

> httrack <URLs> [-option] [+<URL_FILTER>] [-<URL_FILTER>] [+<mime:MIME_FILTER>] [-<mime:MIME_FILTER>]

<URLs> — параметр указываем что мы копируем

[-option] — опции, которые конечно же нужно хорошо прочесть и изучить, не поленитесь, зайдите на официальный сайт (https://www.httrack.com/html/fcguide.html) и почитайте и вникните в смысл всех опций, если хотите стать гуру в использовании httrack.

[+<URL_FILTER>] [-<URL_FILTER>] — эти опции указывают какие УРЛ принимать (с плюсом), а какие отвергать (с минусом)

[+<mime:MIME_FILTER>] [-<mime:MIME_FILTER>] — указываем файлы с каким типом мы принимаем (с плюсом), а с каким типом мы отвергаем (с минусом)

Надуманный пример:

> httrack "http://example.org/" -O "$backupDirectoryPath" "+*.example.org/*" "+http://s3.amazonaws.com/*" -v

"http://example.org/" — УРЛ сайта, который желаем сохранить

"$backupDirectoryPath" — путь до директории, в которую будет сохранены файлы

"+*.example.org/*" — это опция показывает с какого УРЛ можно сохранять файлы

"+http://s3.amazonaws.com/*" — эта опция аналогична опции сверху, то есть позволяет сохранять файлы с УРЛ, которое начинается с "http://s3.amazonaws.com/"

Чтобы жонглировать инструментом нужно прочесть документацию по нему (https://www.httrack.com/html/fcguide.html) много раз и тренироваться, тренироваться. Здесь достаточно уделено внимания эмалированию поведения под браузер, работа с куки, формирование HTTP-заголовков.

Начнем делать практическую часть, так как хуже всего у нас получилось скопировать сайт energytrip.club, давайте на нем и отрабатаем новый инструмент.

В интернете толковых инструкций как сделать копию сайта с помощью httrack мало.

Вот такой вариант для скачивания используйте с httrack:

> httrack --near -%v -z -%B -%P -B -t -p3 -u2 -%u -O ./. "http://energytrip.club"

Пройдемся по параметрам:

--near — копируем со страницы даже тот материал, который находится не на этом домене, за исключением чужих html-страниц

-%v — вывод на экран информацию о скаченных файлах

-z — ведем лог файл, как проходит скачка

-%B — принимать ответы сервера об ошибке

-%P — поиск ссылок везде, даже в js файлах

-B — скачивание как вверх так и вниз по структуре сайта

-t — проверять все ссылки

-p3 — сохранять все файлы

-u2 — проверять всегда тип сохраняемого документа

-%u — запускать программу с другим ID, если она запущена от имени администратора

-O ./. — указывает в какую директорию сохранять файл

"http://energytrip.club" — URL сайта, который хотим сохранить

Когда мы зайдем в директорию, то увидим index.html — но это не тот index.html, который нам нужен, реальный же находится тут «energytrip.club/index.html».

Просто httrack сгенерировал index.html, в котором он записывает свою рекламу, а после редиректит на «energytrip.club/index.html».

Редирект происходит с помощью тега: <meta HTTP-EQUIV="Refresh" CONTENT="0; URL=energytrip.club/index.html">

Нам, конечно же, не нужен index.html сгенерированный httrack — вы его можете удалить. А как же обойтись без файла index.html в корневой дериктории?

Здесь два варианта.

Первый, создать свой index.html, в котором будет прописан тег <meta HTTP- EQUIV="Refresh" CONTENT="0; URL=energytrip.club/index.html"> либо в настройках хостинга прописать redirect или rewrite с корневой ссылки «/» на «energytrip.club/index.html»

Выводы.

Я советуем httrack для копирования именно одностраничников, но не сайта с большим количеством ссылок, что конечно также возможно, но зачем, если есть wget.

3 вариант. WGET

Вот и настал последний вариант, которым можно копировать одностраничники так и сайты с большим количеством страниц!

Wget так как очень популярная и удобная программа, она есть как и на linux, так и на windows.

Для WINDOWS, к примеру, можно скачать отсюда https://eternallybored.org/misc/wget/ или с любого другого места, как вам удобнее.

Давайте посмотрим какой набор параметров должна содержать программа wget, чтобы скачать сайт http://energytrip.club

Документация здесь https://www.gnu.org/software/wget/manual/wget.html. Понятно, что вариаций с параметрами миллионы.

Этот вариант нас более чем устроит:

> wget -E -H -k -K -p http://energytrip.club

Впечатление. Для счастья нам потребовалось только 5-ть параметров и сайт скачан. Скачивание у меня произошло быстрее, чем программой httrack.

Опишем параметры, чтобы понять, что мы попросили сделать wget:

-E — если тип скачиваемого документа ‘application/xhtml+xml’ или ‘text/html’ то файл сохраняется с расширением .html

-H — включает возможность скачивать файлы с домена отличного от заданного

-k — конвертирование ссылок из абсолютных в относительные

-K — сохраняем оригинальные версии файлов с суффиксом “.orig”

-p — из всех описанных параметров этот самый главный, так как говорит программе скачать все файлы, которые необходимы для отображения страницы (да, да, этот параметр заставляет парсить УРЛ во всех текстовых файлах)

Не забывайте, что видео подтверждающее работоспособность есть в папке «video»

Ну что ж, мы скачали одностраничник и какой же вариант лучше?

Однозначно вариант с wget, так как он лучше других документирован и быстрее работает. Httrack это как надстройка над wget, которая не дала ощутимого преимущества.

Одностраничники мы научились копировать, думаю с этим можно покончить.

А можно ли скопировать не одностраничник? Да, можно! Давайте к этому приступим!

Копирования сайта из нескольких страниц можно посмотреть в видео, которое лежит в папке «video/wget_large_site».

К примеру давайте скопируем этот сайт http://dobrogost-mpz.ru/

Как видим это не одностраничник.

> wget --recursive --no-clobber --page-requisites --html-extension --convert-links --restrict- file-names=windows --domains dobrogost-mpz.ru --no-parent http://dobrogost-mpz.ru/

Давайте по нашей доброй традиции опишем параметры, их понимание самое главное!

--recursive — скачиваем рекурсивно весь сайт --no-clobber — не перезаписывать уже скачанные файлы --page-requisites — скачивать все файлы, которые требуются для этой страницы (css, js, images) --html-extension — сохранять файлы с .html расширением --convert-links — конвертировать ссылки из глобальных в относительные --restrict-file-names=windows — изменять имена файлов так, чтобы оффлайн версия сайта работала и на виндовс --domains dobrogost-mpz.ru — это поле важно, оно указываем ТОЛЬКО с какого домена будут скачиваться файлы, можно указать несколько доменов, можно не указывать их совсем! --no-parent — не выходить за пределы сайта, страницы

Вывод.

Это просто очень круто, таким образом можно сделать дубликат любого сайта!

Как добавлять или удалять блоки со всего сайта?

Окей, мы сделали дубликат сайта, а что если мы ходим модифицировать часть контента.

Принцип и как это можно сделать.

Во всех файлах вставлен код, который вам не нужен и вы хотите его удалить. Как это сделать? Тут нам нужен поиск по проекту, то есть мы вводим строку, которую ищем и вводим сроку на которую хотим заменить! Но нужно не забывать, что поиск-замена происходит по всем файлам в директории! Используем для этого поиск и замена в PHPStorm либо RegexBuddy 4. RegexBuddy 4 — это очень крутая программа для работы с регулярными выражениями (https://ru.wikipedia.org/wiki/%D0%A0%D0%B5%D0%B3%D1%83%D0%BB%D1%8F %D1%80%D0%BD%D1%8B%D0%B5_%D0%B2%D1%8B %D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F) эту программу можно найти в папке RegexBuddy. Кто работает из под Linux программа замечательно работает через Wine. Что такое регулярные выражения и как с ними работать можно почитать в русской википедии, потренироваться на сайте https://regex101.com/.

Поиск и замена в PHPStorm

C а

в O ц

с G и

к ф

A л

M а

о д E в ч

S ы и

M н х

у O т

о н N в а

E а

Y р

RegexBuddy

Надеемся вы поняли как удалить А как же добавить динамики?

Делаем это так: удаляем во всех <?php include $_SERVER['DOCUMENT_ROOT'] либо блоках заменить . header '/header_footer/header.php';

и блок footer, во а всем вместо проекте.

них о к

вставляем п

C а

в O ц

с G и

к ф

A л

M а

о д E в ч

S ы и

M н х

у O т

о н N в а

E а

Y р

.R в

<?php include $_SERVER['DOCUMENT_ROOT'] . '/header_footer/footer.php'; // echo $_SERVER['DOCUMENT_ROOT']; ?>

И уже в php файлах прописываем подключение яндекс.метрики и всего того что требуется!

Работа с БД возможно — конечно. Мы же вставили в каждый файл php скрипт, в котором контент может генерироваться как пожелается!

Для администрирования БД и ее проектирования советуем mysql workbench.

Все круто, а как же залить такой сайт на хостинг и возможно ли бесплатно?

ДА!

Список:

https://pages.github.com/ https://www.bitballoon.com/ https://getforge.com/ https://www.figroll.io/ http://surge.sh/ https://www.netlify.com/

Найдется еще немало хостингов, которые предоставляют такую замечательную услугу еще и за бесплатно! Это можно взять БЕСПЛАТНО, без рекламы и сильных ограничений для сайта визитки более чем достаточно!

Давайте перенесем сайт визитку http://mafiamoscow.ru/ на bitballoon.com.

Как правило такие сервисы (хостинги) дают доступ либо по FTP, либо через сайт, либо через их консольную программу.

Ну так что приступим.

1) Регистрируемся на сайте www.bitballoon.com

2) Архивируем наш скачанный сайт в ZIP архив

3) Переходим на страницу https://www.bitballoon.com/sites

4) Переносим наш архив на картинку, на которой написано «Drag & drop a new site»

5) Ждем немного и наш сайт в сети: http://censor-interruption-63303.bitballoon.com/

С помощью сервиса figroll.io, также сделали тоже самое, вот сайт в сети http://sausage- 195.figroll.in/

C а

O ц

с G и

к ф

A л

M а

о д E в ч

S и

M н

у O

н N

Нужно прикрутить обработку форм?

Это тоже не проблема, некоторые из них предоставляют такую услугу.

Например когда вы зайдете на сайт https://www.bitballoon.com/sites и кликните на ваш сайт, то откроется его панель управления, здесь есть вкладочка Forms — Отсюда вы копируете пример HTML и вставляете куда хотите, то есть куда душа захочет, такие обработчики есть практически на каждом хостинге для статики, на давались ссылки. Круто!

А что если там нет таки обработчиков, тогда пользуемся вот этим (как и вставка блока для комментирования так и некоторые для обработки форм):

http://allforms.mailjol.net/ http://www.freedback.com/ http://www.response-o-matic.com/ http://www.feedbackify.com/ https://www.hypercomments.com/ https://vk.com/dev/Comments http://intensedebate.com/ http://www.instacomment.com/

Но если вы зарабатываете на создании сайтов, то возможно стоит задуматься об аренде недорогого платного хостинга, где вам не нужно будет чувствовать ущемление бесплатных версий?

O ц

с G и

к ф

A л

M а

о д E в ч

S и

M н

у O

н N

Давайте перейдем к тому, а как это все дебажить, деплоить

Дебаг

Для отладки PHP скриптов используйте PHPStorm и плагин для хрома Xdebug helper.

Как все это настроить можно посмотреть здесь https://habrahabr.ru/post/250323/ связка phpstorm и xdebug описана и разжевана в сети.

А вот как деплоить (размещать) сайт. Несколько подходов есть простой и более трудный.

Простой. Через любой FTP менеджер загружаете все фалы на хостинг, например, через FileZilla.

Сложнее. В PHPStorm http://zabolotskikh.com/instruments/kak-nastroit-ftp-phpstorm/ Во многих IDE уже встроен FTP-менеджер, который поддерживает загрузку файлов на хостинг, а также мониторинг есть ли точно такой же файл на хостинге или нет!

Еще сложнее.

Многие когда разрабатывают сайт, то они работают с системой GIT. Так вот, GIT как правилу у всех нормальных хостеров также стоит, вам только стоит зайти на сервер из под SSH, сделать инициализацию с вашим git репозиторием и скачать изменения, то есть ввести git pull.

O ц

с G и

к ф

A л

M а

о д E в ч

S и

M н

у O

н N

Как дебажить JS?

Если бы сами писали код, то в 99 случаях из 100 мы бы просто ставили в коде точки остановки и смотрели состояние переменных, после шли по стеку в глубь вызовов, это понятно, но вот как быть если мы скопировали сайт и в его коде ничего не знаем. В таких ситуация я отлавливаю события, например, изменился HTML-тег либо произошел клик по кнопке, но вот как добраться до функции, которая будет вызываться при клике на кнопку – это для является самым главным, но почему-то в интернете мало уделено этому внимания.

Открываем консоль браузера (ctrl + f12), после нахожу html-элемент, который при клике или другом действии изменяется, нажимаю на нем правой кнопкой и отмечаю “Поставить” точку остановы для изменения атрибута элемента либо его содержания.

Когда элемент изменится мы сразу переместимся в ту часть кода, которая вызвала изменения данного элемента.

Чтобы смотреть какие события происходят с элементом. Сначала вам нужно выделить этот тег, после в консоле написать monitorEvents($0);

Чтобы перестать наблюдение unmonitorEvents($0);

(видео находится в папке «/video/debug/show_events_of_element.mp4»)

C а

в O ц

с G и

к ф

A л

M а

о д E в ч

S ы и

M н х

у O т

о н N в а

E а

Y р

Чтобы посмотреть на какие события подписан элемент нужно в консоль ввести getEventListeners($0);

Также это можно посмотреть в боковой панели во вкладке “Event Listeners”

(видео находится в папке «/video/debug/show_all_event_listeners.mp4»)

Если же мы имеем ссылку на функцию, то мы можем мониторить ее вызовы в консоле надо ввести monitor(указатель на функцию).

А как понять, какая функция выполняется после клика, если она была прикреплена с помощью jQuery? В этом нам поможет https://github.com/zertosh/jquery-audit (установка для хром https://chrome.google.com/webstore/detail/jquery- audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg )

Как быстро определить, где у кнопки отрабатывается клик можно посмотреть в папке «/video/debug/debug - show_jquery_events_handle.mp4»

Но также одна из самых главных вкладок для отладки скачанного сайта это вкладка «Сеть».Можно сказать что это не одна из самых главных, а самая главная вкладка, так как с помощью нее мы можем увидеть с каких доменов у нас загружаются ресурсы, какие ресурсы у нас не загрузились и многое, многое другое. Но если мы ее откроем, то увидим множество запросов в которых очень трудно разобраться, для этого нужна система фильтрации. Как работает фильтрация записано на видео, его вы найдете здесь «video/debug/devtools_newtwork.mp4»

O ц

с G и

к ф

A л

M а

о д E в ч

S и

M н

у O

н N

Так же, кто хочет быстро посмотреть скачанные сайты советую установить npm и php.

После того как npm установлено, нужно установить программу static-server, здесь описано как установить и с какими параметрами ее нужно запускать https://github.com/nbluis/static- server

Для php, здесь вся документация http://php.net/manual/en/features.commandline.webserver.php Если вы видели, статичный сервер в мануалах запускали командой: php -S localhost:4004

Также неплохо настроить gulp для нового сайта, генерируйте нужную конфигурацию здесь http://quenchjs.com/ или здесь http://www.steelaxe.io/gulp-generator/

А какие плагины для хрома посоветовать?

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp? utm_source=chrome-app-launcher-info-dialog

https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg? utm_source=chrome-app-launcher-info-dialog

https://chrome.google.com/webstore/detail/image-size-info/oihdhfbfoagfkpcncinlbhfdgpegcigf? utm_source=chrome-app-launcher-info-dialog

https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc? utm_source=chrome-app-launcher-info-dialog

https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg? utm_source=chrome-app-launcher-info-dialog

https://chrome.google.com/webstore/detail/scratch-js/alploljligeomonipppgaahpkenfnfkn? utm_source=chrome-app-launcher-info-dialog

https://chrome.google.com/webstore/detail/pretty-beautiful- javascri/piekbefgpgdecckjcpffhnacjflfoddg?utm_source=chrome-app-launcher-info-dialog

https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop? utm_source=chrome-app-launcher-info-dialog

https://chrome.google.com/webstore/detail/pagespeed-insights-with- p/lanlbpjbalfkflkhegagflkgcfklnbnh?utm_source=chrome-app-launcher-info-dialog

https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn? utm_source=chrome-app-launcher-info-dialog

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc? utm_source=chrome-app-launcher-info-dialog

https://chrome.google.com/webstore/detail/json-editor/lhkmoheomjbkfloacpgllgjcamhihfaj? utm_source=chrome-app-launcher-info-dialog

https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg? utm_source=chrome-app-launcher-info-dialog

Как отследить пользователя?

Давайте представим, что мы новая рекламная сеть и нам нужно отслеживать предпочтения пользователя. Но как сделать так, чтобы наша реклама мыла релевантна на всех сайтах, то есть, чтобы человек зашел на сайт пчеловодов, но мы ему предлагали рекламу о покупке скоростного велосипеда, так как до этого он не слезал с сайтов о велосипедах.

Хорошо, мы поняли суть, а куда же записать эту интересную информацию.

1) WebStorage (https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)

WebStorage включает в себя localStorage, который хранит информацию после выключения браузера, sessionStorage хранит информацию, только когда вкладка открыта, после закрытия браузера из sessionStorage вся информация исчезнет. Надо заметить в некоторых браузерах в режиме инкогнито информацию в эти хранилища нельзя записать, в других можно. ТО ЕСТЬ зачастую работать эти хранилища будут в инкогнито режиме, но после выхода – вся информация из них исчезнет – этот момент нужно четко осознавать, если вы заходили в обычном режиме, то вся информация в localStorage останется! Немного запутано, но с точки логики здесь все реализовано верно.

2) Cookie – ну о них наверно знают многие, кто более менее знаком с браузером. Описывать их спецификацию не вижу смысла, так как это технология весьма старая – информации о ней в сети предостаточно. Вы можете не бояться, вся информация, записываемая в cookie после выхода и режима инкогнито будет стерта, все как нам и обещали. Интересные особенности о них:

• Размер около 4 килобайт

• При каждом запросе все cookie передаются на сервер

• Зачастую в них пишут идентификационную информацию, поэтому никогда, никому их не показывайте их Third-party cookie – это такие cookie, которые оставляются не сайтом, который вы посещаете, например, example.com, а сайтом рекламодателя, реклама которого размещена на example.com. Рекламодатель видит, что это сайт о велосипедах, тогда он в cookie уже для своего сайта, например, ad.foxytracking.com поставит в поле интересы пометку о велосипедах и когда вы зайдете на другой сайт, но который пользуется рекламной сетью ad.foxytracking.com вы увидите рекламу о велосипедах.

Cookie используются также как корзина для товара, когда вы кликаете на кнопку добавить в корзину – запись о товаре записывается в cookie.

3) IndexedDB – эта база данных, которая встроена в ваш браузер, работа с этой БД не похожа на работу с mysql и ей подобными, но для облегчения работы можете воспользоваться данными библиотеками:

• https://mozilla.github.io/localForage/

• http://dexie.org/ В нее также можно поместить интересующую информацию о пользователе.

4) Web SQL Database – это привычная для нас всех база данных, ее поддержка реализована в большинстве браузерах, работа с ней осуществляется обычными SQL-запросами. Почему бы и здесь не оставить интересующую информацию.

5) Silverlight Isolated Storage – наверно, silverlight знают и помнят взрослые веб-разработчики, так как он всегда оставался в тени Adobe Flash, а с приходом HTML5 он окончательно ушел в историю, но как бы не было он имеет место для хранения информации (https://msdn.microsoft.com/en-us/library/3ak841sy(v=vs.95).aspx). Вот тут то и проблема, что это хранилище распределяется между всеми окнами и инкогнито и обычными. Сам silverlight является плагином, поэтому он не так прозрачен и понятен как cookie. К счастью, сейчас его редко где можно встретить.

6) Local shared objects (LSOs) – это аналог HTTP cookies. Это часть данных, которая использует Adobe Flash для хранения информация в вашем браузере. И здесь не все так гладко как с обычными куками, флеш знаменит своими уязвимостями и чтобы на них не попасть – советую отключить этот плагин в вашем браузере. Да, да, даже режим инкогнито нас может не спасти и нас запросто отследят в сети интернет. Вот тому яркое доказательство https://reclaim-your-privacy.com/wiki/Google_Chrome_Incognito_Window

7) Cached objects – чтобы сайты, которые вы часто посещаете загружались в браузерах быстрее, для этого разработан глобальный кеш. Как ни странно, но эту фичу можно использовать, чтобы отследить активность пользователя.

Предположим каждый пользователь загружает скрипт example-script.js в теле которого присваивается переменная var idUser = 4837242384, и это число уникально для каждого юзера, в следующий раз, когда пользователь зайдет на сайт, он не будет перезакачивать этот файл, так как в HTTP заголовке указано, что файл актуален 20 лет.

8) Cache metadata: ETag – вот этим методом пользовались (наверно, и пользуются) нечестные рекламные сети. Etag – это такой заголовок в HTTP, который должен указывать что файл все еще актуален, то есть при следующем запросе клиент передает заголовок Etag, чтобы сервер мог проверить устарела ли версия файла у клиента или нет. Так как почитать подробнее о Etag можно здесь https://en.wikipedia.org/wiki/HTTP_Etag, так же там описана ситуация со слежкой пользователей.

Сервер в этот тег может записать абсолютно любую информацию! Например сервер записал в поле Etag 1233123129831, где первый 7 цифр хеш файла, а остальное уникальный идентификатор юзера и при каждом запросе мы передаем свой уникальный идентификатор.

9) HTML5 AppCache – эта технология позволяет автору сайта указывать какие файлы должны быть доступны пользователю, когда он оффлайн. Как бы ничего страшного, но если подумать, то вебмастер может написать так cache manifest (https://html.spec.whatwg.org/multipage/browsers.html#manifests), что он будет уникален для каждого пользователя, таким способом эта технология позволит веб-мастеру отслеживать нашу активность.

10) Flash resource cache – да, да, опять этот Flash и причем опять со своими уязвимостями! Flash поддерживает свое собственной внутреннее хранилище. Но проблема в том, что когда

мы в браузере делаем очистку кеша, то очистка этого хранилища не происходит! А еще хуже, что это хранилище является единым как в режиме инкогнито, так и без него.

11) SDCH dictionaries - SDCH это алгоритм от Google для сжатия файлов, проблема здесь, что при передаче файла для каждого юзера неумышленно назначается уникальный идентификатор, посмотреть на этот баг можно здесь https://code.google.com/p/chromium/issues/detail?id=327783

12) Можно сохранить идентификатор юзера в window.name – так, если клиент сотрет все данные в браузере, но в это время не закроет эту вкладку, то идентификатор в поле window.name останется нетронутым. 13) HTTP authentication – зачастую этот момент пропускаю, но данные переданные для идентификации не во всех браузерах стераются после сброса данных. 14) HSTS (https://en.wikipedia.org/wiki/HTTP_Strict_Transport_Security) – этот механизм указывает какие сайты должны работать только через https, но проблема в том что запись об этом осуществляется и в режиме инкогнито! Почитать о Origin Bound Certificates (https://www.usenix.org/conference/usenixsecurity12/technical-sessions/presentation/dietz) – то есть для каждого узера присваивается сертификат, который при следующем заходе на сайт будет использоваться, можно привести аналогию с куки-идентификацией.

15) В каждой генерируемой странице содержится скрытое поле в форме, которое содержит индентификационный номер пользователя.

16) Identifier for advertisers – например Apple присваивает каждому телефону уникальный ID, на основе которого подбирается и формируется реклама.

Представим что предыдущие пункты можно обойти, я стану невидимкой?

Ответ на вопрос в заголовке мог быть отрицательно!

С одной стороны у большинства стоит хром, файрфокс или другие браузеры, согласитесь их не так много. Но при этом каждый экземпляр браузера является уникальным! Какие же уникальные черты мы можем увидеть у браузера?

1) User-Agent – строка, которая указывает, что это за браузер, какая версия OS, установленные плагины в браузере.

2) Неточность ваших часов, да, да, как это странно не звучало. Вы заходите с двух разных браузеров, но время то у вас показывает одинаково.

3) Сайт может взять некоторую информацию о вашем CPU выполняя тесты производительности либо на основе WebGl рендеринга. Можете подробнее почитать здесь http://cseweb.ucsd.edu/~hovav/dist/canvas.pdf и здесь http://w2spconf.com/2011/papers/jspriv.pdf

4) Разрешение экрана, включая и второй монитор для людей с несколькими мониторами.

5) Установленные плагины

6) Установленные расширения

7) На основе Math.random(), так как “зерно” зачастую создается только при загрузке системы Проверить свою уникальность браузера можно здесь https://panopticlick.eff.org/ или здесь https://www.browserleaks.com/

Это весьма известный сайт, по их данным – сложив все вышеперечисленные методы можно отследить до 95% людей в интернете. Здесь целый доклад на эту тему http://hostmaster.freehaven.net/anonbib/cache/pets2010:eckersley2010unique.pdf

Оказывается нас можно отследить не только по браузеру, но и по конфигурации сети.

1) По IP. Помните шутку, я вычислю тебя по IP. В этой шутке есть доля правды. Да, вы наверно скажите, у всех серый IP, то есть у тысяч людей может быть один и тот же IP, вы правы, но это уже не все люди на планете.

2) Номер порта у клиента, как правило они открываются последовательно.

3) IP адрес не глобальный, а локальный, его узнать можно с помощью WebRTC (http://www.thousandparsec.net/~tim/webrtc-myip.html ). Получается, что комбинация из внешнего IP адреса и локального – это как правило уникальное сочетание, так как DHCP зачастую кеширует такую информацию.

4) Через какие прокси подключен клиент, эту информацию можно узнать из следующих заголовков: Via, X-Forwarded-For

А как же человеческий фактор?

Каждый человек по своему индивидуален и имеет свои предпочтения, собрав которые мы можем идентифицировать человека. 1) Язык, кодировка, временная зона. 2) Как человек печатает, двигает мышкой. http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.310.4320&rep=rep1&type=pdf

http://www.csis.pace.edu/~ctappert/it691-13spring/projects/mouse-pusara.pdf

http://www.cs.wm.edu/~hnw/paper/ccs11.pdf

https://www.computer.org/csdl/mags/it/2013/04/mit2013040012-abs.html 3) Предустановленные шрифты, размеры, зуум 4) Использует похожие никнеймы, пароли.

Как можно себя обезопасить от слежки?

1) Установить виртуальную машину (лучше купить другой компьютер)

2) Использовать Tor

3) Сделать раздвоение личности и вести себя по-другому

*мануал как установить виртуальную машину: http://www.howtogeek.com/196060/beginner- geek-how-to-create-and-use-virtual-machines/

Можно покупать прокси либо же самому настраивать VPN. Так как бесплатные прокси всем известны и зачастую блокируются.

Из платных аналогов для серфинга: http://www.cyberghostvpn.com/ https://www.tunnelbear.com

Но 100% гарантии вам никто не даст

Что делать если мы хотим сами следить?

Вы можете использовать наработки других людей. Например https://github.com/samyk/evercookie, эта библиотека поможет вам определить человека с несколькими аккаунтами.

Здесь вы можете почитать какими особенностями обладает данная библиотека: http://samy.pl/evercookie/ - также на этой странице вы можете удостовериться, что режим инкогнито на некоторых браузерах не спасает, а на других спасает! Да, заметьте, что для полноценной работы данной библиотеки потребуются бекенд-скрипты, например для проверки пользователя с помощью кеш-технологии.

Для проверки пользователя, что он зашел в режиме инкогнито, используйте данную разработку https://jsfiddle.net/artamonovdev/ay8ynt3t/

Для проверки, что у пользователя стоит блокиратор рекламы: https://github.com/sitexw/FuckAdBlock

Мини-бонус, часто спрашиваю, как устроить взаимодействие между вкладками:

1) Самое простой сделать коммуникацию через localStorage. Когда в объекте localStorage изменяется хотя бы один ключ, это событие всплывает в другой вкладке.

2) Иметь ссылку на новое открывшееся окно (var child = window.open(...) ), в новом окне мы устанавливаем переменную, а в родительсвом проверяем ее через 100 миллисекунд.

3) Отправлять данные в куки и проверять их с таймаутом в 100 миллисекунд.

Как определить ID пользователя в VK без его авторизации. Для этого нужно, чтобы пользователь установил приложение, которое связано с вашим доменом, понятно, что скорее всего такого приложения нет, но в интернете есть сервисы предлагающие услугу по определению человека по ID. Два-три месяца назад этот прием работал, можно было видеть кто заходит к вам на сайт, после данные отдать оператору, которые пишет клиенту в ВК. Если же вы располагаете супер популярным приложением в ВК, то дерзайте:

VK.init({

apiId: ВАШ_API_ID }); function authInfo(response) {

if (response.session) {

alert('user: '+response.session.mid); } else {

alert('not auth'); } } VK.Auth.getLoginStatus(authInfo); VK.UI.button('login_button'); </script>

Копирование сайтов

Report Page