Прочитать код страницы в контакте. Как быстро открыть код страницы в браузере, даже если копирование запрещено. Базовые знания о коде

HTML код это по сути и есть сама ваша страничка, он указывает то, как именно ваш сайт будет строиться и отображаться на дисплее пользователя. Как правило, этот код открытый, то есть любой пользователь может беспрепятственно его увидеть и прочитать. Если же вы по тем или иным причинам не желаете того, чтобы кто-угодно имел доступ к вашему коду , вы можете . Это подразумевает собой создание особого алгоритма, который кодирует ваш код , то есть прячет его первичный вид, делая недоступным для пользователей сайта.

Когда и кому это может понадобится?

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

Что же делать чтобы обезопасить себя?

От ситуаций копирования и использования без разрешения чужого HTML кода не так уж и просто себя обезопасить. Да и вообще если человек уже увидел ваш сайт, он даже и без кода сможет его дублировать, при условии наличия определенных знаний в сфере веб-разработки. Но, что касается самого HTML кода, то его можно зашифровать. Работает это на основе специального javascript-скрипта. С помощью нашего инструмента вы . При этом создается специальный скрипт, который предназначен для расшифровки. Работает это довольно-таки просто: когда посетитель переходит на ваш сайт, загружается зашифрованный код, понять который он не сможет. В этот же момент запускается созданный javascript, который расшифровывает код и отображает сайт на экране пользователя. При этом, сам посетитель не может увидеть настоящий код. Однако, в этом методе есть и небольшой недостаток. Есть пользователи в браузерах которых запрещен запуск javascript на сайте, в таком случае скрипт не запустится, соответственно HTML код не расшифруется и сайт не будет отображен. Но, расстраиваться не стоит, такая настройка браузеров встречается очень редко, можно сказать что на 99% браузерах разрешен запуск javascript.

Как это сделать?

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

Просматривая бесчисленное множество сайтов в интернете, можно встретить такие, которые очень нам нравятся. Сразу же возникает ряд вопросов. Сайт сделан с помощью самописного кода или какой-нибудь CMS? Какие у него CSS стили? Какие у него мета-теги? И так далее.

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

Как просмотреть код страницы?

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

• назад;
• вперёд;
• перезагрузить;
• сохранить как;
• печать;
• перевести на русский;
• просмотр кода страницы ;
• просмотреть код.

Нам нужно кликнуть на просмотр кода страницы , и перед нами откроется html код страницы сайта.

Просмотр кода страницы: на что обратить внимание?

Итак, Html код страницы представляет собой пронумерованный список строк, каждая из которых несёт информацию о том, как сделан данный сайт. Чтобы быстрей научиться разбираться в этом огромном количестве знаков и специальных символов, нужно различать разные участки кода.

Например, строки кода, находящиеся в внутри тега head содержат информацию для поисковых машин и веб-мастеров. Они не выводятся на сайт. Здесь можно увидеть, по каким ключевым словам продвигается эта страница, как написаны её title и description. Также здесь можно встретить ссылку, перейдя по которой узнаем о семействе google шрифтов, используемых на сайте.

Если сайт сделан на CMS WordPress или Joomla, то это также будет видно здесь. Например, в этой области выводится информация о теме WordPress или шаблоне Joomla сайта. Увидеть её можно, прочитав содержание ссылок, выделенных синим цветом. В одной ссылке виден шаблон сайта.

Например:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

Мы увидим CSS стили шрифтов страницы. В данном случае используется шрифт. Это видно здесь – font-family: ‘Source Sans Pro’.

Данный сайт оптимизируется с помощью сео-плагина Yoast SEO. Это видно из этого закомментированного участка кода:

This site is optimized with the Yoast SEO plugin v3.4.2 — https://yoast.com/wordpress/plugins/seo/

