не работает просмотр кода элемента
Не могу включить просмотр кода элемента
Это смотря в каком браузере, есть такие, в которых просмотр кода элемента просто отсутствует.
Но не все так страшно, пробуй исправить вот так:
Удали файлы chrome-devtools_devtools_0.localstorage и chrome-devtools_devtools_0.localstorage-journal, которые находятся в C:\Users\Имя Пользователя\AppData\Local\Google\Chrome\User Data\Default\Local Storage. После этого выйди из браузера с помощью Ctrl+Shift+Q и запустите браузер.
Рекомендую перед этим проверить на вирусы и рекламное ПО ( тут антивирусы не всегда помогают).
Нужно удалить файл «Preferences» который находится в директории по умолчанию: C:\Users\»Свой пользователь»\AppData\Local\Yandex\YandexBrowser\User Data\Default
Под «Своим пользователем» я подразумеваю название вашей учётной записи Windows. (ЭТО БЫСТРЫЙ СПОСОБ)
БОЛЕЕ ЛЁГКИЙ СПОСОБ (для тупых и любящих читать людей):
нажимаем правой кнопкой мыши по ярлыку вашего браузера, нажимаем «расположение файла», если нет, то расположение файла запуска можно найти в «свойствах», после вверху (там где указан путь к файлу) необходимо выйти из этой папки (из папки «Application») и попасть в папку «YandexBrowser», после попасть в папку «User Data», затем в папку «Default», после чего найти файл «Preferences» и удалить его, по возможности, если конечно хотите, то можете создать резервную копию этого файла, непосредственно, перед его удалением.
Внимание!
Папка «AppData» может не отобразиться на вашем компьютере из-за того, что у вас в «Параметры папок» (в панели управления) в окне «Вид» не стоит галочка на «Показывать скрытые файлы, папки и диски»
Внимание!
Профиль учётной записи останется без изменения. Все пароли, закладки, история. будут сохранены.
HackWare.ru
Этичный хакинг и тестирование на проникновение, информационная безопасность
Обход запрета показа исходного HTML кода, обход социальных блокировщиков и других мер противодействия сбору информации о сайте
Можно ли надёжно защитить HTML код веб-страницы
Исходный код веб-страницы невозможно защитить от просмотра. Это факт. Но можно в некоторой степени усложнить задачу анализа кода. К совершенно пустым, неэффективным способам можно отнести блокировку правой кнопки мыши. К более эффективным средствам можно отнести обфускацию кода. Особенно если код не присутствует в исходном тексте страницы, а подгружается из разных файлов с помощью JavaScript и если на разных этапах (сам JavaScript и HTML) также обфусцированны. В этом случае всё становится намного труднее. Но такие случае довольно редки — чаще встречаются на веб-сайтах очень крупных компаний. Мы же рассмотрим более простые варианты.
Как просмотреть исходный HTML код веб страницы, если заблокирована правая кнопка мыши и сочетание клавиш CTRL+u
Если правая кнопка мыши не работает, то просто нажмите CTRL+u. Мне попался сайт, в котором CTRL+u также отказалась работать:
CTRL+u можно отключить с помощью JavaScript и именно эта техника используется на том сайте. То есть первый вариант очевиден — с выключенным JavaScript исходный код не будет «заблокирован».
Другой вариант — это в меню браузера найти опцию «Показать исходный код». В Firefox эта опция есть, но лично у меня всегда уходит много времени, чтобы её найти ))) В Chrome я эту опцию вообще не могу найти в меню браузера, поэтому запомните строку
Если эту строку добавить перед любым адресом сайта и всё это вставить во вкладку веб-браузера, то будет открыт исходный код данной страницы.
Например, я хочу посмотреть HTML страницы https://suip.biz/ru/?act=view-source, тогда я вставляю строку view-source:https://suip.biz/ru/?act=view-source во вкладку веб-браузера и получаю в ней исходный код.
Кстати по поводу отключения JavaScript — необязательно лазить в «глубинные» настройки браузера и искать где эта опция. Можно даже не отключать JavaScript, а приостановить выполнение скриптов для конкретной страницы.
Для этого нажмите F12, затем в инструментах разработчика перейдите во вкладку Sources и нажмите там F8:
Теперь на странице сайта будет работать сочетание клавиш CTRL+u, как будто бы его никогда не отключали.
Обход социальных блокировщиков
Социальный блокировщик выглядит примерно так:
Суть в следующем, чтобы просмотреть содержимое, нужно «лайкнуть» эту статью в социальной сети.
«Под капотом» там всё (обычно) так: «скрываемый» текст уже присутствует в HTML странице, но спрятан с помощью свойства стиля style=»display: none;». Поэтому достаточно:
Пример «взлома» социального блокировщика:
Но каждый раз лазить в исходный код не очень удобно и я… сделал онлайн сервис, который сам извлекает для вас данные, скрываемые социальными блокировщиками, его адрес: https://suip.biz/ru/?act=social-locker-cracker
Там я реализовал обход четырёх социальных блокировщиков и добавил «эвристический» анализ — он включается если никакой из этих 4 х блокировщиков не подошёл, то тогда просто выводится содержимое всех блоков с style=»display: none;».
Кстати, если вам попались страницы, которые этот сервис не может обойти — просто напишите в комментариях ссылку на проблемную страницу — я добавлю соответствующий «обработчик».
Тот сайт, который я показываю на скриншотах, как будто бы распространяет пиратское ПО. Я посмотрел ссылки с помощью обходчика социальных блокировщиков — оказалось, что все скрытые ссылки абсолютно беспонтовые: ведут на демо версии программ или вообще на официальный сайт. В некоторых статьях ссылок вообще нет. Такой «маркетинг» меня заинтересовал и я решил поискать другие сайты этого же автора.
Поиск сетки фальшивых пиратских сайтов
Этот сайт за CloudFlare — Ha ha, classic!
Итак, вероятно, что IP этого сайта 173.249.15.230. На securitytrails на настоящее время по этому IP информации о связанных с ним сайтов нет.
Поэтому идём на сервис «Список сайтов на одной IP», в качестве исходных данных вводим 173.249.15.230 и получаем там:
Все сайты схожей тематики, везде есть социальный блокировщик, везде вместо вареза ссылки на демо версии, ссылки на официальные сайты, либо просто ничего нет под закрытым контентом.
Верификация IP сайта с помощью cURL
Для верификации IP обычно я использую следующую команду:
Или так, если нужно проверить сайт на HTTPS протоколе:
Но сервер 173.249.15.230 настроен так, что абсолютно любой хост, хоть даже если туда написать «dfkgjdfgdfgfd» он перенаправляет на адрес с HTTPS, то есть на «https://dfkgjdfgdfgfd». А запросы по HTTPS сам сервер не принимает вовсе — там веб-сервер не настроен на их обработку и 443 порт даже не октрыт.
В принципе, доказать, что данный сервер настроен на обработку хоста macwinsofts.com можно косвенно, например, данный запрос практически мгновенно вызовет ошибку 503:
А вот данный запрос хотя в конечном счёте также вызовет ошибку 503, но заставит сервер надолго «задуматься»:
Видимо, там из-за особенностей настройки происходят бесконечный редиректы и в конце концов соединение сбрасывается по таймауту.
Это способ позволяет в том числе брутфорсить файлы и папки:
И совсем интересный результат вызывает вот такой запрос:
Заключение
Возможно владелец ожидает роста посещаемости для включения настоящей монетизации или распространения вирусов.
Связанные статьи:
Рекомендуется Вам:
2 комментария to Обход запрета показа исходного HTML кода, обход социальных блокировщиков и других мер противодействия сбору информации о сайте
Открыть исходный необходимо для того, что бы скопировать текст, а что делать, кодда код отрываешь, а там текста нет, одни ссылки?
Приветствую! Для копирования текста вы выбрали неверный подход. Вам подойдёт Absolute Enable Right Click & Copy который сделает доступным для копирования любой текст.
Как научиться читать код сайта и зачем это нужно, если вы не программист
Часто возникают ситуации, когда необходимо проанализировать содержимое веб-страницы: посмотреть description, узнать размер какого-то элемента или просто выяснить, какой используется шрифт. С помощью опции «Просмотреть код» можно узнать не только это, но и многое другое – практически всю подноготную сайта.
Для каких целей нужен навык чтения кода и как в несколько кликов посмотреть содержимое сайта? Об этом и многом другом поговорим в сегодняшней статье.
Зачем мне нужен исходный код сайта?
Думаете, если вы не программист или верстальщик, то код вам вряд ли понадобится? На самом деле, он может помочь в разных ситуациях. Код может быть полезен:
Еще несколько возможностей при просмотре кода страницы: выгрузка картинок с исходным размером, просмотр сайта в адаптивном режиме, возможность изменять содержимое веб-страницы. Последнее работает в локальном режиме – изменения будут применены только на текущем ПК до тех пор, пока страница не будет обновлена.
Как узнать код сайта
Прежде чем переходить к просмотру кода сайта, давайте сначала разберемся, что же включает в себя код любого веб-ресурса. Как правило, это список пронумерованных строк с информацией о том или ином элементе сайта. Если открыть код главной страницы Timeweb, то мы увидим, что в четвертой строке установлен заголовок документа:
Как видите, здесь все логично и понятно.
Подробнее о том, что представляет собой код сайта, мы поговорим в следующем разделе, а пока давайте рассмотрим основные способы его просмотра.
Способ 1: Функция «Посмотреть код»
Открываем страницу, код которой нужно просмотреть, и кликаем по любой области правой кнопкой мыши. В отобразившемся меню выбираем «Посмотреть код». Также вы можете воспользоваться комбинацией клавиш «CTRL+SHIFT+I».
В результате мы попадаем в инспектор браузера – на экране появляется дополнительное окно, где сверху находится код страницы, а снизу – CSS-стили.
Обратите внимание на то, что запуск инструмента разработчика выполнялся в Google Chrome. В другом браузере название кнопки запуска может отличаться.
Способ 2: «Просмотр кода страницы»
Если в предыдущем случае мы могли открыть всю подноготную сайта, то сейчас нам будет доступен лишь HTML-код. Чтобы его посмотреть, находим на сайте пустое поле и кликаем по нему правой кнопкой мыши, затем выбираем «Просмотр кода страницы» (можно воспользоваться комбинацией клавиш «CTRL+U»). Если вы кликните правой кнопкой по элементу сайта, то кнопка «Просмотр кода страницы» будет отсутствовать.
После этого нас перенаправит на новую страницу со всем исходным кодом:
Здесь мы также можем посмотреть все содержимое страницы, однако узнать CSS и изменить данные у нас не получится.
Что такое HTML и CSS
Например, часто используется такая конструкция:
Это мой первый сайт!
Подобных тегов более сотни, для их изучения рекомендую обратиться к справочнику.
CSS – это помощник HTML, который позволяет преображать страницу как угодно: можно настраивать цвета элементов, изменять их положение, размер и форму, добавлять адаптивность и многое другое. Подключение CSS выполняется непосредственно в HTML-файле с помощью специального тега.
Рассмотрим на небольшом примере, как работают стили:
Каждый сайт, который вы встречаете, использует связку HTML и CSS. Стоит упомянуть, что еще есть язык программирования JavaScript, который позволяет оживлять страницу. Например, он может активировать формы обратной связи, создать сложную анимацию, установить всплывающие окна и многое другое. Обычным пользователям разбираться в нем не нужно от слова совсем. Если вы собираетесь вести аналитику сайта или просто интересуетесь его содержимым, то в знаниях JavaScript нет никакой необходимости.
Как я могу использовать код
Выше мы рассмотрели лишь основные моменты, связанные с кодом сайта – научились просматривать его и узнали, что такое HTML и CSS. Теперь давайте применим полученные знания на практике – посмотрим, как всем этим пользоваться.
Вариант 1: Редактирование контента
Как мы уже говорили ранее, можно поменять контент страницы внутри своего браузера. Изменения будем видеть лишь мы, но это дает нам возможность посмотреть альтернативный вариант размещения элементов.
Например, доступна возможность изменять содержимое текста – для этого достаточно выбрать нужный текст, кликнуть по нему правой кнопкой мыши и перейти в «Посмотреть код». После этого перед нами отобразится инспектор с выделенным текстом.
В среде разработчика мы можем заменить текст, расположенный в данном теге. Чтобы это сделать, находим его в коде, кликаем по нему двойным щелчком мыши и заменяем на другой. Ниже пример: мы поменяли «Виртуальный хостинг» на «Классное решение».
Чтобы отменить внесенные изменения, достаточно воспользоваться клавишей «F5» – страница будет обновлена, а весь контент станет исходным.
Аналогичным образом мы можем поменять CSS-стили через нижнее окно, но для этого потребуются некоторые знания. Подробную информацию рекомендую посмотреть в CSS-справочнике.
Вариант 2: Скачивание картинок
Сейчас мы можем напрямую загружать картинки с сайта, но по некоторым причинам это получается далеко не всегда. В таких случаях остается только один способ – выгрузить картинку через код. Сделать это довольно просто:
Аналогичным образом мы можем выгрузить и фоновое изображение, но его стоит искать через CSS-стили в атрибуте background.
Вариант 3: Просмотр SEO-элементов
С помощью кода можно посмотреть основные SEO-теги. Сделать это можно следующим образом:
Подобные элементы можно посмотреть и через инспектор кода.
Как посмотреть исходный код на телефоне
Функционал мобильных браузеров сильно ограничен – посмотреть код сайт через инспектор мы не можем. Доступен только вариант с отображением всего HTML-кода страницы. Чтобы им воспользоваться, необходимо перед ссылкой прописать «view-source:». Например, для https://timeweb.com/ru это будет выглядеть так:
Если нужны расширенные возможности для устройства на Android, то можно поискать специальные приложения, например, VT View Source.
Заключение
Как использовать консоль браузера для выявления ошибок на сайте
Каждый браузер оснащен консольной панелью, с помощью которой разработчики проводят тестирование веб-сайта. Вкладка Elements содержит всю информацию об инспектируемом HTML-файле: теги, таблицы стилей и т.д. Но в консоли есть и другие разделы, такие как Console, Sources, Network и прочие.
Для каких целей они используются и как можно выявить ошибки через консоль – поговорим в сегодняшней статье.
Как открыть консоль на разных браузерах
Алгоритм запуска консоли (инспектора) во всех браузерах идентичен. Есть два пути: первый – запуск через специальную клавишу на клавиатуре, второй – через функцию «Посмотреть код страницы/элемента».
Например, если воспользоваться в Chrome клавишей F12, то откроется дополнительное окно с консолью.
Второй путь заключается в просмотре кода текущей страницы – для этого необходимо кликнуть правой кнопкой мыши по любому элементу сайта и в отобразившемся меню выбрать опцию «Посмотреть код». Обратите внимание, что это название опции в Google Chrome, в других браузерах оно может отличаться. Например, в Яндексе функция называется «Исследовать элемент».
В результате перед нами снова отобразится окно, в котором будет открыта главная вкладка с кодом страницы. Подробнее о ней мы еще поговорим, а пока давайте посмотрим, как выполняется запуск консоли в браузере Safari на устройствах Mac.
Первым делом нам потребуется включить меню разработчика – для этого переходим в раздел «Настройки» и открываем подраздел «Продвинутые». Находим пункт «Показать меню «Разработка в строке меню» и отмечаем его галочкой.
Теперь можно запустить консольное окно – достаточно воспользоваться комбинацией клавиш «Cmd+Opt+C».
Как видите, запустить консоль в браузере – дело нескольких секунд. Опция полезна, когда вы верстаете новый сайт, исправляете ошибки, проводите различные тесты.
Какие вкладки есть в консоли и за что они отвечают
Консоль каждого браузера содержит практически идентичные вкладки с одним и тем же функционалом, поэтому рассмотрим каждый из блоков на примере веб-обозревателя Google Chrome.
Перед тем как перейти к разбору каждой вкладки, давайте рассмотрим основное элементы, которые могут быть полезны при работе с консолью. Первый – это включение адаптивного режима. Для этого необходимо открыть консоль и в верхнем левом углу нажать на кнопку в виде телефона/планшета.
В результате левая часть окна будет немного изменена: добавятся кнопки для выбора разрешения под нужный девайс. Например, выберем устройство iPhone X, и сайт сразу же будет выглядеть так, как он выглядел бы на телефоне.
Если выбрать опцию «Responsive», то слева от страницы отобразится дополнительная линия, которую мы можем тянуть влево или вправо – с помощью нее можно подобрать необходимое разрешение страницы. Также настроить разрешение мы можем и в верхней части окна.
И еще одна опция, которая может быть полезна – изменение расположения консольной панели. Чтобы ей воспользоваться, необходимо в верхней правой части нажать на кнопку в виде троеточия и в строке «Dock side» изменить ориентацию. Доступные положения: справа, слева, снизу, в отдельном окне.
На этом стандартный набор функций консольной панели заканчивается. Давайте посмотрим, какие в ней есть вкладки и за что они отвечают.
Elements
Основной компонент для верстальщиков. Он включает в себя всю информацию об открытой HTML-странице. Здесь мы можем не только посмотреть текущие теги и атрибуты, но и изменить их – в таком случае произойдет автоматическое изменение дизайна на странице. Если ее обновить, все вернется на свои места. Также открыт доступ к просмотру CSS и прочих элементов – для этого в правой части раздела идут вкладки Styles, Computed, Layout, Event Listeners, DOM Breakpoints, Properties и Accessibility.
Console
Еще одна важнейшая вкладка для верстальщиков – это Console. В ней мы можем узнать информацию о текущих ошибках на сайте, посмотреть исполняемый JavaScript-код, если он выведен в консоль с помощью метода console.log, и многое другое.
Если вам нужно очистить информацию, выведенную в консоль, то сделать это легко. Достаточно в верхнем левом углу нажать на кнопку в виде знака запрета.
Также в данной консоли мы можем посмотреть информацию об ошибках плагина, воспользоваться поиском по слову или фразе, а также установить различные фильтры на отображаемую информацию.
Sources
Данный раздел открывает доступ ко всей иерархии сайта: здесь мы можем посмотреть, какие используются картинки, CSS-файлы, шрифты и прочее.
Сама вкладка, как видите, разделена на 3 части. В первой содержится дерево иерархии файлов, относящихся к сайту. Вторая предназначена для просмотра содержимого этих файлов и выполнения их отладки. Для ее запуска необходимо воспользоваться последним окном.
Network
Из названия уже понятно, что данный раздел предназначен для отслеживания сетевого трафика. Его основная функция – запись сетевого журнала. Можно выявить время загрузки и обработки различных файлов, чтобы впоследствии оптимизировать страницу.
Performance
Панель отображает таймлайн использования сети, выполнения JavaScript-кода и загрузки памяти. После первоначального построения графиков будут доступны подробные данные о выполнении кода и всем жизненном цикле страницы.
Memory
В этой вкладке можно отслеживать использование памяти веб-приложением или страницей. Мы можем узнать, где тратится много ресурсов – эту информацию в последующем можно использовать для оптимизации кода.
Application
Данный раздел позволяет инспектировать и очищать все загруженные ресурсы. Мы можем взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и другими элементами.
Основная особенность опции – чистка куки. Если вам необходимо выполнить эту процедуру, то просто откройте в левой части раздел «Cookies» и нажмите справа на значок запрета. Куки для выбранной ссылки будут очищены.
Security
Раздел Security отображает информацию о безопасном протоколе. Если его нет, то будет сообщено, что данная страница является небезопасной. Кроме того, можно получить еще некоторые сведения о:
Lighthouse
Последний раздел представляет собой инструмент аудита с открытым исходным кодом. Благодаря ему разработчики могут повысить производительность и доступность своих веб-сайтов.
Выявление основных ошибок
При возникновении возможных ошибок мы сразу будем об этом уведомлены во вкладке Console – в ней отобразится информация с красной строкой текста. Рассмотрим самые распространенные ошибки, которые могут возникать в Google Chrome, Safari и Internet Explorer:
Устранение основных и прочих ошибок может быть проблематично. Если вы считаете, что они сильно мешают производительности вашего сайта, то рекомендуем поискать информацию о них в официальной документации браузера либо на тематических форумах.
Заключение
Иногда консоль пригождается не только верстальщикам – она бывает полезна для самых простых действий. Например, чтобы посмотреть мобильную версию, скачать картинку либо узнать используемый шрифт на сайте. В общем, применять консольное окно можно в различных ситуациях – как для просмотра содержимого сайта, так и для анализа потребления памяти.
Изучайте и находите свои применения этому инструменту – он может многое. Удачи!