Спрятать ключ API на сервере

Есть внешние сервисы, предлагающие встраивание html или iframe на сайт. Использование сервиса авторизовано API ключом. Например, сервис JS карт Mapbox Add custom markers in Mapbox GL JS | Help | Mapbox Оно без проблем работает на фронте в блоке Embed HTML. Но в составе этого кода есть мой ключ API, который таким образом оказывается доступен кому угодно. Как возможно организовать использование такого сервиса, не передавая ключ API на фронт и используя бэк? Статические карты через сохранение картинок на сервер, конечно, работает, но это не то что надо. Направьте в нужную сторону, пожалуйста.

Простой ответ - никак.

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

Вам необходимо ограничить эти на использование с конкретными доменами, чтобы их нельзя было использовать на других вебсайтах.
Так работает API от Google (Maps, reCaptcha и др), Stripe и все остальные - один ключ для веба, второй для бэкенда.

Главное правило: все что попадает в клиенсткое приложение может быть извлечено.

Не очень понятно, как использовать эту фильтрацию по доменам на стороне Аппмастера. Если я встраиваю что-то как embedded HTML, внешний сервер видит обращение с IP вэб-клиента, ни с какого не домена или сервера. Соответственно, фильтрация не работает. При использовании iFrame запрос уходит из studio.appmaster.io. Вроде ок, но вся логика динамических карт mapbox предполагает JS, а значит html. Было бы здорово, если вы на этом примере объяснили, как можно достичь встраивания mapbox в аппмастер.

Фильтрация API ключей по доменам обычно на стороне сервиса, у кого вы берете ключ. iframe ref берется из studio.appmaster.io только если вы просматриваете iframe в редакторе, в сгенерированном приложении реф должен быть с вашего домена.

По поводу примеров @Basil_K сделай пожалуйста