Articles
Введение в HTML
Теги, связанные с метаинформацией

Теги, связанные с метаинформацией

Эта статья объясняет теги, связанные с метаинформацией.

В нем объясняется тег <meta>, включая аспекты, связанные с SEO, адаптивным дизайном и Content-Security-Policy.

YouTube Video

Теги, связанные с метаинформацией

Тег <meta> 

1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Тег <meta> предоставляет метаданные для HTML-документа. Метаданные не отображаются на странице, но используются поисковыми системами и браузерами. Тег <meta> используется для описания страницы, ключевых слов, информации об авторе и настроек адаптивного дизайна.

Тег <meta name="viewport"> 

1<meta name="viewport" content="width=device-width, initial-scale=1">
  • Тег <meta name="viewport"> управляет макетом и масштабированием веб-страниц на разных устройствах. Он часто используется в адаптивном дизайне для обеспечения правильного отображения на мобильных устройствах.

Тег <meta name="description"> 

1<meta name="description" content="An example webpage">
  • Тег <meta name="description"> используется для краткого описания содержимого веб-страницы. Поисковые системы используют это описание для отображения краткого содержания страницы в результатах поиска.

Тег <meta name="keywords"> 

1<meta name="keywords" content="HTML, CSS, JavaScript">
  • Тег <meta name="keywords"> предоставляет список ключевых слов, относящихся к содержимому страницы. Поисковые системы используют эти ключевые слова для лучшего понимания содержимого страницы.

Тег <meta name="author"> 

1<meta name="author" content="John Doe">
  • Тег <meta name="author"> указывает автора веб-страницы. Эта информация в основном используется поисковыми системами и инструментами для точного определения автора страницы.

Тег <meta http-equiv="refresh"> 

1<meta http-equiv="refresh" content="5; url=https://example.com">
  • Тег <meta http-equiv="refresh"> используется для автоматического обновления страницы или перенаправления на другой URL через указанное время. Он полезен для перезагрузки страницы или перенаправления пользователя.

Тег <meta http-equiv="cache-control"> 

1<meta http-equiv="cache-control" content="no-cache">
  • Тег <meta http-equiv="cache-control"> используется для управления поведением кэширования веб-страницы. Он может указывать, нужно ли кэшировать страницу или выполнять ее повторную проверку при последующем доступе.

Тег <meta http-equiv="expires"> 

1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">
  • Тег <meta http-equiv="expires"> устанавливает дату истечения срока действия содержимого страницы. После указанной даты содержимое становится устаревшим, и браузер выполняет запрос новой версии страницы.

Тег <meta http-equiv="X-UA-Compatible"> 

1<meta http-equiv="X-UA-Compatible" content="IE=edge">
  • Тег <meta http-equiv="X-UA-Compatible"> используется для указания режима совместимости для Internet Explorer. Этот тег гарантирует, что браузер использует соответствующую версию движка рендеринга для отображения страницы.

Тег <meta http-equiv="content-security-policy">

Атрибут http-equiv="content-security-policy" в HTML-теге meta служит для применения определенных правил безопасности в браузере с целью повышения безопасности веб-страницы. С помощью этого атрибута разработчики сайтов могут задавать политики, касающиеся загрузки ресурсов и выполнения скриптов, чтобы предотвращать атаки, такие как XSS (межсайтовый скриптинг) и внедрение данных.

Что такое Content-Security-Policy?

Content-Security-Policy (CSP) — это тип HTTP-заголовка, который используется для управления, какие внешние ресурсы (изображения, скрипты, таблицы стилей и т. д.) может загружать веб-страница и какой код может выполняться. Обычно он отправляется как HTTP-заголовок, но может также задаваться в HTML с использованием тега meta. Этот метод позволяет задавать CSP на стороне клиента вместо настройки заголовков на стороне сервера.

Например, вы можете задать CSP в HTML с помощью тега meta следующим образом:.

1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">

В этом примере установлены следующие политики:

  • default-src 'self': Все ресурсы загружаются только с того же источника (самого себя).
  • img-src https://example.com: Изображения загружаются только с https://example.com.
  • script-src 'self' https://apis.google.com: Скрипты могут выполняться только с того же источника или с https://apis.google.com.

Различия между http-equiv и HTTP-заголовками

Обычно Content-Security-Policy отправляется с сервера клиенту как HTTP-заголовок. Однако, если вы задаете его на стороне клиента с использованием тега meta, он может быть записан напрямую в HTML.

Однако существуют некоторые важные различия между настройкой его как HTTP-заголовка и указанием с помощью тега meta:

  1. Приоритет: CSP, отправленный через HTTP-заголовки, имеет приоритет над CSP, заданным в теге meta. Это означает, что если CSP задан на стороне сервера, он не будет переопределен тегом meta, используемым на стороне клиента.

  2. Время применения: CSP, заданный через HTTP-заголовки, применяется до загрузки страницы. С другой стороны, CSP, заданный через тег meta, применяется, когда HTML анализируется, поэтому ресурсы могут уже быть загружены.

Директивы, доступные в CSP

В CSP используются различные директивы, чтобы задавать политики, позволяющие или запрещающие загрузку и выполнение определенных типов ресурсов. Типовые директивы включают в себя следующее:.

  • default-src: Определяет политику источников по умолчанию для всех ресурсов. Она применяется к ресурсам, не указанным в других директивах.
  • script-src: Определяет источник для JavaScript. Чтобы предотвратить XSS-атаки, вы можете ограничить загрузку скриптов с внешних сайтов.
  • style-src: Определяет источник для CSS. Ограничивая загрузку таблиц стилей из внешних источников, вы можете предотвратить атаки на стили вашего сайта.
  • img-src: Определяет источник изображений. Вы можете ограничить загрузку изображений из внешних источников.
  • connect-src: Определяет URL-адреса, разрешенные для XMLHttpRequests и WebSocket подключений. Это гарантирует безопасность внешних API и WebSocket соединений.

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

Практические настройки CSP для повышения безопасности

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

1<meta http-equiv="Content-Security-Policy"
2    content="default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; style-src 'self'; base-uri 'self'; form-action 'self';">

К этой конфигурации применяются следующие политики:

  • default-src 'self': Все ресурсы загружаются только с того же источника.
  • script-src 'self' https://trusted-cdn.com: Скрипты загружаются только с того же источника или доверенного CDN.
  • object-src 'none': Тег object не используется. Это необходимо для предотвращения атак на основе Flash или плагинов.
  • style-src 'self': Таблицы стилей загружаются только из исходного источника.
  • base-uri 'self': Базовый URL, заданный тегом <base>, ограничен исходным источником.
  • form-action 'self': Место назначения отправки формы ограничено исходным источником. Это снижает риск отправки данных формы на внешние сайты.

Заключение

Используя http-equiv="content-security-policy" для определения CSP в HTML, можно повысить безопасность веб-страницы. Правильно настроенный CSP — это мощный инструмент, который снижает риск атак XSS и утечек данных и защищает ваш веб-сайт.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Теги, используемые в секции headНедавние тенденции в HTML