Встраиваемый на маркетплейс виджет (кнопка)

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

Распределительный сервер будет располагаться по адресу gway.voda-sale.ru

Получив информацию об инстансе, например vdsl.clarins.ru инициируется загрузка ресурсов виджета и первичная инициализация.

Виджет не использует iframe, а является html и js кодом встраиваемым в код целевой страницы.

В ходе работы скрипта он дополнительно загружает стили и скрипты используя fetch (все загрузки с сервера Voda с определенного инстанса).

• https://vdsl.clarins.ru/vs/main.css
• https://vdsl.clarins.ru/assets/libs/react/react.production.min.js
• https://vdsl.clarins.ru/assets/libs/react/react-dom.production.min.js
• https://vdsl.clarins.ru/vs/indexES5.js

После загрузки ресурсов устанавливается подключение по WebSocket.

Кроме этого виджет предполагает воспроизведение видео (превью консультанта), и непосредственно работу WebRTC.

Политики CSP, которые необходимо ослабить для работы виджета:

Для корректной работы виджета с распределительным сервером gway.voda-sale.ru необходимо разрешить взаимодействие с этим доменом в дополнение к конкретным инстансам (например, vdsl.clarins.ru):

• connect-src — разрешает первоначальное обращение к распределителю: https://gway.voda-sale.ru

Для корректной работы виджета (включая функции воспроизведения видео и установления WebRTC-соединений) в заголовке Content-Security-Policy или метатеге целевой страницы необходимо настроить следующие директивы (на примере инстанса vdsl.clarins.ru):

• script-src — разрешает загрузку и выполнение JS-скриптов виджета и React: https://vdsl.clarins.ru
• style-src — разрешает загрузку CSS-файлов и применение стилей, копируемых внутрь Shadow Root: https://vdsl.clarins.ru 'unsafe-inline'
• connect-src — разрешает запросы fetch, сигнальное WebSocket-соединение, а также установление WebRTC-соединений (Peer-to-Peer): https://gway.voda-sale.ru https://vdsl.clarins.ru wss://vdsl.clarins.ru
• img-src — разрешает загрузку изображений и SVG-иконок: https://vdsl.clarins.ru
• media-src — разрешает воспроизведение видео и аудиопотоков: https://vdsl.clarins.ru blob: (добавьте blob:, если медиапоток стримится динамически через MediaSource/WebRTC)
• worker-src (или script-src) — разрешает использование Web Workers (часто необходимы для многопоточной обработки WebRTC или работы видеоплеера): blob:

Пример готовой строки CSP для интеграции (с учетом gway.voda-sale.ru):

Content-Security-Policy: script-src ‘self’ https://vdsl.clarins.ru; style-src ‘self’ https://vdsl.clarins.ru ‘unsafe-inline’; connect-src ‘self’ https://gway.voda-sale.ru https://vdsl.clarins.ru wss://vdsl.clarins.ru; img-src ‘self’ https://vdsl.clarins.ru; media-src ‘self’ https://vdsl.clarins.ru blob:; worker-src ‘self’ blob:;