как отключить рекламу через код элемента

Делаем свой блокировщик любой рекламы за 3 минуты

Хакерский метод победить рекламодателей.

Что такое расширение

Расширения (их ещё называют плагинами) увеличивают стандартные возможности браузера. Они помогают быстро сохранить видео с YouTube, узнать, что за шрифт используется на странице, или делают что угодно ещё, в зависимости от их возможностей.

Нам понадобится расширение, которое умеет работать с CSS и подставлять нашу команду в нужный стиль элемента. Мы остановились на User CSS, но вы можете выбрать любой другой вариант, который способен работать с пользовательским CSS. Безопаснее всего ставить расширения из официального интернет-магазина Chrome — перед тем, как попасть туда, они проверяются на вирусы.

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

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

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

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

В нашем случае строка полностью выглядит так:

Видим, что всплывашка, которую мы хотим заблокировать, имеет класс b-popup. Класс — это инструкция в CSS, которая говорит примерно так: «Всё, что имеет такой класс, выводи таким-то образом». Если мы научим браузер скрывать все объекты с классом b-popup, мы добьёмся своей цели.

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

Осталось в скобках написать команду, которая скрывает элемент с экрана:

И теперь на этой же странице с рекламой нажимаем на значок расширения, ставим переключатель в положение On и вставляем на пустую строку нашу команду:

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

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

Источник

Как убрать что угодно на любом сайте

Самый популярный приём разработчиков.

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

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

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

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

Всё дело — в CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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 который сделает доступным для копирования любой текст.

Источник

AdBlock: особенности работы и продвинутые методы блокировки

Привет, Хабр! Часто по работе сталкиваюсь с вопросами вроде: как же работают блокировщики рекламы?

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

В своей статье расскажу о самых интересных и необычных решениях по блокировке рекламы с помощью JavaScript’a и не только. Также посмотрим на новые направления разработки блокировщиков и куда все движется.

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

Рынок блокировщиков

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

В некоторых мобильных браузерах есть специальные опции для включения блокировки (например, Opera), некоторые изначально работают как браузеры – со встроенным блокировщиком рекламы и отслеживания (AdBlock Browser, Brave).

В некоторых мобильных браузерах есть специальные опции для включения блокировки (например, Opera), некоторые изначально работают как браузеры – со встроенным блокировщиком рекламы и отслеживания (AdBlock Browser, Brave).

Отдельным списком можно выделить следующие инструменты:

VPN серверы с функцией блокировки рекламы;

DNS серверы с блокировкой рекламы

мобильные операторы с услугами блокировки рекламы.

Браузерные расширения

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

Перейдем к общей схеме работы расширения на примере AdBlock Plus.

Почти все блокировщики основаны на списках фильтрации, это такие файлы https://easylist-downloads.adblockplus.org/ruadlist+easylist.txt, которые содержат список правил для фильтрации контента на определенных сайтах. Также в них есть общая часть, которая относится к фильтрации на всех ресурсах, так что вы ненароком тоже можете случайно попасть под фильтрацию одного из общих фильтров (которые работают на всех сайтах).

Например, вы создали на своем сайте какой-то

На основе этих файлов и происходит вся фильтрация контента сайта. Изменениями в этих списках занимаются конкретные форумы и модераторы (например: RuAdList https://forums.lanik.us/viewforum.php?f=102), некоторые можно найти и на github’e https://github.com/abp-filters/abp-filters-anti-cv.

Как читать/писать фильтры

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

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

Блокировка с помощью JavaScript

Давайте рассмотрим на примере:

Фильтр на примере: localhost#$#hide-if-shadow-contains /MyAds/

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

Фильтр: localhost#$#abort-on-property-read Object.prototype.testMethod

В данном примере рассмотрено создание типичного класса, который прогнали, например, через Babel.

X-Path

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

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

Perceptual Image Hash

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

Алгоритм примерно следующий:

Нормализуем размер картинки под общий пресет;

Разделяем картинку на I1, I2 … In не перекрывающихся блоков, где N – кол-во блоков, равных длине финальной hash bit строки;

Зашифровываем I1, … In блоки с помощью секретного ключа K в новую последовательность блоков;

Для каждого этого блока вычисляем его среднее M1….Mn, а затем вычисляем общее среднее Md = median(Mi), где I = 1…N;

Создаем 64-битный хэш на основании того, находится значение выше или ниже среднего (подробнее).

Давайте рассмотрим на примере этих двух изображений:

Img#1 Img#2

Если мы сравним 2 хэша, получившиеся из двух изображений, то увидим, что дистанция Хэмминга между этими хэшами равна 3, что означает схожесть изображений.

Часть кода фильтра hide-if-contains-image-hash из AdBlock Plus.

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

DNS фильтрация

Для начала напомню, что DNS позволяет нам, кроме всего прочего, по имени хоста получить IP адрес.

DNS фильтрация работает в том случае, если вы укажете в качестве DNS адресов для вашего устройства, например адреса AdGuard’a. Далее AdGuard по своему усмотрению предоставляет для обычных доменных имен их реальные IP адреса, а для рекламных – IP адреса, которые возвращают заглушки.

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

HTTPS фильтрация

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

Как по мне, способ очень экстремальный и экстравагантный, доверять кому-то весь свой трафик я не готов.

Нейронные сети для блокирования рекламы GCNN

Ну и конечно куда уж в 2021 году без Machine Learning в вебе. Сразу оговорюсь, что разбираюсь в теме на уровне новичка и эксперты в комментариях, надеюсь, меня если что поправят.

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

Например возьмем следующую простую DOM структуру.

Начнем с верхнего HTML элемента и вычислим все его соседние элементы. В последствии необходимо будет пройтись по всем элементам.

Затем нам необходимо составить вектор фич для каждого элемента. В качестве примера можно использовать любые свойства элементов. Например, мы обозначили, что элемент с типом div обозначается числом 29 и т.д. Тоже самое повторяет с названиями атрибутов у элементов, возможно, их размерами и т.д.

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

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

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

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

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

AdGraph

AdGraph – это такой необычный набор патчей для Chromium в движок Blink и JavaScript движок V8, которые позволяют на основе загружаемых ресурсов выстраивать граф зависимостей на основе трех слоев HTML, HTTP и JavaScript.

Общая схема работа

Затем AdGraph, с помощью натренированной нейронной сети Random Forest, классифицирует граф. В качестве исходной информации для обучения были использованы фильтры блокировки, о которых мы говорили ранее.

Подробнее можно посмотреть тут:

Вместо итогов

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

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

Источник

Отключаем нежелательные HTML-элементы с помощью CSS

Часто, когда мы сдаем проект клиенту, мы теряем контроль над 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-классов, чтобы он не был ограничен в работе с разметкой.
Все стили вместе:

Источник