Вся информация, находящаяся внутри тега body, выводится браузером на экране монитора. Здесь мы видим html код страницы, а в самом низу находится код скрипта Яндекс метрики. Он облечён закомментированным тегом с текстом:

/Yandex.Metrika counter

Подводим итоги

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

• CMS WordPress;
• Google шрифт Source Sans Pro;
• тема WordPress – Sydney;
• плагины Yoast;
• счётчик Яндекс метрики.

Теперь принцип анализа html кода страницы сайта вполне понятен. Совсем необязательно держать исследуемую страницу открытой в браузере. Сохранить код страницы себе на компьютер можно с помощью комбинаций клавиш ctrl+a, ctrl+c, ctrl+v. Вставьте её в любой текстовый редактор (лучше Notepad++) и сохраните с расширением html. Таким образом, вы в любое время сможете изучить её глубже и найти больше полезной для себя информации.

Эта статья - дополнение к статье про деобфускацию скриптов. Здесь будут рассмотрены основные принципы шифровки и упаковки, слабые места защит, способы ручного снятия, а также универсальные инструменты для автоматического снятия упаковщиков и навесной защиты со скриптов 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" ;
10. < textarea id = "decoded" style = "width:900px; height:500px;" >
11. < 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-страниц. Вы все еще продолжаете защищать свои поганые "аффтарские права"? Тогда мы идем к вам!

Введите текст для шифрования:

Для чего предназначен инструмент "Шифровальщик html"?

Инструмент "Шифровальщик html " будет полезен веб-мастерам, которые хотят защитить свои программные продукты от поисковых роботов, хакеров и любителей воспользоваться результатами чужого труда. Речь идет о защите HTML-кода, который на большинстве ресурсов находится в свободном доступе, и его легко может воспроизвести любой желающий. С помощью инструмента "Шифровальщик (Encoder) для HTML" вы без лишних усилий сможете обфусцировать (зашифровать, запутать) исходный HTML –код.

На самом деле, энкодером можно защитить все, что отображается на страницах сайтов: тексты, изображения и прочие элементы веб-страницы, созданные с помощью языка программирования HTML (HyperText Markup Language). Или CSS-коды (Cascading Style Sheets) – особые таблицы, в которых код прописывается один раз и сохраняется в отдельном файле.

Как это работает?

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

В первую очередь, в защите нуждаются HTML-код страницы и код CSS, то есть те программные продукты, которые может увидеть на своем компьютере конечный пользователь. Конечно, 100%-ной защиты кода от сервисов-шифровальщиков ожидать не следует, но и облегчать жизнь любителям легкой наживы тоже не стоит. Поэтому введите текст для шифрования в поле, которое вы видите ниже, и нажмите кнопку "Закодировать". В результате вы получите новый текст, зашифрованный через JavaScript, который не смогут прочитать посетители вашего ресурса и поисковые роботы.

Стоит ли перестраховываться и шифровать все подряд?

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

Стоит отметить, что такой метод шифрования имеет свои минусы. Например, если в браузере пользователя запуск javascript запрещен, то сайт не отобразится. К счастью, такое встречается довольно редко.

1 голос

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

Оказывается, найти ответ довольно просто. А если вы обладаете кое-какими навыками, то можете насобирать множество таких фишек и за короткое время создать свой уникальный сайт.

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

Базовые знания о коде

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

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

Качественные сайты создаются именно так. Хотите – влезайте в это дело и изучайте, нет желания – никто не в силах вас заставить.

Скажу только одно… нет ничего более приятного, чем видеть, как непонятные слова, написанные тобой, преобразуются в единое целое и оживают: ссылки работают, кнопки шевелятся, картинки двигаются, текст ползет. Думаю, что я знаю, как чувствовал себя Виктор Франкенштейн.

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

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

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

Существует всего около 150 тегов и каждый из них отвечает за определенное действие: ссылка, перенос, выделение жирным, цвет, заголовок и так далее. Разобраться в них не так уж сложно, если есть желание и не жалко времени.

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

