MapLibre GL JS работает в рамках браузерной модели безопасности, где загрузка данных, отрисовка тайлов и доступ к аппаратному ускорению строго завязаны на понятие secure context. В результате HTTPS становится не просто рекомендацией, а фактическим условием корректной работы большинства сценариев, связанных с картами, стилями и внешними источниками данных.
Современные браузеры блокируют или ограничивают множество операций, если страница не считается безопасной. MapLibre GL JS активно использует сетевые запросы для загрузки векторных и растровых тайлов, шрифтов (glyphs), спрайтов, а также JSON-стилей. Все эти ресурсы подчиняются политике mixed content и правилам secure context.
Браузер считает страницу безопасным контекстом, если она загружена по HTTPS или запущена с localhost. Только в таком окружении доступны ключевые API:
MapLibre GL JS использует WebGL как основной механизм рендеринга. Это означает, что сама библиотека технически может инициализироваться в небезопасном контексте, но при попытке загрузки внешних ресурсов поведение начинает деградировать или полностью ломается.
Если страница загружена по HTTPS, а ресурсы (тайлы, стили, шрифты) запрашиваются по HTTP, браузер применяет политику блокировки mixed content.
Различают два типа:
Для MapLibre GL JS критичны оба типа, поскольку карта опирается на:
.pbf).png, .jpg)Если хотя бы один из этих ресурсов загружается по HTTP на HTTPS-странице, результатом становится:
MapLibre GL JS использует объект source в стиле, где
задаются URL-адреса:
{
"type": "vector",
"tiles": ["https://tiles.example.com/{z}/{x}/{y}.pbf"]
}или
{
"type": "raster",
"tiles": ["https://tiles.example.com/{z}/{x}/{y}.png"]
}Все URL-адреса источников должны соответствовать требованиям:
Даже если браузер не блокирует HTTP напрямую, MapLibre GL JS может столкнуться с отказом в доступе к ответу из-за CORS preflight или политики opaque responses.
HTTPS решает только транспортную безопасность. Для работы MapLibre GL JS этого недостаточно, поскольку библиотека выполняет запросы к сторонним доменам.
Каждый сервер тайлов должен возвращать:
Access-Control-Allow-Origin: * или конкретный
доменОсобенно критично это для:
.pbf font stacks)Без CORS даже HTTPS-ресурс будет недоступен для WebGL-рендеринга, так как браузер не позволит передать бинарные данные в графический контекст.
Стиль MapLibre GL JS — это JSON-документ, который может быть загружен через:
map.setStyle("https://example.com/style.json");или встроен локально.
При загрузке стиля по HTTP на HTTPS-странице браузер блокирует запрос. Это приводит к полной невозможности инициализации карты, так как стиль является корневой точкой графа зависимостей:
Если стиль не загружен, MapLibre GL JS не может построить render tree.
WebGL сам по себе доступен и в HTTP-контексте, но в связке с сетевыми ресурсами возникают ограничения:
toDataURL, getImageData)
может быть ограниченMapLibre GL JS активно загружает тайлы как текстуры WebGL, поэтому любые ограничения приводят к визуальным артефактам или ошибкам компиляции шейдеров при загрузке ресурсов.
Исключением из HTTPS-правил является localhost.
Браузеры считают следующие источники безопасными:
http://localhosthttp://127.0.0.1http://[::1]Это позволяет разрабатывать MapLibre GL JS приложения без HTTPS, но с важными ограничениями:
При переносе в production любые HTTP-зависимости становятся критическими ошибками.
При самостоятельном хостинге тайловых серверов (например, vector tiles из собственного пайплайна) HTTPS становится обязательным для корректной интеграции в MapLibre GL JS.
Типичная архитектура:
Ключевые требования:
Редиректы могут замедлять загрузку тайлов, так как MapLibre GL JS делает большое количество параллельных запросов при движении карты.
В HTTPS-контексте становится доступным Service Worker слой, который часто используется для:
MapLibre GL JS не требует Service Worker напрямую, но в реальных приложениях он критически влияет на производительность.
Без HTTPS Service Worker недоступен, что лишает приложение возможности:
На практике нарушения HTTPS-правил приводят к типовым ошибкам:
Mixed Content: The page was loaded over HTTPS but requested an insecure resourceBlocked by CORS policyFailed to load resource: net::ERR_BLOCKED_BY_CLIENTОсобенно коварны ситуации, когда карта загружается, но отдельные слои остаются пустыми из-за блокировки glyph или sprite endpoint.
HTTPS не только ограничение, но и фактор производительности:
MapLibre GL JS выполняет десятки и сотни параллельных запросов при перемещении карты, поэтому стабильное HTTPS-соединение напрямую влияет на плавность взаимодействия.
Корректная конфигурация MapLibre GL JS-проекта предполагает:
Такая архитектура обеспечивает предсказуемую загрузку всех слоёв карты и стабильную работу WebGL-рендеринга даже при высокой нагрузке и частом взаимодействии пользователя с картой.