Как заблокировать код элемента в браузере

Обновлено: 04.07.2024

От автора: недавно на работе была поднята тема того, как делается блокировка ссылок. В прошлом году каким-то образом к стилям наших шрифтов был добавлен якорь disabled, пока я этого не видел. Есть проблема: в HTML нет реального способа заблокировать тег a (с валидным атрибутом href). А зачем вообще это делать? Ссылки лежат в основе веба.

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

Просто не делайте этого

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Надежный способ: удалите href

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

Из спецификации Hyperlink: «Атрибут href в тегах a и area необязателен; когда атрибут отсутствует, эти элементы не создают гиперссылки.»

У MDN определение попроще: «Для создания плейсхолдер ссылки этот атрибут можно пропустить (в HTML5). Плейсхолдер ссылка похожа на обычную ссылку, но она никуда не ведет.»

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

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

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

1. uBlock Origin

Установив и активировав расширение, просто щелкните правой кнопкой мыши в любом месте веб-страницы, а затем выберите «Блокировать элемент» в контекстном меню.

Затем вы можете перемещать курсор, и расширение автоматически выделит элементы, которые вы можете заблокировать. Сделайте свой выбор, нажмите «Создать», и выбранный элемент должен быть заблокирован навсегда.

Вы также можете управлять заблокированными элементами с помощью панели управления uBlock Origin. Щелкните правой кнопкой мыши значок расширения uBlock Origin, щелкните Параметры, а затем щелкните Мои фильтры. Затем вы можете удалить ранее заблокированные элементы из списка фильтров.

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

2. Щелкните, чтобы удалить элемент

Click to Remove Element предлагает в основном те же возможности блокировки элементов, что и uBlock Origin, но не блокирует рекламу. И работает так, как следует из названия.

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

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

3. ChuckIt

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

4. Элемент Hider

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

Расширение довольно простое в использовании. Щелкните значок расширения ElementHider, вставьте ключевые слова, и все готово. Вы также можете сделать ключевые слова чувствительными к регистру или нечувствительными к регистру.

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

5. CustomBlocker

CustomBlocker выглядит сложным, но на самом деле им довольно легко пользоваться. Хотя вы можете добавить правила самостоятельно (при условии, что вы разбираетесь в HTML и CSS), использование встроенного средства выбора элементов наиболее удобно.

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

Вы также можете дополнительно уточнить правила фильтрации с помощью ключевых слов. Например, если на странице есть несколько похожих элементов, вставьте релевантные ключевые слова, чтобы определить, что именно вы хотите заблокировать.

Скатертью дорога

Вышеуказанные расширения должны помочь вам эффективно справляться со всевозможными нелепо выглядящими веб-элементами в Интернете. uBlock Origin, Click to Remove Element и ChuckIt работает лучше всего, если вы предпочитаете визуальный подход к блокировке элементов, в то время как ElementHider и CustomBlocker позволяют по-разному использовать ключевые слова. Итак, что вам больше всего понравилось? Дайте нам знать в комментариях.

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

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

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

После нажатия Вами кнопки "Создать" фильтр сразу же начнёт работать. Проверить это можно простым обновлением просматриваемой страницы.

Блокировку этого элемента пришлось осуществить с помощью создания двух правил: строки адреса E-mail и кнопки "Готово".

Теперь мне себя уже было не нужно уговаривать: "Спокойствие, только спокойствие", так как это самое спокойствие ничего не нарушало.

В конечном счёте расширением (дополнением) ublock были созданы несколько правил, которые теперь можно даже экспортировать в файл:

Проверим, насколько верно предположение о том, что восклицательный знак относится к категории "Комментарий", а содержание самого фильтра составляет вторая строчка правила. Найдём в расширениях (дополнениях) ublock, перейдём в его "Настройки", вызовем "Показать панель управления" и посмотрим "Мои фильтры".

Удалим эти "лишние строчки" и получим фильтры:

Снова перейдём на сайт http://lifehacker.ru и насладимся "чистой" страницей:

От всей души хочется сказать автору этого расширения (дополнения) большое человеческое спасибо.

