Как сделать кат в html
Что такое CUT. Как убрать под кат в WordPress и не только!
Привет всем! Сегодня будет не очень большая статья, но достаточно полезная для новичков в интернете. Поговорим мы о таком понятии как КАТ. Словосочетание «под катом» видели, наверное, все, а вот что это такое некоторые не знают. Если честно, то когда я давным давно начал читать ХабраХабр, то там этот КАТ был везде, а я так и не понимал что же это такое, пока, наконец, не догадался сам. Но было бы гораздо проще, если бы я об этом где-то мог прочитать 😉
CUT — с английского «резать, разрезать, отрезать», соответственно на сайтах это что-то вроде «линии отреза», которая разделяет анонс статьи и основную ее часть. На главной странице, большинства блогов, в том числе и на моем, выводятся не полные тексты постов, а только лишь их часть. Остальное же скрывается «под катом».
Подытожим. Кат — это невидимая, воображаемая линия, которая разделяет анонс поста и его основную часть. Для того, чтобы просмотреть полный текст статьи, необходимо пройти по ссылки «Читать далее» или что-то вроде того. Или же просто нажать на заголовок статьи. 
Надеюсь с такой картинкой все встало на свои места и теперь вы уж точно знаете что же такое CUT 😉
Но не стоит закрывать на этом страницу, ведь кроме определения я расскажу еще и о плюсах и минусах ката.
Плюсы скрытия «под кат»
Если публиковать полную статью без скрытия под кат, то посетители будут видеть, соответственно, весь текст и им не нужно будет кликать на злосчастные «Читать далее» 🙂 Я был удивлен, когда почитал немного на эту тему комментарии в сети. Многие пользователи яростно негодуют и выступают против скрытия под кат. Мол им, видите ли, неудобно каждый раз тыкать на какие-то непонятные ссылки чтобы открыть пост. Им удобнее все сразу просматривать. Да, тяжелый случай, подумал я.
На мой взгляд, если читатель зашел на блог впервые или он заходит на него периодически, раз в неделю, например, то ему будет гораздо удобнее пролистывать короткие анонсы. Быстро пробежался, приметил интересные заголовки и темы, открыл их в отдельных окнах и пошел дальше. Я на хабре так и делаю.
Еще одним плюсом использования ката считается то, что так лучше для индексации и позиций в выдаче. Смысл в том, что если на главную вывести полный текст, то страница с самой статьей будет уже не уникальной. На самом деле это спорный момент, так как я видел много популярных блогов где тексты на главную выводились в полном объеме и при этом посещалка там была от 1к и выше. Так что считаю этот пункт бредом 😀
Также стоит отметить еще один момент в плане удобства. Лично Мне не удобно листать страницы с полными статьями. Я ищу что-то интересное, а чтобы пробраться даже через одну статью объемом 2-3 тысячи символов, мне потребуется крутить и крутить колесико мышки. Мне это не нравится.
Второй минус НЕ использования ката в том, что если в статье много картинок или видео, то загружаться это чудо будет ну очень долго. Плохо в плане внутренней оптимизации и неудобно для пользователей.
Как скрыть текст под кат на WordPress и других CMS
Тут все очень просто. Если вы пользуетесь CMS, то они все поддерживают такую возможность. В визуальном редакторе Вордпресса, например, для этого служит вот эта кнопка: 
. Но я советую писать посты в режиме HTML, а там вы увидите код:
По стандарту этот тег заменяется на ссылку «Читать далее», но есть способ изменить надпись.
Все, этого достаточно. Теперь вместо текста «Читать далее» мы получим ссылку «Новый текст».
Такие же возможности есть и в других системах управления сайтом. Например для вставки ката на блогспоте есть кнопка 
.
В ЖЖ можно вставить код:
Все очень просто, как видите.
Ну вот, теперь вы знаете что такое CUT, как пользоваться им в WordPress и некоторых других платформах.
А Вы пользуетесь катом или выводите полные статьи на главной?
Комментарии:
Я тоже, когда первый раз очутился на Хабре, везде видел эти фразы: «Остальное под катом» или «Следуйте под кат» и т.д. Было мучительно осознавать, что я не знаю об этом ничего, но постепенно втянулся в слэнг. Теперь меня не пугают такие вещи как: ЧПУ, НЧ-СЧ-ВЧ, СДЛ, ГС, КАТ, Капча, пузомерки и все в таком духе. 🙂 Но пришлось собирать знания по всему Интернету…
Угу, все приходит с опытом =)
За ЖЖшный тег спасибо большое )))
Видела не раз такое, но лень было искать, как реализовать (тем более, что априори была уверенна — дело нехитрое)
Если пишешь на русскоязычной странице, то и писать на ней надо всё по-русски. Засорение языка только на руку (кому? Догадались?) Образованней от этого не становятся. Сленг, он и в Африке сленг! За основу взяты китайцы с небогатым знанием русского. А за статью спасибо. С катом надо бороться, а не восторгаться, как отказались многие сайты. «Полный текст», «Читать далее» всем ясно и понятно, думаю, даже авторам.
Полностью согласна с Юрием.
А чего соглашаться с Юрием? Под катом значит «под катком», то есть текст закатали ниже уровня асфальта. А китайцев сюда подвязать — это уже от бессилия.
Выпадающий список HTML: учимся создавать и задавать стили с помощью CSS
Тег option HTML используется для создания выпадающего списка, с помощью которого пользователь может выбрать один вариант из заранее определенного набора значений.
Использование атрибута value
Как упоминалось ранее, значение атрибута value может отличаться от текста, выводимого на странице. Например, можно вывести для пользователей названия стран или цветов, а в атрибуте value использовать шорткоды.
В следующем примере мы создадим выпадающий список с атрибутом value :
Пример получения доступа к выбранному варианту в JavaScript
Теперь создадим пример получения доступа к значению выбранного варианта и выполнения некоторых действий. Тот же список, что и в приведенном выше примере, мы создаем с вариантами выбора цвета. После выбора нажмите кнопку, чтобы применить этот цвет к документу:
Для option value HTML используется следующий код:
Вот как обеспечивается доступ к этому значению в HTML select option selected JavaScript :
Пример получения значения в скрипте PHP
А вот как PHP-скрипт используется, чтобы получить значение HTML select option :
Определение стилей выпадающего списка с помощью CSS
Закругленные углы с помощью свойства border-radius
Использование нескольких атрибутов и стилей CSS
Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков
В приведенной демо-версии пользователь может выбрать два варианта из списка:
Демо-версия выпадающего списка с опцией поиска
Используя тот же плагин, можно предоставить пользователям возможность искать нужные варианты в списке HTML select option :
Подробное руководство по HTML-инъекциям
HTML считается каркасом для каждого веб-приложения, определяющим его структуру. Но порой даже самую продуманную экосистему можно испортить парочкой простых скриптов.
Сегодня мы узнаем, как злоумышленники могут получить доступ к веб-приложению с помощью ошибок в его HTML коде.
Содержание:
Что такое HTML?
HTML (HyperText Markup Langauge) — это основной строительный блок сети, который определяет формирование веб-страниц в веб-приложении. HTML используется для разработки веб-сайтов, состоящих из «гипертекста», чтобы включить «текст внутри текста» в качестве гиперссылки и комбинации элементов, которые визуально отображаются в браузере.
Элемент — это основная структурная единица веб-страницы. Он содержит открывающий и закрывающий теги с текстовым содержимым между ними».
HTML-тег
Тег HTML маркирует фрагменты содержимого, такие как:
Это имена элементов, заключенные в угловые скобки, которые бывают двух типов:
Браузеры не отображают эти HTML-теги, но используют их для получения содержимого веб-страницы.
Атрибуты HTML
Атрибуты существуют для того, чтобы добавить в элементы дополнительную информацию. Они находятся внутри начального тега и представлены парами «имя/значение», так что за именем атрибута следует «знак равенства» и значение атрибута.
Теперь посмотрим на блок-схему элементов HTML и попытаемся ее реализовать для создания простой веб-страницы.
Базовая HTML-страница
Каждая веб-страница в Интернете является файлом HTML. Эти файлы представляют собой не что иное, как простые текстовые файлы с расширением «.html», которые сохраняются и запускаются через веб-браузер.
Итак, давайте попробуем создать простую веб-страницу в нашем блокноте и сохранить ее как hack.html:
С основными моментами HTML разобрались, а для более подробного изучения можно почитать руководство.
Теперь давайте попробуем найти основные лазейки и узнать, как злоумышленники внедряют произвольные коды HTML в уязвимые веб-страницы.
Что такое HTML-инъекция?
HTML-инъекция является одной из самых простых уязвимостей, благодаря чему получила широкое распространение.
Возникает, когда веб-страница не может:
Благодаря html-инъекции злоумышленник может внедрять вредоносный HTML-код в приложение через уязвимые поля, чтобы он мог изменять содержимое веб-страницы и даже собирать некоторые конфиденциальные данные.
Давайте рассмотрим, как выполняются такие атаки с использованием HTML-инъекции.
Рассмотрим веб-приложение, которое страдает от уязвимости HTML-инъекции и не проверяет какой-либо конкретный ввод. Обнаружив данную уязвимость, злоумышленник вводит свою вредоносную «HTML-форму входа» с приманкой, например, «Бесплатные билеты в кино», чтобы обманом заставить жертву предоставить свои конфиденциальные учетные данные.
Теперь на пораженной странице пользователи будут видеть приманку «Бесплатные билеты в кино», при клике по которой откроется фиктивная форма входа, созданная злоумышленником.
Угрозы HTML-инъекции
Когда поля ввода не дезинфицированы должным образом на веб-странице, тогда это может привести к атакам:
HTML-инъекция и XSS
На первый взгляд HTML-инъекция во многом похожа на межсайтовый скриптинг. Однако во время XSS-атаки можно внедрять и выполнять Javascript коды, а при HTML-инъекции приходится обходится только определенными HTML тегами.
Теперь давайте углубимся в различные атаки с использованием HTML-инъекции и рассмотрим необычные способы, с помощью которых мы можем испортить веб-страницы и получить учетные данные жертвы.
Сохраненный HTML
«Сохраненный HTML» — внедренный вредоносный скрипт постоянно сохраняется на сервере веб-приложений, который затем передает его обратно пользователю, когда он посещает внедренную веб-страницу. Однако, когда клиент нажимает на полезную нагрузку, которая отображается как официальная часть веб-сайта, внедренный HTML-код запускается браузером. Наиболее распространенный пример сохраненного HTML — это «опция комментариев» в блогах, которая позволяет любому пользователю вводить свой отзыв в форме комментариев для администратора или других пользователей. Давайте теперь попробуем использовать эту сохраненную уязвимость HTML и получить некоторые учетные данные.
Использование сохраненного HTML
Для манипуляция с HTML-инъекциями нам понадобиться приложение bWAPP, которое идет в комплекте с Kali Linux и другими ОС для белого хакинга.
Я открыл целевой IP-адрес в своем браузере и вошел в bWAPP как bee: bug, далее я установил для параметра «Choose Your Bug» значение «HTML Injection – Stored (Blog)» и активировал кнопку взлома.
Теперь мы будем перенаправлены на веб-страницу, которая страдает от уязвимости HTML-инъекции, позволяющая пользователю отправить свою запись в блог, как показано на снимке экрана.
Для начала мы создадим обычную запись пользователя, чтобы подтвердить, что введенные данные успешно сохранены в базе данных веб-сервера, которая, таким образом, отображается в «Поле ввода».
Теперь давайте попробуем внедрить нашу вредоносную полезную нагрузку, которая создаст поддельную форму входа пользователя на эту целевую веб-страницу и перенаправит захваченный запрос на наш IP-адрес. Введите следующий HTML-код в заданное текстовое поле, чтобы настроить HTML-атаку.
На изображении ниже видно, что при нажатии кнопки «Submit» появляется новая форма входа, которая теперь находится на веб-сервере приложения и будет отображаться всякий раз при посещении пользователями данной страницы.
Давайте теперь запустим прослушиватель netcat через порт 4444, чтобы перехватывать запросы жертв.
Теперь нужно подождать, пока жертва не загрузит данную страницу в своем браузере и не введет свои учетные данные.
На изображении выше видим, что пользователь «Raj» открыл веб-страницу и попытался войти в учетную запись с помощью пароля «123». Теперь вернемся к нашему прослушивателю и проверем перехваченные им данные.
На изображении видно, что мы успешно получили учетные данные.
Отраженный HTML
Отраженный HTML возникает, когда веб-приложение немедленно отвечает на введенные пользователем данные, не проверяя их. Это может привести к тому, что злоумышленник внедрит исполняемый код браузера в один ответ HTML.
Вредоносный скрипт не сохраняется на веб-сервере, поэтому злоумышленнику необходимо отправить вредоносную ссылку через фишинг, чтобы поймать пользователя.
Отраженную уязвимость HTML можно легко обнаружить в поисковых системах веб-сайта, так как злоумышленник использует текстовое поле поиска для ввода произвольного HTML-кода. Если веб-сайт уязвим, тогда страница результатов будет возвращена в ответ на эти HTML-объекты.
Отраженный HTML бывает трех типов:
Отраженный HTML GET
Мы создали веб-страницу, на которой пользователи могут оставлять отзывы со своим именем.
Когда пользователь «Raj Chandel» отправляет свой отзыв как «Good», появляется сообщение «Thanks to Raj Chandel for your valuable time».
Этот мгновенный ответ и пара «имя/значение» в URL-адресе показывают, что эта страница может быть уязвима для HTML-инъекции.
Давайте теперь попробуем ввести несколько HTML-кодов в эту «форму» и проверим уязвима страница или нет.
Установите «Отзыв» на «Good».
На изображении ниже видно, что имя пользователя Raj Chandel было изменено в качестве заголовка.
Почему это произошло? Давайте посмотрим на следующий фрагмент кода.
Разработчик не настроил никакой проверки ввода, поэтому сайт просто повторя сообщение с благодарностью, к которому добавлялось имя с помощью переменной «$ _GET».
«Бывают случаи, когда разработчик настраивает некоторые проверки в полях ввода, которые отображают HTML-код обратно на экран без его визуализации».
На изображении видно, что при попытке выполнить HTML-код в поле имени он отбрасывается обратно в виде обычного текста.
Значит ли это, что уязвимость здесь залатана?
Давайте проверим все это, перехватив его исходящий запрос с помощью «burp suite», а затем отправим захваченный запрос прямо на вкладку «Repeater».
На вкладке «Repeater», при нажатии кнопки «Go» мы видим, что HTML объекты были здесь декодированы:
Копируем весь HTML-код:
Вставляем его во вкладку «Decoder», нажимаем «Encode as» и выбираем URL-адрес.
Когда мы получим закодированный вывод, то снова установим его в «Encode as» для URL, чтобы получить его как в формате двойного URL-кодирования.
Теперь скопируем полный URL с двойной кодировкой и вставим его в поле «name =» на вкладке Repeater в параметре Request. Нажмите кнопку «GO», чтобы проверить сгенерированный ответ.
Отлично. На изображении видно, что ответ успешно обработан.
Теперь остается просто внести аналогичные изменения во вкладку «Proxy» и нажать кнопку «Forward». На изображении видно, что мы испортили данную веб-страницу, используя ее проверенные поля.
Давайте посмотрим на фрагмент кода, чтобы увидеть, где разработчик выполнил проверку ввода.
На изображении ниже видно, что разработчик реализовал функцию «hack» в поле имени.
Отраженный HTML POST
Как и в случае с веб-страницей GET, здесь также уязвимы поля «Имя» и «Отзыв».
Поскольку реализован метод POST, то данные формы не будут отображаться в URL-адресе.
Опять попробуем изменить страницу, но в этот раз добавим изображение вместо статического текста.
На изображении ниже видно, что логотип «Ignite technologies» был размещен перед экраном, поэтому злоумышленник может даже внедрить другие медиа-форматы, такие как:
Отраженный HTML Текущий URL
Может ли веб-приложение быть уязвимым для HTML-инъекции без полей ввода на веб-странице? Да, необязательно иметь поля ввода, такие как:
Некоторые приложения отображают ваш URL-адрес на своих веб-страницах, который HTML-инъекция использует вместо поля ввода.
На изображении выше вы можете видеть, что текущий URL-адрес отображается на веб-странице как «http://192.168.0.16/hack/html_URL.php». Воспользуемся этим преимуществом и посмотрим, что мы можем сграбить.
Настройте свой «burp suite» и захватите текущий HTTP-запрос.
Теперь обработаем этот запрос с помощью:
Нажмите кнопку «Forward», чтобы проверить результат в браузере.
Отлично. На изображении ниже видно, что мы успешно испортили веб-сайт, просто вставив желаемый HTML-код в URL-адрес веб-приложения.