Опытные создатели сразу видят как добиться результата, а другим приходится думать, искать ответа в статьях или в исходном коде конкурентов. Они просто берут необходимую часть на стороннем сайте и редактируют под себя. Это существенно сокращает процесс работы.

Чуть позже, я покажу вам конкретный пример.

Просмотр кода

Итак, давайте я для начала покажу как действовать, если вам нужно узнать чужой html. Потом мы подробнее рассмотрим все остальные вопросы.

Самый лучший способ

Метод, который я опишу первым, немного сложен для новичков, но в качестве ознакомления – пойдет, читайте. Открываете страничку и нажимаете на правую клавишу мыши. Выбираете пункт «Сохранить как…»

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

Здесь есть все, что необходимо. Каждый элемент. Если разбираетесь в этом, то сможете быстро получить все необходимое. Но, такая задача все чаще становится невыполнимой. Закачка не осуществляется. Что делать если запрещено копировать страницу?

Это же Гугль хром

Как вы уже наверное могли заметить, я чаще всего использую Google Chrome и узнать чужой код в этом браузере проще простого. Как в принципе и в любом другом. Схема будет не то что похожая, а идентичная. Открываем страничку, код которой хотим узнать, и щелкаем в любом месте правой клавишей мыши. В появившемся окне кликаем «Посмотреть код страницы».

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

Если вам нужно узнать код только одного элемента, достаточно навести на него мышью и щелкнуть правой клавишей. Выбираем другую функцию хрома: «Просмотр кода элемента».

Мне, например, может быть интересно каким образом сделан логотип, при использовании картинки или языка программирования? Ведь нарисовать квадрат можно при помощи css. Многие специалисты советуют как можно больше информации прописывать кодом. А как работают на популярных сайтах?

Вот и появилась необходимая информация. Сверху html, внизу css. Это два языка. Первый отвечает за текстовую составляющую, а второй за дизайн. Если бы не было css, то вам пришлось бы каждый раз прописывать цвет, размер шрифта. Для каждой странички, это очень долго. Но если бы не было html, то у нас не было бы текстов. Грубо объяснил, но в целом, все так и есть.

Кстати, если вас заинтересовало как здесь устроен , то можете посмотреть снизу ссылку на картинку. Вот вам и ответ.

Mozilla Firefox

Если вы любите работать в мазиле, то все будет точно также. Открываете страничку и нажимаете на правую кнопку мыши. «Исходный код страницы» если хотите увидеть весь код целиком.

При наведении на какой-либо элемент появляется возможность открыть его код.

Здесь данные отображаются в нижней части экрана, а в остальном все точно также.

Яндекс браузер

В Яндекс браузере все точно также, как и в предыдущих двух вариантах, открываем страницу, правая клавиша мыши, посмотреть код страницы.

Наводим курсор на элемент, если хотим узнать именно его код.

Отображается все тут точно также, как и в хроме.

Опера

Ну и напоследок Opera.

Кстати, возможно вы заметили, что не обязательно пользоваться мышью. Для открытия кода есть быстрое сочетание клавиш и для всех браузеров оно одинаковое: CTRL+U .

Для элементов: Ctrl+Shift+C.

Вот так выглядит результат.

Это будет интересно новичкам

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

Теперь копируете его.

Я пользуюсь , вставляю этот код в новый html файл, в тег body (тело по-английски).

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

Готово. Чтобы текст был выровнен по краям и приобрел зеленоватый цвет нужно подключить к этому документу css и скопировать еще один код с того сайта, с которого мы тырили этот.

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

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

Здесь 33 урока, которые позволят освоить html — «Бесплатный курс по HTML» .

А тут полная информация о css — «Бесплатный курс по CSS (45 видеоуроков!)» .

Теперь вы знаете чуть больше. Желаю вам успехов в ваших начинаниях. До новых встреч!