Итак, очередной сайт решил перегородить вам обзор своей никчемной нападайкой. Она должна провисеть на экране 10 секунд и только потом отключиться. Но зачем тратить 10 секунд жизни, если можно отключить нападайку самостоятельно за 8?

Как работают всплывающие нападайки и поп-апы с рекламой

Такие всплывающие окна делаются очень просто:

Хозяева сайта создают на своей странице объект, который лежит сверху всего, как целлофан на обложке журнала.
Этому объекту задают ширину во весь экран и высоту во весь экран, чтобы нельзя было дальше кликать и переходить по сайту.
Затем этому объекту устанавливают затемнённый фон. Так появляется затемнение всего экрана. Именно эта штука с затемнением и мешает нормально пользоваться страницей.
Внутрь объекта с затемнением кладут ещё один объект — рекламу, баннер, призыв подписаться, предложение оставить свой номер телефона.
И всё это висит поперёк страницы

Наша задача — отключить оба объекта, чтобы они пропали с глаз долой.

Всё дело — в CSS

Чтобы компьютер понимал, какие элементы есть на странице, используют язык HTML, который говорит: «Тут заголовок, тут ссылка, тут обычный текст, тут картинка». А чтобы было ясно, как эти элементы должны выглядеть и работать, используют специальные правила — их называют стилями. Стили задают цвет и внешний вид всего, что есть на странице, а ещё управляют размером и поведением каждого элемента.

Стили хранятся в таблицах, таблицы называют каскадными, всё вместе называется CSS — cascading style sheets.

👉 Вот больше примеров и практики по CSS:

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

Как найти код нужного элемента

Чтобы увидеть, какой именно кусок кода отвечает за всплывающее окно, будем пользоваться средствами самого браузера — Инспектором. В Хроме он вызывается нажатием клавиш Ctrl+Shift+i, а в Сафари — Cmd+Option+i.

Но есть ещё один способ, который сейчас нам подходит больше:

Открываем страницу и дожидаемся, пока появится реклама.
Затем правой кнопкой мыши щёлкаем на картинке в центре, которая мешает просмотру, и выбираем «Просмотреть код» (Inspect Element).
Инспектор сразу подсветит нужную нам строчку.

Мы нашли участок кода, который отвечает за назойливую рекламу. Теперь пусть браузер сам закроет окно. Для этого используем свойство display — оно решает, показывать этот элемент или нет.

Скрываем элемент со страницы

Чтобы окно не показывалось, нужно написать свойство display:none . Но бывает так, что CSS игнорирует такие команды, если это же свойство задаётся чуть позже в другом месте. Если нужно, чтобы команда выполнилась несмотря ни на что, после команды пишут слово !important — именно так, с восклицательным знаком в начале. Это говорит о том, что у команды приоритет над всеми остальными и её нужно исполнять:

Осталось вставить эту команду в нужное место. Оставляем синюю линию Инспектора на той же строке и переходим на вкладку Styles:

Там как раз прописаны все CSS-стили, которые отвечают за свойства и поведение этого элемента. Находим в самом верху блок element.style , щёлкаем в нём на свободном месте и вставляем нашу команду display:none !important :

Картинка исчезла, но осталось затемнение, которое всё равно мешает читать. Разберёмся и с этим: щёлкаем правой кнопкой мыши в любом месте затемнения, выбираем «Посмотреть код», вставляем в element.style нашу команду — готово.

Это работает только с нападайками?

Этим способом можно скрыть что угодно, поскольку свойство display есть у всего на странице: у новостей ВКонтакте, постов в Facebook или картинок в Instagram.

❗️ Важный момент: всё, что мы делаем таким образом, происходит только внутри нашего браузера и не влияет на отображение сайта у других людей. Если перезагрузить страницу сайта, то сайт может напасть на вас рекламой снова.

Этичный хакинг и тестирование на проникновение, информационная безопасность

Можно ли надёжно защитить HTML код веб-страницы

