Content Security Policy и ONNX Runtime Web

Content Security Policy (CSP) — механизм веб-безопасности, позволяющий ограничивать источники загрузки скриптов, стилей, изображений и других ресурсов. CSP предотвращает выполнение нежелательного кода, что критично при работе с клиентскими библиотеками машинного обучения, такими как ONNX Runtime Web (ORT Web), поскольку модели могут загружаться динамически и выполняться в браузере.

Основные принципы работы CSP

CSP формируется с помощью HTTP-заголовка Content-Security-Policy или мета-тега <meta http-equiv="Content-Security-Policy" content="...">. В заголовке указываются директивы, контролирующие источники ресурсов:

script-src — определяет, откуда могут загружаться и выполняться скрипты.
style-src — ограничивает загрузку CSS.
img-src — задает источники изображений.
connect-src — определяет допустимые источники для XHR, fetch и WebSocket.
worker-src и child-src — контролируют загрузку Web Worker, что важно для ORT Web при использовании многопоточности.

CSP и динамическая загрузка моделей

ONNX Runtime Web часто использует WebAssembly (WASM) и Web Workers для выполнения моделей. Это накладывает требования на CSP:

script-src: разрешение выполнения inline-скриптов должно быть запрещено ('unsafe-inline' не рекомендуется). Вместо этого все скрипты ORT Web подключаются через внешние файлы.
connect-src: загрузка ONNX-моделей через fetch требует указания источника, откуда разрешено брать файлы .onnx.
worker-src: для Web Workers нужно разрешить загрузку скриптов из доверенных источников.

Пример директивы для безопасного запуска ORT Web:

Content-Security-Policy: 
  default-src 'self'; 
  script-src 'self' https://cdn.jsdelivr.net; 
  connect-src 'self' https://models.example.com; 
  worker-src 'self' blob:;

В этом примере:

Скрипты ORT Web могут загружаться с собственного хоста и CDN.
Модели загружаются с доверенного сервера.
Для Web Workers разрешено использование blob:, что необходимо для динамического создания рабочих потоков из кода WASM.

Особенности работы WebAssembly

ORT Web использует WASM-модули, загружаемые через fetch. Для корректной работы CSP должны быть учтены следующие моменты:

script-src не влияет на WASM напрямую, но влияет на скрипты, создающие WebAssembly-инстансы.
worker-src должен разрешать использование blob:, так как ORT Web часто инстанцирует воркеры динамически.
connect-src должен включать URL загрузки .wasm и .onnx файлов, иначе загрузка модели заблокируется.

Пример конфигурации для загрузки модели и WASM из CDN:

Content-Security-Policy: 
  default-src 'self'; 
  script-src 'self' https://cdn.jsdelivr.net; 
  connect-src 'self' https://cdn.jsdelivr.net https://models.example.com; 
  worker-src 'self' blob:;

Проблемы при строгой CSP

Строгие политики могут приводить к ошибкам при инициализации ORT Web:

Refused to load script — скрипты библиотеки заблокированы.
Refused to connect — модели или WASM-файлы не могут быть загружены.
Refused to create worker — Web Worker не создается из-за ограничений worker-src.

Для устранения этих ошибок важно:

Явно указывать все источники скриптов и моделей.
Использовать blob: для Web Workers.
Избегать 'unsafe-inline', вместо этого подключать все скрипты внешними файлами.

Интеграция с фронтенд-фреймворками

При использовании ORT Web в React, Vue или Angular CSP имеет дополнительные нюансы:

Бандлеры (Webpack, Vite) могут создавать inline-скрипты для инициализации приложений. В этом случае стоит использовать nonce-или hash-подписи в CSP.
Web Workers для ORT Web могут быть встроены как Blob, что требует разрешения worker-src blob:.

Пример для React + ORT Web:

Content-Security-Policy: 
  default-src 'self'; 
  script-src 'self' 'sha256-XYZ...'; 
  connect-src 'self' https://models.example.com; 
  worker-src 'self' blob:;

Здесь 'sha256-XYZ...' — хэш скрипта, сгенерированный при сборке, что обеспечивает безопасность без использования 'unsafe-inline'.