Cloudflare Worker

To add the script tag to a third-party app, by proxying website through Cloudflare, create a worker+route, with the following code:

const SCREEB_CHANNEL_ID = "<REPLACE-ME>";

export default {
    async fetch(request, env) {
        /**
         * Response properties are immutable. To change them, construct a new
         * Response and pass modified status or statusText in the ResponseInit
         * object. Response headers can be modified through the headers `set` method.
         */
        const originalResponse = await fetch(request);

        const screebToken = this.getScreebToken(env, request.url);
    
        // You might need to add some existing values here.
        // See /sdk-js/security-requirements for what each directive covers.
        // No 'unsafe-inline' anywhere: the tag is injected below as a single
        // script tag carrying data-channel-id, not as an inline snippet.
        const csp = [
            `default-src 'self'`,
            `script-src 'self' https://*.screeb.app`,
            `connect-src 'self' https://*.screeb.app wss://*.screeb.app https://*.s3.fr-par.scw.cloud`,
            `style-src 'self' https://*.screeb.app`,
            `img-src 'self' data: blob: https://*.screeb.app`,
            `font-src 'self' https://*.screeb.app`,
            `media-src 'self' blob: https://*.screeb.app`,
            `frame-src 'self'`,
            `object-src 'none'`,
            `frame-ancestors 'self' https://admin.example.com https://vip.example.com`,
            `report-uri /csp-violation-report`,
        ].join('; ');

        // Change "Content-Security-Policy" header
        const headers = new Headers(originalResponse.headers);    
        headers.set('Content-Security-Policy', csp);

        // Change response body by adding the Screeb script.
        //
        // The attribute install rather than the classic snippet: a proxy is
        // exactly the case that cannot afford an inline script, because the
        // policy it has to satisfy is the one set a few lines above. The tag
        // reads data-channel-id off its own element and initialises itself.
        const originalBody = await originalResponse.text();
        const modifiedBody = originalBody.replace('</body>', `
            <script async id="$screeb" src="https://t.screeb.app/tag.js" data-channel-id="${SCREEB_CHANNEL_ID}"></script>
            </body>`
        );
        const response = new Response(modifiedBody, {
            status: originalResponse.status,
            statusText: originalResponse.statusText,
            headers: headers
        });

        return response;
    },
};