Исходный код веб-страницы невозможно защитить от просмотра. Это факт. Но можно в некоторой степени усложнить задачу анализа кода. К совершенно пустым, неэффективным способам можно отнести блокировку правой кнопки мыши. К более эффективным средствам можно отнести обфускацию кода. Особенно если код не присутствует в исходном тексте страницы, а подгружается из разных файлов с помощью JavaScript и если на разных этапах (сам JavaScript и HTML) также обфусцированны. В этом случае всё становится намного труднее. Но такие случае довольно редки — чаще встречаются на веб-сайтах очень крупных компаний. Мы же рассмотрим более простые варианты.

Как просмотреть исходный HTML код веб страницы, если заблокирована правая кнопка мыши и сочетание клавиш CTRL+u

Если правая кнопка мыши не работает, то просто нажмите CTRL+u. Мне попался сайт, в котором CTRL+u также отказалась работать:

CTRL+u можно отключить с помощью JavaScript и именно эта техника используется на том сайте. То есть первый вариант очевиден — с выключенным JavaScript исходный код не будет «заблокирован».

Другой вариант — это в меню браузера найти опцию «Показать исходный код». В Firefox эта опция есть, но лично у меня всегда уходит много времени, чтобы её найти ))) В Chrome я эту опцию вообще не могу найти в меню браузера, поэтому запомните строку

Если эту строку добавить перед любым адресом сайта и всё это вставить во вкладку веб-браузера, то будет открыт исходный код данной страницы.

Кстати по поводу отключения JavaScript — необязательно лазить в «глубинные» настройки браузера и искать где эта опция. Можно даже не отключать JavaScript, а приостановить выполнение скриптов для конкретной страницы.

Для этого нажмите F12, затем в инструментах разработчика перейдите во вкладку Sources и нажмите там F8:

Теперь на странице сайта будет работать сочетание клавиш CTRL+u, как будто бы его никогда не отключали.

Обход социальных блокировщиков

Социальный блокировщик выглядит примерно так:

Суть в следующем, чтобы просмотреть содержимое, нужно «лайкнуть» эту статью в социальной сети.

«Под капотом» там всё (обычно) так: «скрываемый» текст уже присутствует в HTML странице, но спрятан с помощью свойства стиля style="display: none;". Поэтому достаточно:

открыть HTML страницы, защищённой социальным блокировщиком
найти там все вхождения style="display: none;" - обычно их не очень много.

Пример «взлома» социального блокировщика:

Там я реализовал обход четырёх социальных блокировщиков и добавил «эвристический» анализ — он включается если никакой из этих 4 х блокировщиков не подошёл, то тогда просто выводится содержимое всех блоков с style="display: none;".

Кстати, если вам попались страницы, которые этот сервис не может обойти — просто напишите в комментариях ссылку на проблемную страницу — я добавлю соответствующий «обработчик».

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

Поиск сетки фальшивых пиратских сайтов

Этот сайт за CloudFlare — Ha ha, classic!

Итак, вероятно, что IP этого сайта 173.249.15.230. На securitytrails на настоящее время по этому IP информации о связанных с ним сайтов нет.

Поэтому идём на сервис «Список сайтов на одной IP», в качестве исходных данных вводим 173.249.15.230 и получаем там:

Все сайты схожей тематики, везде есть социальный блокировщик, везде вместо вареза ссылки на демо версии, ссылки на официальные сайты, либо просто ничего нет под закрытым контентом.

Верификация IP сайта с помощью cURL

Для верификации IP обычно я использую следующую команду:

А вот данный запрос хотя в конечном счёте также вызовет ошибку 503, но заставит сервер надолго «задуматься»:

Видимо, там из-за особенностей настройки происходят бесконечный редиректы и в конце концов соединение сбрасывается по таймауту.

Это способ позволяет в том числе брутфорсить файлы и папки:

И совсем интересный результат вызывает вот такой запрос:

Заключение

В чём смысл этих сайтов? На некоторых из них имеются для скачивания .exe файлы — возможно вирусы или какая-то сомнительная монетизация. Хотя я проверил по virustotal — вроде бы, файл не вредоносный. Те сайты, у которых нет исполнимых файлов для скачивания, видимо, дожидаются роста посещаемости, чтобы затем начать распространять этот исполнимый файл.

Возможно владелец ожидает роста посещаемости для включения настоящей монетизации или распространения вирусов.

Читайте также: