Сбой подключения к websocket после добавления политики безопасности контента в nginx

Поскольку каждое подключение к websocket начинается с обычного http-запроса, вы должны добавить CSP для https://your-websocket-server-domain:port

На http-запрос будет получен ответ с 101: swtiching protocols и тогда соединение станет подключением к WebSocket.

Обратите внимание, что я не думаю, что директива ws: или wss: csp вообще требуется.

У вас есть 3 проблемы:

1. Ошибки консоли, которые вы показали, не связаны с CSP. "403 Запрещено" означает, что у вас нет доступа к соответствующему URL. "" Параметры X-кадра " для "запретить" означает, что вы пытаетесь внедрить iframe, но эта страница запрещает встраивание через X-Frame-Options: "DENY" HTTP-заголовок.

2. Неправильный формат Nginx add_header. Это должно выглядеть так (обратите внимание на цитаты - always ключевое слово должно быть выведено из настроек CSP):

   add_header Content-Security-Policy "default-src 'self'..." always;

3. Неправильный формат хост-источников CSP. Хост-источники, такие как .youtube.com не должно содержать ведущего . точка:
   youtube.com позволит загружать ресурсы с http(ов)://youtube.com и *.youtube.com позволит использовать ресурсы из поддоменов youtube.com.

Таким образом, ваш синтаксически правильный CSP должен выглядеть следующим образом:

add_header Content-Security-Policy "\
default-src 'self' 'unsafe-inline' https://stackpath.bootstrapcdn.com\
https://fonts.googleapis.com infobip.com ws://infobip.com wss://infobip.com youtube.com\
https://cdn.jsdelivr.net http://www.w3.org;\
connect-src 'self' infobip.com wss://infobip.com ws://*.infobip.com\
wss://livechat-fr.infobip.com/chat/web/proxy/ https://doubleclick.net;\
img-src 'self' data: https://openstreetmap.org;\
" always;

Обратите внимание, что:

• wss://livechat-fr.infobip.com/чат/веб/прокси/492/hybzmnjl/websocket - не указывайте жирный путь-часть CSP, потому что он меняется каждый раз.
• Схема-источники, такие как wss: охватывает любые хост-источники с этой схемой (например, wss://site.com/websocket). Поэтому я удалил исходники схемы и оставил исходники хоста.
• Я удалил некоторые неподдерживаемые источники, например 'unsafe-inline' в connect-src.
• Nginx должен поддерживать обратную косую черту \ как разрыв строки, поэтому я использовал его, потому что трудно поддерживать CSP в одной строке. Проверьте, поддерживает ли ваша версия Nginx эту функцию.

Примечание 2: Этот CSP может блокировать некоторые источники - просто добавьте их в соответствующие директивы.

Примечание 3: Рассмотрите возможность переноса источников из default-src директива для script-src + style-src + font-src директивы. Потому что сейчас ты действительно позволяешь 'unsafe-inline' в scrit-src таким образом, ваш CSP не защищает от XSS. В будущем также будет сложно управлять CSP, поскольку источники смешаны в одной директиве.