Исходный код страницы в контакте. Распаковка и расшифровка скриптов JavaScript

Эта статья - дополнение к статье про деобфускацию скриптов. Здесь будут рассмотрены основные принципы шифровки и упаковки, слабые места защит, способы ручного снятия, а также универсальные инструменты для автоматического снятия упаковщиков и навесной защиты со скриптов JavaScript. В последнее время все чаще исходный код скриптов шифруется или пакуется. Этим начали увлекаться Яндекс, DLE и другие популярные проекты, а красивые байки про "заботу о пользователях", "экономию трафика" и прочую чушь выглядят очень смешно. Что ж, если кому-то есть что скрывать, значит наша задача вывести их на чистую воду.

Начнем с теории. Из-за особенностей выполнения JavaScript все шифровщики и упаковщики, несмотря на их разнообразие, имеют всего два варианта алгоритма:или как вариант:Второй способ чаще всего используется для защиты исходного html-кода страницы, а также разными троянами для внедрения в страницу вредоносного кода, например скрытого фрейма. Оба алгоритма могут комбинироваться, "навороченность" и запутанность расшифровщика может быть любой, неизменным остается только сам принцип.

В обеих случаях получается, что функциям eval() и document.write() передаются полностью расшифрованные данные. Как их перехватить? Попробуйте заменить eval() на alert() , и в открывшемся MessageBox"е вы сразу увидите расшифрованный текст. Некоторые браузеры позволяют копировать текст из MessageBox"ов, но лучше воспользоваться таким вот полуавтоматическим декодером:

  1. < html >
  2. < head >< title > JavaScript Decoder
  3. < body >
  4. < script type = "text/javascript" >
  5. // Функция записи в лог результатов расшифровки
  6. function decoder (str ) {
  7. document . getElementById ("decoded" ). value += str + "\n" ;
  8. < textarea id = "decoded" style = "width:900px; height:500px;" >
  9. < script type = "text/javascript" >

Для примера возьмем какой-нибудь скрипт с Яндекса, посмотрев исходный код видим что-то нездоровое:

Eval(function(p,a,c,k,e,r){e=function(c){return(c c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!
"".replace(/^/,String)){while(c--)r=k[c]||e(c);k=}];e=function(){return"\w+"};c=1};while(c--)if(k[c])
p=p.replace(new RegExp("\b"+e(c)+"\b","g"),k[c]);return p}("$.1e
.18=8(j){3 k=j["6-9"]||"#6-9";3 l=j["6-L"]||".u-L";3 m=j["6-L-17"]
||"";3 n=j["1d"]||0;$(5).2(".6-9").14("7");$(5).2(".6-9").Z("7",8(
){3 a=$(5).x();3 o=$(5).x();3 h=$(5).B("C");$(5).v("g-4");$(5).16(
$(k).q());3 t=$(o).2("15");3 c=$(o).2(".b-r");3 d=$(o).2(".b-12");
[остальной такой же бред отрезан]

Сразу скажу, что этот скрипт обработан JavaScript Compressor , его легко узнать по сигнатуре - характерному названию фукнции в начале скрипта. Копируем целиком исходный текст скрипта, заменяем первый eval на decoder , вставляем в декодер и сохраняем его как html-страничку.Открываем ее в любом браузере и видим, что в textarea сразу появился распакованный скрипт. Радоваться пока рано, в нем убраны все переносы строчек и форматирование кода. Как с этим бороться написано в статье про деобфускацию .

Второй пример. Вот html-страничка , накрытая программой HTML Protector. Это страница, демонстрирующая возможности программы, поэтому там задействованы все опции: блокировка выделения и копирования текста, запрет правой кнопки мыши, защита картинок, скрытие строки состояния, шифрование html-кода и т.д. Открываем исходный код, смотрим. В самом верху уже знакомый нам document.write и зашифрованный скрипт. Запускаем его через декодер, получаем функцию расшифровки основного содержимого:

Code (JavaScript) :

  1. hp_ok = true ;function hp_d01 (s ){ ... вырезано ... o = ar . join ("" )+ os ; document . write (o )

Заменяем в функции последний document.write на decoder и вставляем после нее все три оставшихся зашифрованных скрипта:

  1. < script type = "text/javascript" >
  2. // Сюда вставить зашифрованный скрипт, предварительно
  3. // заменить в нем все вызовы eval() и document.write() на decoder().
  4. hp_ok = true ;function hp_d01 (s ){ .... o = ar . join ("" )+ os ; decoder (o );
  5. hp_d01 (unescape (">QAPKRV%22NCLEWC ....
  6. hp_d01 (unescape (">QAPKRV%22NCLEWCEG? HctcQa ...
  7. hp_d01 (unescape (">`mf{%22`eamnmp? !DDDDDD %22v ...

Для удобства в статье скрипты приводятся не полностью, вы же должны копировать их целиком. Открываем декодер в браузере и видим защитные скрипты, добавленные программой, и расшифрованный исходный текст страницы. Для удобства можно расшифровывать только третий скрипт, в котором содержится html-код страницы. Вот и вся защита. Как видите, ничего сложного. Аналогично снимаются и другие защиты html-страниц.

От ручной расшифровки перейдем к автоматической. Для снятия защит первого типа я немного модифицировал уже известный вам скрипт Beautify Javascript и откомпилировал его в exe-файл. Он без проблем справляется с большинством виденных мной защит и упаковщиков JavaScript.

Eval.JavaScript.Unpacker.1.1-PCL.rar (12,124 bytes)


Для более сложных случаев придется пускать в ход тяжелую артиллерию. Это бесплатный проект , предназначенный для исследования троянов и другого вредоносного кода. Поскольку все программы, предназначенные для защиты авторского права, являются однозначно вредоносными, Malzilla поможет нам в борьбе с ними. Качаем (на сегодняшний день это 1.2.0), распаковываем, запускаем. Открываем вторую вкладку Decoder, в верхнее окно вставляем код зашифрованного скрипта, нажимаем кнопочку Run script .



В папке eval_temp складываются все результаты выполнения функций eval(), в том числе и промежуточные. Их можно посмотреть, нажав на кнопку Show eval() results , текст откроется в нижнем окне. Его можно скопировать, вставить в верхнее окно и сразу же отформатировать нажатием кнопки Format code . Кроме декодера Malzilla имеет еще множество инструментов и настроек, позволяющих легко снять любую защиту со скриптов JavaScript.



Также можно обратить внимание на еще один бесплатный инструмент для работы с зашифрованными скриптами - FreShow . Функций в нем поменьше, но вполне имеет место быть. С офсайта можно скачать демонстрационный ролик, показывающий пример работы с программой.

Как видите, нет ничего сложного в снятии защиты со скриптов JavaScript и с html-страниц. Вы все еще продолжаете защищать свои поганые "аффтарские права"? Тогда мы идем к вам!

Под всеми красивыми изображениями, совершенной типографией, и чудесно размещенными призывами к действию, расположен исходный код вашего сайта.

Ежедневно, этот код ваш браузер превращает во впечатляющие страницы для ваших посетителей и клиентов.

Google и другие поисковые системы «читают» этот код, чтобы определить, где ваши веб-страницы должны появиться в их индексах для данного поискового запроса.

Следовательно, очень большое значение для поисковой оптимизации (SEO) имеет то, что находится в исходном коде.

Это краткое руководство, продемонстрирует вам, как читать исходный код вашего сайта для того, чтобы вы были уверены, в правильности SEO и чтобы научить вас проверять ваши условия SEO.

Также рассмотрим несколько других ситуаций, когда знания, как просмотреть и изучить главные части исходного кода, помогут в других маркетинговых изысканиях.

Как просмотреть исходный код.

Первый шаг в проверке исходного кода вашего сайта, это посмотреть реальный исходный код. Любой веб-браузер позволяет сделать это легко.

Ниже перечислены клавиатурные команды для просмотра исходного кода вашей веб-страницы для PC и Mac .

  • Firefox — CTRL + U (Удерживая нажатой клавишу CTRL, нажмите клавишу»U») Кроме того, вы можете пойти в меню «Firefox», затем нажмите » Web Developer «, а затем» Исходный код страницы «.
  • Internet Explorer — CTRL + U. Или щелкните правой кнопкой мыши и выберите пункт «View Source».
  • Хром — CTRL + U. Вы можете нажать на изображение ключа с тремя горизонтальными линиями в правом верхнем углу. Затем нажмите на «Инструменты» и выберите «View Source».
  • Опера — CTRL + U. Вы также можете щелкнуть правой кнопкой на веб-странице и выбрать «Просмотр исходного кода страницы.»

Макинтош

  • Safari — сочетание клавиш Option + Command + U. Вы также можете щелкнуть правой кнопкой на веб-странице и выберите «Показать Page Source».
  • Firefox — Вы можете щелкнуть правой кнопкой и выберите пункт «исходный текст» или вы можете перемещаться в меню «Сервис», выберите «Web Developer», и нажмите «Page Source.» Сочетание клавиш Ctrl + U.
  • Хром — Перейдите в «Вид», затем нажмите «разработчик», а затем «View Source». Вы также можете щелкнуть правой кнопкой и выберать пункт «Просмотр исходного кода страницы.» Сочетание клавиш Option + Command + U.

После того, как вы знаете, как просмотреть исходный код, вы должны знать, как осуществить поиск в нем.

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

Команды, CTRL + F (найти) поможет Вам быстро просмотреть исходный код важных элементов SEO.

Теги заголовков.

Тег заголовка является самым главным элементом SEO. Это самое главное в исходном коде.

Если вы собираетесь взять одну лишь ценную вещь из этой статьи, обратите внимание на это:

Вы знаете, эти результаты Google предоставляет, когда вы ищете что-то.

Все эти результаты берутся из тегов заголовков веб-страниц. Так что, если у вас нет тегов заголовков в исходном коде, вы можете не появиться в Google (или в любой другой поисковой системе).

Верите или нет, я на самом деле видел веб-сайты без тегов заголовков. Давайте попробуем сделать быстрый поиск в Google для термина «Marketing Guides «. Что мы видим:

Вы можете видеть, первый результат поиска для блога KISSmetrics раздел Marketing Guides .

Если мы перейдем по ссылке первого результата поиска и просмотрим исходный код страницы, то можно увидеть в заголовке тег:

Тег заголовка обозначается открывающим тегом: </b>. и заканчивается закрывающим тегом: <b></ <i>title </i>> </b>. Тег заголовка, расположен как правило, в верхней части исходного кода в разделе <b><head> </b>. </i></p> <p>И мы видим, что содержание внутри тега заголовка соответствует тому, что используется в заголовке результата поиска Google.</p> <p>Но не только теги заголовков необходимы для того чтобы быть включенными в результаты поиска Google.</p> <p>Google еще и идентифицирует слова в тегах заголовков в качестве важных ключевых слов, которые, по его мнению актуальны для поиска пользователей.</p> <p>Так что если вы хотите получить определенное ранжирование веб-страницы для конкретной темы, то вам лучше убедиться, что слова, которые описывают предмет включены в тег заголовок. </p> <p>Существует <a href="/windows-7/prestigio-multipad-4-quantum-8-1-proshivka-prestigio-obnovlyaet-proshivki-celogo-ryada/">целый ряд</a> онлайновых ресурсов, где вы можете узнать больше о том, как ключевые слова и теги заголовков играют важную роль в <a href="/classmates/mikroprocessory-referat-arhitektura-mikroprocessora---struktura-i/">общей архитектуре</a> вашего сайта.</p> <p>Вот некоторые важные пункты, которые позволят вам помнить о важности ваших Тег заголовков:</p> <ul><li>Убедитесь, что у вас есть только один тег заголовка на веб-страницу.</li> <li>Убедитесь в том, что каждая веб-страница на сайте имеет свой тег заголовок.</li> <li>Убедитесь, что каждый тег заголовок на сайте уникален. Никогда не дублируйте контент определенного тега заголовка.</li> </ul><h3></h3> <p>Следующий <a href="/audio/heshtegi-v-instagramm---samyi-vazhnyi-element-v-raskrutke-instagram/">важный элемент</a> головной части вашей веб-страницы является мета-тег описания. </p> <p>Это фрагмент вашего контента из 160 символов, который отображается под вашим заголовком в поисковых системах. </p> <p><img src='https://i2.wp.com/infobiz-tools.com/wp-content/uploads/2014/02/read-website.png' height="511" width="500" loading=lazy></p> <p>Я видел сотни сайтов, которые полностью игнорируют этот тег. </span><span>Его очень легко найти в исходном коде: </p> <p><img src='https://i2.wp.com/infobiz-tools.com/wp-content/uploads/2014/02/how-read1.png' width="100%" loading=lazy></p> <p>Таким образом, проверьте и убедитесь, что этот тег присутствует на всех веб-страницах вашего сайта. Что еще более важно, убедитесь, что вы не дублируете его на нескольких страницах.</p> <p>Дублирование мета-тег описания не пинальти для <a href="/audio/cham-ham-poiskovaya-sistema-anonimnaya-poiskovaya-sistema-ixquick/">поисковой системы</a>, но это очень большая маркетинговая ошибка.</p> <p>Многие игнорируют мета тег описания, но вы действительно должны поработать в этом направлении, потому что он считывается поисковой системой.</p> <p>Подумайте о том, что мета-тег описания будет помощью привлечь больше посетителей и увеличить целевые переходы на сайт.</p> <p>Как изменить код элемента на сайте — для начала нужно узнать в каком файле находится этот код. Есть много способов, но опишу один, наиболее мне приглянувшийся и который использую сам.</p> <p>Вы можете увидеть код нужного элемента нажав правой кнопкой мыши и исследовать его или посмотреть исходный код страницы. Во всех браузерах аналогичный способ, для каждого существуют определённые дополнения, осуществляющие эти процессы.</p> <p>Каждому что-то удобно или нет — этот вопрос обсуждать не будем. Наша задача — найти файл с расположенным кодом.</p> <h2>Как найти файл:</h2> <p>Я использую файловый <a href="/wi-fi-ethernet/luchshie-besplatnye-analogi-failovogo-menedzhera-total-commander-luchshii/">менеджер Total</a> Commander. Нахожу это очень удобным методом.</p> <p>Итак, например мы нашли элемент, подсветив его в браузере и увидели, что он заключен в <<span>div <span>class =»wpb_wrapper « </span>> </p> <p>Для начала лучше скопировать папку с вашим сайтом с сервера и расположить её в удобном месте, рабочий стол к примеру.</p> <p>Копируем <<span>div <span>class =»wpb_wrapper « </span>> </span> и открываем Commander. Выбираем инструменты — поиск</p> <p>Место поиска — выбираете ранее сохранённую папку с сайтом. Ставите галочку с текстом и вводите искомый <div> или что вам нужно.</p> <p>Программа выдаст расположение всех файлов, в которых он присутствует. Как изменить код сайта — вы уже знаете какой файл нужно редактировать.</p> <p>Если на сервере нет редактора — меняете на компьютере и загружаете по FTP.</p> <p>Экспериментируйте, сокращайте или увеличивайте запрос — найдётся всё, но не стоит искать динамически подгружаемые данные. Естественно они не покажутся.</p> <p>Также с помощью браузера изменяются и стили. Подсветили, увидели номер строки, открыли файл стилей и ввели нужное значение. Успехов!</p> <ul><p>Думаю что никак, может быть будучи опытным хакером кто-то и занимается тем что меняет HTML-код на чужой странице и тем самым получает доступ к ней, а вот законопослушным пользователям это сделать совсем не просто, да и не стоит в общем.</p> <p><b>HTML-код страницы ВКонтакте </b> изменить можно.</p> <p>Но вс дело в том, что загрузить изменнную Web-страницу на хостинг вы не сможете - у вас же нет никакого доступа к ftp.</p> <p>А так, можно нажать комбинацию <b>Ctrl + U </b> (Опция Просмотр кода страницы). Откроется код страницы, вы можете скопировать его в любой редактор и отредактировать.</p> <p>Также можно нажать комбинацию <b>Ctrl + S </b> (Опция Сохранить на компьютер). Web-страница загрузится на ваш жсткий диск. При этом, помимо самой страницы, загрузятся все изображения и скрипты, которые на ней используются.</p> <p>Советую воспользоваться удобным html-редактором Notepad++. После его установки на компьютер выбираете в <a href="/program/kontekstnoe-menyu-obektov-windows-kontekstnoe-menyu-v-windows-dopolnitelnoe-menyu-na/">контекстном меню</a> файла пункт Edit with Notepad++ и редактируете с помощью редактора вс, что вам необходимо!</p> <p>Многие пользуется этим для различного рода розыгрышей (подделка переписки, увеличение количество подписчиков, входящих сообщений и тд), а также и в мошеннических целях.</p><p>Сначала вы заходите на ту страничку, которую и собираетесь изменять (редактировать html - код).</p> <p>Далее жмите на клавишу F12 или же сразу наведите курсор мышки на тот элемент, который и хотите поменять. Далее кликаете правой кнопкой мыши и в появившемся окне выбираете пункт Просмотр кода элемента.</p> <li><ol><li>Заходим на станицу в контакте, которую и будем менять.</li> </ol><ol><li>Нажимаем F12, наводя мышку на <a href="/computer/chto-takoe-sidiya-na-aifone-chto-takoe-cydia-i-dlya-chego-ona-nuzhna/">нужный элемент</a>, нажимаем <a href="/audio/zachem-nuzhna-pravaya-knopka-myshi-peretaskivanie-failov-pri-pomoshchi/">правую кнопку</a> мыши и выбираем просмотр кода элемента.</li> </ol><p>Меняем правой кнопкой мыши, находим пункт <b>Edit as Html </b>.</p> <p><img src='https://i0.wp.com/info-4all.ru/images/b1921e66d37530e8a6efb4c800dfe829.jpg' width="100%" loading=lazy></p> <p>На скриине видно, что изменилась аватарка.</p> <ol><li>Меняем имя.</li> </ol><p><img src='https://i1.wp.com/info-4all.ru/images/c967300214e00ba6f128af59bc5c7cd9.jpg' width="100%" loading=lazy></p> <p><img src='https://i0.wp.com/info-4all.ru/images/b178ae42285f3f592916be150f5ac305.jpg' width="100%" loading=lazy></p> <p><img src='https://i0.wp.com/info-4all.ru/images/6f98dc6f8e07bbea5070ca6908393e83.jpg' width="100%" loading=lazy></p> <p>Результат.</p> <p><img src='https://i2.wp.com/info-4all.ru/images/b5873665d90cd67279e98e701150bfaf.jpg' width="100%" loading=lazy></p></li> <p>Вы не сможете изменить html-код Вконтакте на самом хостинге Вк, пока менеджер компании не устроит вас программистом.</p> <p>Но вы можете просмотреть код страницы и скопировать его в редактор Wordepad, откуда и будете редактировать html. Для этого нажмите в браузере правой кнопкой мыши и нажмите Просмотр кода страницы.</p> <p><b>HTML код </b> это самый главный язык разметки для разных документов.Все файлы,которые написаны кодом HTML имеют свое расширение такое как-.html или же.htm .<a href="/computer/oshibka-pri-chtenii-dannyh-kod-6-reshenie-unarc-dll-vernul-kod-oshibki/">Данный код</a> можно открыть в любом вашем текстовом редакторе, а также существуют <a href="/windows-7/glavnye-poklonniki-v-vk-kak-posmotret-gostei-v-kontakte-s-pomoshchyu/">специальные приложения</a> для веб-мастеров.</p> <p><img src='https://i2.wp.com/info-4all.ru/images/e969c343f0d8883abc73d9327bcd0747.jpg' width="100%" loading=lazy></p> <p>В браузере нужно перейти туда,где вы хотите исправить код,потом нужно открыть код нужной вам страницы для просмотра. Для этого нужно выбрать пункт меню в браузере.</p> <p>А потом уже можно его отредактировать в редакторе.</p> <p>Код открыли, а он не редактируется.</p> <p>Правильно вы его его видите в режиме просмотра.</p> <p>А вот чтобы редактировать нужно совсем немного, логин и пароль к доступу на правах администратора сайта Вконтакте - но где ж вы его возьмете?</p> <p>Открыть исходный код страницы вы, конечно, сможете. И даже отредактировать его. Но сохранить его на сервер не получится. Только на собственный компьютер.</p> <p>Более того. Подобные сайты не состоят из <a href="/classmates/kodirovka-html-stranicy-kodirovka-html-stranicy/">страниц HTML</a>. Они динамически верстаются по шаблону из базы данных так, как это запрограммировано. Ваш браузер отправляет запрос на сервер. Там запускается <a href="/audio/uvelichit-vremya-vypolneniya-skripta-php-ini-kak-nastroit-v-php/">скрипт php</a> (например), который собирает необходимые данные воедино и отдат их браузеру под видом HTML. Браузер это кушает и показывает страницу, как будто бы она изначально состояла из того HTML-кода, который слепил ему скрипт.</p> <p>Изменить HTML- код страницы в контакте просто.</p> <p>Открываете <a href="/classmates/agregator-kontenta-chto-eto-i-zachem-on-nuzhen-nastraivaetsya/">нужную страницу</a>. В меню браузера ищете пункт Показать исходный код (может быть по-другому). Браузер откроет HTML код страницы. Выделяете все, копируете, вставляете в <a href="/wi-fi-ethernet/kakoi-programmoi-mozhno-sravnit-2-tekstovyh-faila-kak-sravnit/">текстовый документ</a>, и можете изменять.</p> <p>Вот только что вам это даст? Обратно на сайт вы его не засунете. Страница на сайте останется такой же.</p> <p>А такое разве реально? Это же чужой сайт. Как там можно изменить структуру сайта? Пологаю что ни как, если только не взломать его</p> </ul> <p>Просматривая бесчисленное множество сайтов в интернете, можно встретить такие, которые очень нам нравятся. Сразу же возникает ряд вопросов. Сайт сделан с помощью самописного кода или какой-нибудь CMS? Какие у него <a href="/vkontakte/prosmotret-ishodnyi-kod-interaktivnyi-prosmotr-vliyaniya/">CSS стили</a>? Какие у него мета-теги? И так далее.</p> <p>Существует много инструментов, с помощью которых можно извлечь информацию о коде страницы сайта. Но под рукой у нас всегда есть правая кнопка мыши. Её-то мы и будем использовать, на примере моего сайта.</p> <h2>Как просмотреть код страницы?</h2> <p>Чтобы посмотреть исходный код страницы сайта, нужно навести курсор мыши на любую область веб-страницы (за исключением изображений и ссылок). После этого нажать на правую кнопку мыши. Перед нами откроется окно с несколькими опциями (в <a href="/browsers/mobilnyi-brauzer-gugl-dlya-dzhava-kak-vklyuchit-java-ili-javascript-v-raznyh/">разных браузерах</a> они могут немного отличаться). В браузере <a href="/skype/usloviya-predostavleniya-uslug-google-chrome-obzor-besplatnoi-versii-google-chrome/">Google Chrome</a>, например, это команды:</p> <ul><li>назад;</li> <li>вперёд;</li> <li>перезагрузить;</li> <li>сохранить как;</li> <li>печать;</li> <li>перевести на русский;</li> <li><b>просмотр кода страницы </b>;</li> <li>просмотреть код.</li> </ul><p>Нам нужно кликнуть на <b>просмотр кода страницы </b>, и перед нами откроется html код страницы сайта.</p> <h2>Просмотр кода страницы: на что обратить внимание?</h2> <p>Итак, Html код страницы представляет собой пронумерованный список строк, каждая из которых несёт информацию о том, как сделан данный сайт. Чтобы быстрей научиться разбираться в этом огромном количестве знаков и <a href="/usb-flash-drive/simvol-pticy-dlya-nika-specialnye-simvoly-vkontakte/">специальных символов</a>, нужно различать разные участки кода.</p> <p>Например, строки кода, находящиеся в внутри тега head содержат информацию для <a href="/wi-fi-ethernet/poiskovye-mashiny-kratko-oharakterizuite-kazhduyu-referat-poiskovye-mashiny/">поисковых машин</a> и веб-мастеров. Они не выводятся на сайт. Здесь можно увидеть, по каким <a href="/vkontakte/podbor-domennyh-imen-po-klyuchevym-slovam-podbiraem-domen-s-klyuchevym/">ключевым словам</a> продвигается эта страница, как написаны её title и description. Также здесь можно встретить ссылку, перейдя по которой узнаем о семействе <a href="/classmates/izmenilsya-shrift-vkontakte-google-chrome-kak-pisat-zhirnym-shriftom/">google шрифтов</a>, используемых на сайте.</p> <p>Если сайт сделан на <a href="/skype/admin-area-admin-panel-cms-wordpress-dobavlenie-spravochnogo-resursa-v/">CMS WordPress</a> или Joomla, то это также будет видно здесь. Например, в этой области выводится информация о <a href="/audio/delovye-temy-wordpress-dlya-advokatov-i-yuristov-s-formoi-zapisi-shablony-po/">теме WordPress</a> или <a href="/browsers/pokaz-pozicii-modulei-joomla-3-pozicii-modulei-v-shablonah-joomla-sozdanie-i/">шаблоне Joomla</a> сайта. Увидеть её можно, прочитав содержание ссылок, выделенных синим цветом. В одной ссылке виден шаблон сайта.</p> <p>Например:</p> <p><i>//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3 </i></p> <p>Мы увидим CSS стили шрифтов страницы. В <a href="/computer/tarif-megafon-vse-vklyucheno-m-opisanie-i-ceny-na-internet-davaite-zhe/">данном случае</a> используется шрифт. Это видно здесь – font-family: ‘Source Sans Pro’.</p> <p>Данный сайт оптимизируется с помощью сео-плагина <a href="/program/kak-sdelat-hlebnye-kroshki-wordpress-plagin-yoast-seo-nash-luchshii-pomoshchnik-kak/">Yoast SEO</a>. Это видно из этого закомментированного участка кода:</p> <p><i>This site is optimized <a href="/vkontakte/planshet-vydaet-komandy-net-chto-delat-now-send-the-package-you-want-to-apply-to-the-device-with-adb-sideload/">with the</a> Yoast SEO plugin v3.4.2 — https://yoast.com/wordpress/plugins/seo/ </i></p> <p>Вся информация, находящаяся внутри тега body, выводится браузером на экране монитора. Здесь мы видим html код страницы, а в самом низу находится код скрипта Яндекс метрики. Он облечён закомментированным тегом с текстом:</p> <p><i>/Yandex.Metrika counter </i></p> <p><img src='https://i2.wp.com/vlad-tver.ru/wp-content/uploads/2016/08/metrika.jpg' width="100%" loading=lazy></p> <h2>Подводим итоги</h2> <p>Проведя довольно поверхностный анализ кода <a href="/usb-flash-drive/kak-na-androide-udalit-yarlyk-s-rabochego-stola-udalenie-stranic/">главной страницы</a> сайта, можно сделать вывод о том, с помощью каких инструментов сделана эта страница. Мы увидели на ней:</p> <ul><li>CMS WordPress;</li> <li>Google шрифт Source Sans Pro;</li> <li>тема WordPress – Sydney;</li> <li>плагины Yoast;</li> <li>счётчик Яндекс метрики.</li> </ul><p>Теперь принцип анализа html кода страницы сайта вполне понятен. Совсем необязательно держать исследуемую страницу открытой в браузере. Сохранить код страницы себе на компьютер можно с помощью комбинаций клавиш ctrl+a, ctrl+c, ctrl+v. Вставьте её в любой <a href="/windows-7/kakie-sushchestvuyut-tekstovye-redaktory-dlya-kompyutera-obzor/">текстовый редактор</a> (лучше Notepad++) и сохраните с <a href="/computer/ne-otkryvaet-html-v-brauzere-html-rasshirenie-faila/">расширением html</a>. Таким образом, вы в любое время сможете изучить её глубже и найти больше полезной для себя информации.</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <footer class="entry-meta"> </footer> </div> </article> </main> </div> </div> <div id="secondary" class="widget-area col-sm-12 col-md-4" role="complementary"> <div class="well"> <aside id="search-2" class="widget widget_search"> <form method="get" class="form-search" action="/"> <div class="input-group"> <input type="text" class="form-control search-query" value="" name="s" id="s" placeholder="Поиск..."> <span class="input-group-btn"> <button type="submit" class="btn btn-default" name="submit" id="searchsubmit" value="Search"><span class="glyphicon glyphicon-search"></span></button> </span> </div> </form> </aside> <aside id="recent-comments-2" class="widget widget_recent_comments"> <h3 class="widget-title">Новые статьи</h3> <ul id="recentcomments"> <li class="recentcomments"><a href="/computer/v-prilozhenii-bluetooth-proizoshla-oshibka-ne-zakryvaetsya-chto-delat/">Что делать, если в приложении «Сервисы Google Play» произошла ошибка</a></li> <li class="recentcomments"><a href="/programs/nastroika-routera-na-noutbuke-kak-podklyuchit-wifi-router-esli/">Как Подключить WiFi Роутер, Если Есть Проводной Интернет</a></li> <li class="recentcomments"><a href="/usb-flash-drive/hdd-scanner-kak-uznat-razmer-papok-i-failov-kak-naglyadno-uvidet-kakie/">Как наглядно увидеть, какие папки и файлы на компьютере занимают больше всего места</a></li> <li class="recentcomments"><a href="/vkontakte/kak-podklyuchit-melodiyu-bilaine-kak-otklyuchit-usluga-bilain-privet/">Как отключить услуга Билайн «Привет</a></li> <li class="recentcomments"><a href="/windows-7/vidy-licenzii-windows-vidy-licenzii-windows-vin-10-licenziya/">Виды лицензий Windows Вин 10 лицензия</a></li> <li class="recentcomments"><a href="/program/sozdanie-demotivatorov-delaem-demotivatory-programmy-dlya-sozdaniya/">Создание демотиваторов. Делаем демотиваторы. Программы для создания демотиваторов</a></li> <li class="recentcomments"><a href="/odnoklassniki/photoshop-cs2-kod-aktivacii-photoshop-cs2-teper-besplaten-ustanovka-photoshop-cs2-v/">Photoshop CS2 теперь бесплатен</a></li> <li class="recentcomments"><a href="/browsers/kak-poluchit-attestat-webmoney-formalnyi-nachalnyi-i-personalnyi/">Как получить персональный аттестат WebMoney?</a></li> <li class="recentcomments"><a href="/usb-flash-drive/udelnaya-elektroprovodnost-edinicy-izmereniya-raschet-elektroprovodnosti-vody/">Расчет электропроводности воды</a></li> <li class="recentcomments"><a href="/usb-flash-drive/vybiraem-analog-bluestacks-vybiraem-analog-bluestacks-nastroika-upravleniya-v/">Выбираем аналог BlueStacks Настройка управления в играх</a></li> </ul> </aside> <aside id="recent-comments-2" class="widget widget_recent_comments"> <h3 class="widget-title">Последние статьи</h3> <ul id="recentcomments"> <li class="recentcomments"><a href="/computer/sozdanie-prostyh-vsplyvayushchih-podskazok-na-html5-css-i-jquery/">Всплывающая подсказка html и css без скриптов Всплывающая подсказка input в фокусе на css</a></li> <li class="recentcomments"><a href="/programs/php-shablonizator-twig-vvedenie-obrabotchik-shablonov-twig-bystryi-start/">PHP шаблонизатор Twig. Введение. Обработчик шаблонов Twig. Быстрый старт Синтаксис twig</a></li> <li class="recentcomments"><a href="/hard-drive/chto-takoe-sdram-pamyat-operativnaya-pamyat-chto-takoe-pamyat-ddr/">Что такое sdram память. Оперативная память. Что такое память DDR SDRAM</a></li> <li class="recentcomments"><a href="/hard-disk/401-chto-za-nomer-kak-otklyuchit-platnye-uslugi-tele2-voprosy-ot/">Как отключить платные услуги Теле2</a></li> <li class="recentcomments"><a href="/vkontakte/znachenie-slovosochetaniya-laquorezhim-ozhidaniya-pochemu-v-rezhime-ozhidaniya/">Почему в режиме ожидания смартфон Андроид жрет батарею?</a></li> <li class="recentcomments"><a href="/vkontakte/pochemu-ne-rabotaet-pleimarket-ustranenie-nepoladok-v-rabote-google-play/">Устранение неполадок в работе Google Play Market</a></li> <li class="recentcomments"><a href="/usb-flash-drive/desh-vyi-i-yarkii-zte-blade-a530-dostoinstva-i-nedostatki/">ZTE Blade A530 — достоинства и недостатки</a></li> <li class="recentcomments"><a href="/audio/programmy-dlya-kadastrovyh-inzhenerov-programmnoe-obespechenie-programmnoe/">Программное обеспечение Программное обеспечение для кадастрового инженера</a></li> <li class="recentcomments"><a href="/hard-drive/besprovodnaya-zaryadka-dlya-apple-watch-ne-vklyuchayutsya-apple-watch-chto-delat-chasy-apple-iwatch/">Не включаются Apple Watch что делать?</a></li> <li class="recentcomments"><a href="/programs/maining-bitkoinov-v-chem-sut-vychisleniya-maining-kriptovalyuty-chto-eto-takoe-prostymi-slovami-maini/">Майнинг криптовалюты: что это такое простыми словами</a></li> </ul> </aside> <aside id="recent-comments-2" class="widget widget_recent_comments"> </aside> </div> </div> </div> <div id="yandex_rtb_R-A-202909-1"></div> </div> </div> </div> <div id="footer-area"> <div class="container footer-inner"> <div class="row"> </div> </div> <footer id="colophon" class="site-footer"> <div class="site-info container"> <div class="row"> lickeys.ru - Полезные советы по социальным сетям. Инструкции по настройке ПК </div> </div> <div class="scroll-to-top"><i class="fa fa-angle-up"></i></div> </footer> </div> <script type="text/javascript"> disableSelection(document.body) </script> <script type='text/javascript' src='https://lickeys.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.2'></script> <script type='text/javascript'> /* <![CDATA[ */ var cm_imgs = { "fileTypeError":"\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u0412\u044b \u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043d\u0435\u0432\u0435\u0440\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d\u043e \u043a \u0432\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044e.","fileSizeError":"\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435! \u0412\u044b \u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0444\u0430\u0439\u043b. \u041f\u0440\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f, \u0444\u0430\u0439\u043b \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d! \u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430:","limitFileSize":"2097152","fileCountError":"<strong>\u0412\u043d\u0438\u043c\u0430\u043d\u0438\u0435!<\/strong> \u0412\u044b \u043f\u044b\u0442\u0430\u0435\u0442\u0435\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u043e\u0432. \u041f\u0440\u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0435 \u043a\u043e\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f, \u0444\u0430\u0439\u043b\u044b \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b <br \/>\u041c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439: ","limitFileCount":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='https://lickeys.ru/wp-content/plugins/comment-images-reloaded/js/cir.min.js?ver=4.9.1'></script> <script type='text/javascript' src='https://lickeys.ru/wp-content/themes/sparkling/inc/js/skip-link-focus-fix.js?ver=20140222'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script type='text/javascript' src='https://lickeys.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6'></script> <script type='text/javascript' src='https://lickeys.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://lickeys.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <script type="text/javascript"> jQuery(document).on('ready post-load', function(){ jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create/button"]').addClass('nolightbox'); } ); jQuery(document).on('ready post-load',easy_fancybox_handler); jQuery(document).on('ready',easy_fancybox_auto);</script> </body> </html>