Как настроить Content-Security-Policy для веб-работников для работы в Edge / Safari?

Question

Я получаю код ошибки: 18, SecurityError от Edge и Safari, когда пытаюсь использовать Web Worker.Однако в Firefox / Chrome все хорошо.Я использую встроенный рабочий, которому я передаю функции обработки данных с нулевой зависимостью.

Мой CSP выглядел:

add_header Content-Security-Policy "default-src 'self'; worker-src 'self' 'inline' *.example.com";

Я могу добавить другие хорошие объекты, такие как локальные таблицы стилей иgoogleapis.com самостоятельно, но мне любопытно, как заставить Worker не выдавать ошибку безопасности

Фрагмент из рабочий метод

// Create an "inline" worker (1:1 at definition time)
    const worker = new Worker(
        // Use a data URI for the worker's src. It inlines the target function and an RPC handler:
        'data:,$$='+asyncFunction+';onmessage='+(e => {
            /* global $$ */

            // Invoking within then() captures exceptions in the supplied async function as rejections
            Promise.resolve(e.data[1]).then(
                v => $$.apply($$, v)
            ).then(
                // success handler - callback(id, SUCCESS(0), result)
                // if `d` is transferable transfer zero-copy
                d => {
                    postMessage([e.data[0], 0, d], [d].filter(x => (
                        (x instanceof ArrayBuffer) ||
                        (x instanceof MessagePort) ||
                        (x instanceof ImageBitmap)
                    )));
                },
                // error handler - callback(id, ERROR(1), error)
                er => { postMessage([e.data[0], 1, '' + er]); }
            );
        })
    );

Edge throwsэта ошибка для работника:

  [object DOMException]: {code: 18, message: "SecurityError", name: 
    "SecurityError"}
    code: 18
    message: "SecurityError"
    name: "SecurityError"

Answer 1

Я не уверен, почему URL-адрес данных вызывает ошибку безопасности, но вы можете использовать URL.createObjectURL для загрузки рабочего скрипта, который, кажется, работает правильно в Edge (я не тестировал его в Safari).

Вот как это будет выглядеть:

// Create the worker script as a string
const script = '$$='+asyncFunction+';onmessage='+(e => {
        /* global $$ */

        // Invoking within then() captures exceptions in the supplied async function as rejections
        Promise.resolve(e.data[1]).then(
            v => $$.apply($$, v)
        ).then(
            // success handler - callback(id, SUCCESS(0), result)
            // if `d` is transferable transfer zero-copy
            d => {
                postMessage([e.data[0], 0, d], [d].filter(x => (
                    (x instanceof ArrayBuffer) ||
                    (x instanceof MessagePort) ||
                    (x instanceof ImageBitmap)
                )));
            },
            // error handler - callback(id, ERROR(1), error)
            er => { postMessage([e.data[0], 1, '' + er]); }
        );
    });

// Create a local url to load the worker
const blob = new Blob([script]);
const workerUrl = URL.createObjectURL(blob);
const worker = new Worker(workerUrl);

Дайте мне знать, если вам нужны какие-либо разъяснения!