Лучший способ реализовать «обёртки» в CSS
Иногда первое, что мы пишем на странице — это элемент, оборачивающий всё остальное на странице. Термин «Обёртка» типичен для этого. Мы задаём ему класс, отвечающий за инкапсуляцию всех визуальных элементов на странице.
Я всегда боролся за то, чтобы найти лучший способ реализовать его. Я нашёл соответствующую тему на StackOverflow с более чем 250000 просмотров, что говорит о её огромной популярности. В этой статье я подытожу свои мысли.
Перед тем, как пойти дальше, сначала рассмотрим разницу между «обёрткой» (wrapper) и «контейнером» (container).
«Обёртка» против «Контейнера»
Я вижу разницу между элементом-обёрткой и элементом-контейнером.
В языках программирования слово «контейнер» обычно используется для структуры, содержащей более одного элемента. «Обёртка» же — это нечто, что оборачивается вокруг одного объекта, чтобы предоставить интерфейс к нему и расширить его функциональность.
Так что, мне кажется, есть смысл оставить два названия, поскольку они предполагают разные функции.
Обёртка ассоциируется с
Контейнер, напротив, обычно предполагает другой вид содержимого. То, которое иногда необходимо для реализации поведения или оформления множественных компонентов. Он служит задаче группировки семантических и визуальных элементов. Например, у бутстрапа есть «классы контейнера», которые содержат их систему сеток или другие различные компоненты.
Термины «Обёртка» и «Контейнер» также могут означать одно и то же в зависимости от разработчика и его целей. Могут быть и другие соглашения, так что лучший совет, как правило — делать так, как вам самим логичнее. Но помните, что наименование — одна из наиглавнейших фундаментальных вещей в практике разработчика. Система наименования делает код читабельнее и предсказуемее. Выбирайте тщательнее!
Вот пример общей обёртки страницы:
width против max-width
После установки ширины блочному элементу он больше не сможет растягиваться на всю ширину своего контейнера (полезно для комфортной длины строк). Следовательно, элемент-обёртка займёт указанную ширину. Но если окно браузера Уже указанной ширины обёртки, то появится нежелательный горизонтальный скролл.
С точки зрения отзывчивости max-width лучший выбор!
Дополнительные внутренние отступы
Я видел, как многие разработчики забывали один граничный случай. Допустим, есть обёртка с max-width: 980px. Этот граничный случай проявляется при экране устройства 980px. Поэтому, её содержимое прилипнет точно к краям экрана, не оставляя «воздуха».
Эта проблема нехватки «воздуха»
Обычно нам нужны отступы по краям. Вот почему, когда мне нужна обёртка шириной 980px, я делаю так:
Вот почему добавление padding-left и padding-right к обёртке будет хорошей идеей, особенно на мобильных устройствах.
Или подумайте о box-sizing, чтобы отступы вообще не влияли на общую ширину.
Какой HTML-элемент выбрать
У обёртки нет семантики. В ней просто находятся все визуальные элементы и контент на странице. Он всего лишь просто контейнер. С точки зрения семантики,
Элемент не замена общему элементу-контейнеру. Если элемент нужен чисто для оформительских целей или как вспомогательное средство для скриптов, то рекомендуется использовать
. Общее правило таково: элемент раздела подходит в случае, когда содержимое элемента явно указано в схеме документа.
Элемент несёт в себе собственную семантику. Он подходит для тематической группировки контента. В каждом разделе должен быть заголовок (элемент h1-h6) в качестве дочернего элемента (прим. перев.: это не строгое правило, но крайне желательно соблюдать его).
Примерами разделов могут служить главы, различные вкладки в диалоговом окне или пронумерованные разделы диссертации. Домашнюю страницу можно разбить на разделы для введения, новостей и контактной информации.
Сходу это может показаться неочевидным. Но да, старый добрый
Тег против дополнительного
И в результате у вас в разметке будет одним элементом меньше, поскольку удалён ненужный обёрточный
Однако, лучше этого не делать ради гибкости и устойчивости к изменениям. Представьте любой из этих сценариев на поздней стадии проекта:
Лично я склоняюсь к тому, что для реализации обёртки всё же лучше использовать дополнительный
P.S. Это тоже может быть интересно:
Если вам понравилась статья, поделитесь ей!
Как стилизовать wrapper в CSS
Контент сайта должен находиться в элементе, имеющем такую ширину, чтобы его было легко читать. Для достижения этого мы можем использовать то, что называется wrapper, обёртка или контейнер. Есть несколько способов использования обёртки в CSS, и все они могут вызвать некоторые затруднения.
В этой статье я объясню вам всё, что нужно знать о контейнерах в CSS: как они работают и как их использовать. Обратите внимание, в статье я могу употреблять термины wrapper, обёртка и контейнер, но все они означают одно и то же.
Готовы? Давайте разбираться!
Кратко о контейнерах
Однако добавлять wrapper к элементу в современных условиях было бы не очень практично. Контейнер не позволяет дочерним элементам выходить за его границы. Посмотрите на следующую фигуру:
У нас есть боковые и центральные элементы, которые существуют внутри другого элемента, оборачивающего их. Конечно, у элемента wrapper есть своя ширина.
Без контейнера дочерние элементы соприкасались бы с границами экрана. Это выглядело бы довольно раздражающе для пользователя, особенно на большом экране.
Почему страница должна иметь обёртку
Использование контейнера на странице даёт много преимуществ, о которых вы, как дизайнер или разработчик, должны знать. Вот некоторые из них:
Добавляем ширину
Первая вещь, о которой стоит подумать, создавая wrapper, – это его ширина. Насколько широким вы хотите его видеть? Это зависит от вашего дизайна. Как правило, чаще всего используется ширина контейнера в диапазоне 1000px – 1300px. Самый популярный фреймворк Bootstrap, например, использует ширину в 1170px.
Однако не рекомендуется использовать свойство width, так как из-за этого может появиться горизонтальная прокрутка экрана, если его размер меньше 1170px. Но вы можете от неё избавиться, добавив свойство max-width.
Это будет работать, но вы также можете убрать свойство width и использовать только max-width, как показано ниже:
Теперь, когда мы добавили контейнеру ширину, давайте расположим его в центре.
Центрирование контейнера
Чтобы разместить контейнер в центре, вы должны присвоить свойству margin значение auto с левой и правой стороны. Смотрите пример, приведенный ниже:
Согласно спецификации CSS, auto margin работает следующим образом:
Если свойствам margin-left и margin-right присвоено значение auto, то размер отступа с обеих сторон будет одинаковым. Это горизонтально центрирует объект, относительно краёв содержащего блока.
Я использовал параметр «margin: 0 auto», который сбрасывает значение margin сверху и снизу до нуля, а справа и слева устанавливает значение auto. Пользуясь этим способом, можно ожидать некоторых последствий, о которых я расскажу в этой статье чуть позже.
Пока что рекомендую установить значения margin вручную.
Добавляем padding слева и справа
Важно не забыть добавить padding с левой и правой стороны. Если размер окна просмотра меньше максимальной ширины контейнера, то края контейнера будут соприкасаться с границами окна просмотра.
Добавляя padding, мы можем быть уверены, что слева и справа будет отступ в 16px, даже если ширина окна просмотра меньше максимальной ширины контейнера.
Свойство padding действует как подстраховка, не допускающая прилегания границ контейнера к границам окна просмотра, в случае нехватки места.
Использование процентной ширины для контейнера
Я получил ответ об использовании процентной ширины (типа max-width: 90%) для контейнера, вместо добавления padding-left и padding-right.
В случае использования этого метода, ширина, равная 90% от окна просмотра, будет слишком крупной на больших экранах. Это можно исправить, используя медиа-запросы.
Применяя процентную ширину, мы совершаем дополнительный шаг. Можно легко избежать этот шаг, используя фиксированное значение ширины. Другое решение говорит, что мы можем совместить width: 90% со свойством max-width: 1170px.
Это довольно интересный подход, но я бы предпочел самостоятельно добавить padding, вместо того чтобы полагаться на процентную ширину.
Способ отображения контейнера
Так как контейнер – это
Что ж, я бы не рекомендовал так делать, потому что это противоречит концепции разделения обязанностей. «Обёртка» оборачивает другие элементы, и на этом всё. Если вам нужен контейнер с сеткой, добавьте в существующий контейнер элемент
Так делать не рекомендуется, потому что использование элемента wrapper на другой странице может случайно повредить вашу вёрстку.
Лучшим решением будет следующее:
Заметьте, что я добавил отдельный элемент
Добавляем отступ между контейнерами
Помните, я не рекомендовал использовать сокращенную версию кода для центрирования контейнера? Я говорю об этой версии:
Она может привести к неполадкам, если на странице несколько контейнеров, и вы хотите добавить отступ между ними. Если вы зачем-то добавили другую вариацию класса к элементу wrapper, по определённым причинам у вас может не получиться добавить отступ.
Свойство margin не будет работать для элемента wrapper-variation, потому что оно противоречит свойству margin: 0 auto. Сокращенное свойство будет отменять полное. Чтобы избежать подобной путаницы, в таких случаях рекомендуется использовать полные свойства.
Теперь давайте перейдём к созданию отступа. В каждом проекте я подготавливаю несколько служебных классов и использую их по необходимости. Обратите внимание на следующую модель:
Контейнер внутри полноэкранного раздела
Могут быть случаи, когда фон секции занимает 100% ширины окна просмотра, а внутри секции находится контейнер. Это похоже на то, что я показывал в предыдущем примере.
Структура HTML-страницы может выглядеть так:
Элемент занимает 100% ширины окна просмотра. Вы можете добавить к нему фоновый цвет или изображение. Внутри него контейнер не позволяет содержимому занять всю ширину окна просмотра.
На картинке, приведенной выше, у элемента есть фоновое изображение, которое занимает всю ширину окна просмотра. Контент внутри него ограничен шириной контейнера.
Нужен ли контейнер для первой секции?
Бывает по-разному. Давайте рассмотрим два наиболее часто используемых варианта дизайна первой секции (Hero Section).
В первом варианте содержимое располагается по центру и ограничивается определенной шириной.
Во втором варианте содержимое растягивается по ширине основного контейнера.
Чтобы лучше понять эти две модели, давайте разберёмся, как построить каждую из них.
Первая секция с контентом в центре
Возможно, вы не устоите перед соблазном разместить содержимое первой секции и центрировать всё без учета контейнера.
Имея такой HTML-код, вы бы центрировали содержимое с помощью text-align.
Это будет выглядеть здорово до тех пор, пока вы не измените размер окна браузера. Вы можете столкнуться проблемами, рассматриваемыми далее.
Содержимое касается краёв
Так как padding справа и слева отсутствует, содержимое будет касаться краёв без каких-либо отступов. Это плохо для пользователя, ведь в подобной ситуации сложно просматривать и читать контент.
Слишком длинная строка на больших экранах
Будет очень сложно читать текст абзаца на больших экранах, так как строка слишком длинная. Сайт « Элементы типографического стиля, используемые в сети » рекомендует, чтобы в строке было 45-75 символов. Чем дальше от этого диапазона, тем сложнее будет читать текст, представленный на веб-странице.
Для устранения подобных проблем, можно использовать контейнер, который не даст строке текста стать слишком длинной и добавит отступ на мобильных устройствах.
Я использовал класс hero__wrapper, так как этот контейнер может принадлежать только первой секции (Hero Section), поэтому его ширина может быть меньше ширины других контейнеров.
Для центрирования содержимого вы можете применить любой метод, который хотите, в зависимости от варианта использования. В этом примере будет достаточно применить text-align: center, чтобы расположить контент в центре.
Контейнер стоит выравнивать по центру или по левой стороне?
Не знаю, есть ли однозначный ответ на этот вопрос, но я видел сайты, которые на экранах ноутбуков выравнивают контейнер по центру, а на экранах компьютеров – по левой стороне.
Сайт TechCrunch – хороший тому пример. Обратите внимание на то, что на больших экранах он выравнивается по левой стороне.
Лично я больше люблю сайты, которые выравниваются по центру и имеют симметричный отступ справа и слева. Возможно, поэтому я мало знаю о данной теме.
Используем переменные CSS для вариаций контейнеров
Редко случается так, что вам нужен контейнер только одного размера. Ширина контейнера может быть большой или маленькой, в зависимости от содержимого и варианта использования. Применяя переменные CSS, мы можем по-новому взглянуть на wrapper и сделать его максимально пластичным. Обратите внимание на следующее:
Что это значит? Это значит, что вы можете создать вариацию контейнера, установив свойство —wrapper-width, как показано ниже.
Таким образом, я создал вариацию контейнера:
Если вам не нравится использовать встроенные стили для изменения переменной CSS, вы можете вместо этого добавить новый класс. Смотрите пример, приведенный ниже:
Используем свойство Display: Contents
Для начала я вас познакомлю с этим значением. Каждый элемент в CSS является блочным; и этот блок содержит контент, границы, внутренние и внешние отступы. Если вы примените display: contents, этот блок будет исключен из потока. Я могу представить это как удаление открывающего и закрывающего тэгов вокруг него.
Возможно, в примере, приведенном выше, вам понадобится растянуть header на всю ширину страницы, вместо того, чтобы вписывать его в контейнер.
Таким способом элемент wrapper будет скрыт (в каком-то смысле). Теперь, когда мы применили display: flex к элементу site-header, объекты, принадлежавшие контейнеру, станут дочерними для элемента site-header.
Адаптивный фон, фиксированный контент
В своей книге о секретах CSS Лия Веру предложила интересную технику, которая может быть использована для секций с адаптивным фоном (фон, занимающий всю ширину окна просмотра), внутри которых есть контейнер. Давайте рассмотрим распространенный способ, позволяющий сделать это:
Принцип работы margin-left: auto и margin-right: auto заключается в вычислении половины ширины окна просмотра и вычитании из неё ширины контента. То же самое можно сделать, используя padding.
Мы ещё не закончили. На мобильных устройствах контент будет соприкасаться с границами экрана. Решить это можно следующим способом:
В качестве альтернативного решения можно использовать новую функцию CSS max(). Мы просто устанавливаем минимальный padding размером в 1rem, а вычисление 50% — 585px будет использовано в качестве другого значения.
Конец
Вот мы и стилизовали наш wrapper. У вас есть комментарий или предложение?
Пожалуйста, оставьте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, отклики, подписки, лайки, дизлайки!
Дайте знать, что вы думаете по данной теме в комментариях. Мы крайне благодарны вам за ваши комментарии, подписки, лайки, отклики, дизлайки!
Как врапперы PHP могут быть использованы для атаки на веб-приложения
Содержание статьи
Гибкость языка программирования добавляет удобства разработчикам, но и открывает новые векторы для атаки. Разработчики РНР часто используют так называемые wrapper’ы и даже не подозревают, что это может привести к обходу встроенных в приложение фильтров безопасности и, к примеру, позволить выполнить на сервере произвольный код. О врапперах, их особенностях и угрозах, с ними связанных, и пойдет сегодня речь.
WARNING
Вся информация предоставлена исключительно в ознакомительных целях. Ни редакция, ни автор не несут ответственности за любой возможный вред, причиненный с использованием материалов этой статьи.
Intro
Уязвимости, связанные с реализованным в PHP механизмом врапперов, обсуждаются достаточно давно. Ссылки на них присутствуют в OWASP TOP 10 и WASC TCv2. Однако ряд особенностей реализации кодирования данных приводит к тому, что даже приложения, разработанные с учетом требований безопасности, могут содержать уязвимости (включая критические). В этой статье мы сначала кратко рассмотрим, что представляют собой PHP wrappers и как они могут быть полезны программистам. Затем разберем их особенности, которые позволяют обходить встроенные в приложение фильтры безопасности и реализовывать атаки, связанные с несанкционированным доступом к файловой системе и выполнением произвольного кода.
Wrapper’ы
В PHP есть такое понятие, как потоки (Streams), которые появились в интерпретаторе начиная с версии 4.3.0. Это абстрактный слой для работы с файлами, сетью, сжатыми данными и другими ресурсами, использующими единый набор функций. В простейшем определении, поток — это ресурс, имеющий «потокообразное» поведение. То есть ресурс, из которого можно читать, в который можно писать и внутри которого можно перемещаться. Для примера рассмотрим функцию fopen. Согласно официальной документации, она имеет следующий синтаксис:
Но помимо тривиального пути к файлу могут быть использованы так называемые врапперы (wrapper). Лучший способ пояснить, что это такое, — привести несколько примеров. Итак, с использованием врапперов через все ту же функцию fopen становится возможным:
Врапперы (они же обработчики протокола или обертки) указывают функциям, каким образом обрабатывать данные из потока. Поэтому функции, поддерживающие врапперы, могут быть использованы для получения данных из различных источников. Врапперы позволяют гибко и удобно обрабатывать данные, поступающие в программу через какой-либо поток, а также модифицировать их при необходимости.
Секция Registered PHP Streams в выводе phpinfo()
Хакер #163. Лучшие гаджеты для хакера
В рассмотренном примере врапперы использовались в режиме read. Если же происходит запись данных, то и в этом случае врапперы также могут расширить возможности многих функций. Например, функция copy() поддерживает врапперы в обоих своих аргументах, и если во втором аргументе используется обертка php://output, то копируемый файл отправляется в выходной буфер. Таким образом, функция copy() позволяет не только копировать файлы, но и читать их.
Аналогичным образом можно использовать функцию file_put_contents и любую другую функцию, поддерживающую враппер в режиме write:
В версии PHP 5.3.6 появился враппер php://fd, который предоставляет прямой доступ к файловым дескрипторам. Если PHP установлен как модуль Apache’а, враппер php://fd дает возможность записывать произвольные данные в access_log/error_log (обычно права на этих файлах 644, и напрямую в них может писать только root).
Надо сказать, что в PHP довольно много встроенных врапперов, но при этом можно создавать и регистрировать собственные обертки, используя функцию stream_wrapper_register. Более подробную информацию ты сможешь найти на официальном сайте PHP. Полный список доступных врапперов можно посмотреть с секции phpinfo — Registered PHP Streams.
Некоторые врапперы имеют недокументированные особенности, позволяющие более эффективно эксплуатировать уязвимости веб-приложений. Именно эти особенности мы сегодня и рассмотрим.
Что таит в себе ZIP?
ZIP — популярный формат сжатия данных и архивации файлов. Поддержка этого формата реализована во всех современных операционных системах, а библиотеки для работы с ним написаны для большинства языков программирования. В PHP для работы с этим форматом удобно использовать модуль zip.
После того как zip-архив создан, с помощью враппера zip:// можно напрямую обращаться к файлам внутри архива.
Возможность помещать в архив файлы, в именах которых присутствует слеш, позволяет эксплуатировать уязвимости типа Remote File Include, при отсутствии null-байта. Для примера рассмотрим следующий простой скрипт:
Конечно, добиться выполнения кода в данном случае можно разными путями. Но использование врапперов http://, ftp://, data:// ограничивается директивой allow_url_include, а использованию null-байта при инклуде локальных файлов скорей всего помешает директива magic_quotes_gpc. И может даже показаться, что при allow_url_include=Off и magic_quotes_gpc=On проэксплуатировать уязвимость никаким образом не получится. Но есть еще один способ, не описанный ранее в паблике!
Для начала предположим, что есть возможность создавать на атакуемом сервере файлы. Тогда, создав zip-архив, как показано в примере выше, возможно выполнить PHP-код, используя враппер zip://.
Если нет возможности создать нужный файл с помощью PHP-функции, то можно использовать временные файлы, которые создает PHP при загрузке контента через HTML-форму. Путь до временного файла можно узнать из phpinfo(). Более подробные сведения о том, как использовать временные файлы при эксплуатации уязвимостей типа LFI/RFI, можно почерпнуть на форуме rdot.org. Важно отметить, что директива allow_url_fopen не ограничивает применение обертки zip://.
Where is my data://?
Враппер data:// с момента своего появления привлекал внимание специалистов по веб-безопасности. В официальной документации этот враппер предлагают использовать в очень ограниченной форме. Но согласно спецификации RFC 2379, эта обертка допускает более развернутый синтаксис:
При этом mediatype может либо полностью отсутствовать, либо быть заполнен произвольными значениями:
Эту особенность враппера можно использовать для обхода проверок и фильтров. Например, в популярном скрипте TimThumb v1.x есть такой фильтр:
Обойти эту проверку можно следующим образом:
В PHP существует такая функция, как stream_get_meta_data(). Согласно официальной документации, она извлекает метаданные из потоков и файловых указателей:
При этом в возвращаемом массиве содержатся элементы с четко заданными ключами, и задача добавления в этот массив новых элементов выглядит на первый взгляд довольно проблематичной. Но с помощью враппера data:// можно довольно просто манипулировать этим массивом! Как? Приведу пример:
Документация к врапперу data://
Холодный компресс
Согласно документации, обертка compress.zlib:// позволяет распаковывать gz-архивы. Если с помощью этого враппера обрабатывать данные, не являющиеся zlib-архивом, то данные возвращаются без изменений.
Например, прочитать файл /etc/hosts можно таким образом:
«Очень полезно!» — подумаешь ты :). Сейчас будет круче. Если ты хоть немного программировал на PHP для веба, то наверняка знаком с функцией prase_url(). Напомню, эта функция осуществляет парсинг URL. И тут есть один интересный момент: на вход функции можно предоставить не только URL, но и строку довольно общего типа:
Учитывая эту особенность, можно обходить различные проверки и фильтры на основе функции parse_url, используя многофункциональные врапперы. Для примера рассмотрим следующий скрипт, который, по задумке разработчиков, может загружать файлы только с доверенного хоста img.youtube.com.
В штатном режиме превью с img.youtube.com загружаются следующим образом:
В этом случае фильтр можно обойти и с помощью враппера compress.zlib://.
Помимо этого, довольно просто обойти фильтр на имя хоста и загрузить на сервер файл с произвольным именем и содержимым при помощи ранее рассмотренного нами враппера data://:
В этом случае локальные файлы будут копироваться в папку с превью: если эта папка доступна для прямого обращения из браузера, то появляется возможность просматривать системные файлы. Из этого примера видно, что использование врапперов data:// и compress.zlib:// может быть полезным в скриптах, скачивающих файлы с удаленных хостов. Одним из таких скриптов является TimThumb.
Уязвимость в плагине WordPress
Эксплуатация уязвимостей в TimThumb v1.x
TimThumb — это популярный скрипт для работы с изображениями, который используется во многих темах и плагинах для WordPress. В августе 2011 года в скрипте TimThumb v 1.32 была найдена критическая уязвимость, позволяющая загружать на атакуемый сервер вместо изображений с доверенных хостов файлы с PHP-кодом. Почти в одночасье в публичном доступе появилась адвизори, подробно рассказывающая об эксплуатации этой уязвимости.
Суть уязвимости заключалась в том, что скрипт некорректно проводил проверку URL по списку доверенных хостов, с которых возможно было загрузить изображения. Для обхода фильтров, к примеру по доверенному хосту blogger.com, предлагалось зарегистрировать домен четвертого уровня, содержащего в себе URL доверенного хоста, например blogger.com.attacker.com, и загружать файлы с этого домена.
Этим способом можно было проэксплуатировать уязвимость до версии 1.32 (revision 142). Но более новые версии оказались также уязвимы. Рассмотрим, каким образом происходит загрузка изображений в версии 1.34 (revision 145):
Несложно заметить, что при проектировании функции check_external было допущено несколько логических ошибок:
Немного покопавшись, я написал эксплойт для загрузки файлов. С произвольным именем и с произвольным содержимым, в произвольное место системы.
Таким образом, с помощью враппера data:// можно обойти все фильтры и создать файл в директории кеша с произвольным содержимым: