Как заблокировать код элемента в браузере
Часто, когда мы сдаем проект клиенту, мы теряем контроль над HTML-кодом. Иногда клиент использует CMS (Системы Управления Контентом), которые дают ему полный контроль над теми или иными частями HTML-кода. Иногда клиент просто использует наши темплейты для вывода своего кода в документ.
В большинстве случаев довольно тяжело проинформировать клиента о том, как использовать темплейты или CMS, которые вы ему предоставляете, а иногда просто неприемлемо толкать пламенные речи о семантической верстке и веб-стандартах. Клиент может/будет использовать «старую, добрую разметку», ту, которую он знает, просто потому что она работает и выглядит так как он привык. Скорее всего в ней будут присутствовать нежелательные (deprecated) тэги и атрибуты, такие как bgcolor, align и «вечный» font. Эта статья о том, как блокировать нежелательные HTML-тэги с помощью CSS, тем самым аккуратно направляя клиента в правильном направлении.
Есть несколько решений проблемы. Одно из них — вывод предупреждающего изображения с помощью CSS, когда изпользуются нежелательные тэги. Подробные обьяснения этого способа есть здесь и здесь. Второе решение — «вырезание» нежелательных тегов и атрибутов на стороне сервера. Этот способ является наиболее эффективным, другое дело что не всегда есть контроль за сервером где расположен сайт.
Идея состоит в том, чтобы сохранить естественный каскад и наследие стилей во всех браузерах, элегантно «отключая» HTML, нежелательный к использованию клиентом. И тогда клиент перестанет использовать его, потому что нежелательные тэги просто перестанут «работать». Элегантный и ненапрягающий клиента способ, который направит его по верному пути.
Нежелательные HTML-тэги и атрибуты:
Решение
В идеале мы могли бы просто откорректировать некоторые HTML-тэги, вставив значение inherit для эквивалентного CSS-свойства. Браузеры, работающие по стандартам, просто проигнорируют заданные в коде нежелательные атрибуты и будут использовать вместо них наследуемые значения в каскаде.
На пример этот CSS:
будет превалировать над этим кодом:
Соответственно цвет текста внутри тэга font будет цветом, наследуемым по каскаду, а не синим, как задано в коде. То что надо. Но как вы наверняка знаете — у Internet Explorer есть проблемы с наследуемыми значениями. И в седьмой версии тоже. Так что за работу:
Expressions и currentStyle в помощь:
Работает? Отлично, поехали дальше:
Все чудесно, кроме того что Opera 9 не наследует значение для font-family. К счастью font нас тоже устроит:
С этим разобрались. Перейдем к свойству font-size. Здесь нужна деликатность, так как значение размера шрифта наследуется по отношению к вычисляемому (computed) значению. Предыдушие expression'ы здесь не сработают, так как если для body выставлено значение свойства font-size, равное 2em, то вычисление значения размера шрифта начнется от этой точки. Браузер проверит значение font-size для родительского элемента тэга font, которое равняется 2em и представит вычисляемое значение, равное 4em (2em от 2em). А это не то что нам нужно. Решение простое. Нужно использовать начальное значение font-size, равное 100% для всех браузеров. Давайте добавим несколько свойств нежелательному тэгу basefont, чтобы и его утихомирить. Вот полный список правил для «укрощения» тэгов font и basefont:
Двигаемся дальше. Давайте воспользуемся базовой техникой, чтобы отменить тэги center, s, strike и u:
Свершилось! Мы «отключили» большинство нежелательных тэгов, используя только CSS и expression'ы.
А как же атрибуты? HTML4 включает в себя некоторое количество нежелательных атрибутов, которые могут изрядно попортить нервы. Давайте их тоже «повыключаем». Начнем с align:
Все бы хорошо, но IE6 не поддерживает селекторы атрибутов. Посему, нам надо модифицировать expression, для того чтобы он проверял наличие атрибута align у тэга. Вот что получилось:
Далее на очереди атрибуты тэга img. Помимо атрибута align, мы хотим отключить атрибуты border, vspace и hspace. Так как значения margin и border не наследуются, то здесь применимо простое правило:
Вот здесь мы как раз сталкиваемся с неразрешимой проблемой для IE6. vspace и hspace не равнозначны свойству margin в нем, поэтому IE6 будет продолжать отображать их. Единственное решение, которое пришло мне в голову это написать маленький скриптик, который будет просто удалять эти атрибуты при загрузке документа:
Я бы предпочел не использовать javascript, но в данном случае я просто не вижу другой альтернативы. Так что пусть будет. Теперь добьем атрибут type в тэге ol:
А теперь атрибут bgcolor для body:
Таблицы. Финальный шаг. В таблицах, в HTML4/4.01, есть ряд нежелательных атрибутов, которые активно использовались для верстки страниц. Но мы же не хотим, чтобы клиент использовал таблицы для верстки? Поэтому давайте отключим атрибуты width, height, bgcolor, valign и border:
Подведем итоги:
Используя CSS-правила и минимальный javascript, нам удалось «отключить» большинство нежелательных тэгов и атрибутов, элегантно сохраняя естественное наследование. Нам не нужно «учить» клиента, он в любом случае должен будет использовать правильную разметку. С учетом одной, очень важной ремарки — очень важно предоставить клиенту достаточное количество описаных CSS-классов, чтобы он не был ограничен в работе с разметкой.
Все стили вместе:
Расширения и дополнения для браузера, по своему назначению являются одним и тем же. "По-буржуйскому" это соответствует термину плагины. Разница в терминологии относится лишь к браузерам. В Firefox они называются дополнениями, в Chrome и Opera – расширениями.
Итак, после установки этого замечательного ПО, снова иду на сайт и вызываю блокировку элемента. Вызов этой команды осуществляется по правому контекстному меню мыши.
После этого Вам придётся указать мышкой область, которую необходимо заблокировать. Необходимо подвести к этой области курсор и нажать левую кнопку мыши.
Данная операция потребует от Вас некоторой сноровки и соображения, но в результате в нижней правой части страницы Вы получите запрос на создание фильтра. В рассматриваемом примере:
После нажатия Вами кнопки "Создать" фильтр сразу же начнёт работать. Проверить это можно простым обновлением просматриваемой страницы.
Блокировку этого элемента пришлось осуществить с помощью создания двух правил: строки адреса 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 — вроде бы, файл не вредоносный. Те сайты, у которых нет исполнимых файлов для скачивания, видимо, дожидаются роста посещаемости, чтобы затем начать распространять этот исполнимый файл.
Возможно владелец ожидает роста посещаемости для включения настоящей монетизации или распространения вирусов.
Связанные статьи:
факультете информационной безопасности от GeekBrains? Комплексная годовая программа практического обучения с охватом всех основных тем, а также с дополнительными курсами в подарок. По итогам обучения выдаётся свидетельство установленного образца и сертификат. По этой ссылке специальная скидка на любые факультеты и курсы!
Хочу поставить "легкую" защиту кода на сайт.
Запрет правой кнопки сделал уже для защиты кода.
Как запретить на сайте нажатие CTRL+SHIFT+I и F12?
UPD: Нашел под по запрету F12.
Осталось найти сочетание клавиш)
Оценить 1 комментарий
Вот запрет на
CTRL+SHIFT+I
F12
CTRL+SHIFT+J
CTRL+U
Задайтесь вопросом. Кому нужен код? Простому пользователю он ни к чему, он даже не знает, что это такое. А тот кому он нужен, тот в любом случае найдет как его взять.
Вместо того чтоб страдать подобной <тут должно быть нецензурное слово>лучше сначала напишите что-то реально полезное, а так только сами себе грабли стелите
Тот же авито сажает вирус в расширения хрома при открытии инструментов разработчика, наверно как и Вы боятся спалить свой говнокод (а у них там действительно беда)
А еще подумайте вот о чем: что если инструменты разработчика уже открыты к моменту загрузки Вашей страницы? А что если я сижу на маке, где эти сочетания другие (CMD+I)? А что Вы будете делать с расширением которое позволяет блокировать обработку события контекстного меню скриптами в любое время? (У меня такое стоит)
Ну и напоследок: когда в Вашем коде появится реально что-то полезное, у Вас будут мысли не "каким еще костылем защитить мой код", а "как бы это написать так, чтоб потом выложить в опенсорс не стыдно было, да еще звездочек за это на гитхабе нахватать"тут>
Как ты говоришь: "Вместо того чтоб страдать подобной <тут должно быть нецензурное слово>лучше сначала напишите что-то реально полезное.". Сначала подумай хорошенько, где можно это использовать. Представь сто ты писатель, который выложил книгу на какой нибудь ресурс для чтения. Тебе будет приятно если ее просто скопируют и разнесут по всевозможным сайтам? Вот для этого и делают запрет на комбинации клавиш. Ведь можно запретить копирование, вызов кода или сохранения страницы.тут>
HubCat, если я автор книги, и выложил ее куда то в инет - моя цель явно, чтоб ее прочитали как можно больше народу. И то что ее скопируют другие сайты, будет только плюсом
Читайте также: