README.md

Usage

If you need to add more items to the CSP go to the line 36 and add more items inside the object.

Here I used as an example the font-src. In this case I just needed to add 1 more URL, so I added a string to the font-src key.

If you need to add more than 1 item you can use the value as an array. Also, if you need to add more keys, just add it to the object, like this:

updateContentSecurityPolicy(definitions, {
    'font-src': ['use.typekit.net', 'url-3', 'url-3'],
    'frame-src': '*.youtube.com'
});

Note

After any changes on this file, you need to restart your server

local-intercept.js

function localIntercept(targets) {
    const builtins = targets.of('@magento/pwa-buildpack');

    /**
     * Add more options to the content security policy
     * This example shows how to add a new font-src
     * the use.typekit.net is the domain used by adobe fonts
     */
    const updateContentSecurityPolicy = (definitions, values) => {
        const securityHeaders = definitions['veniaSecurityHeaders'].inline;
        const contentSecurityPolicy = securityHeaders['content-security-policy'].template.default.inline;
        const parsed = contentSecurityPolicy.split('; ').reduce((current, next) => {
            const [key, ...value] = next.split(' ');
            current[key] = value;

            return current;
        }, {});

        const newValuesEntries = Object.entries(values);
        newValuesEntries.forEach(([key, value]) => {
            const v = Array.isArray(value) ? value : [value];
            parsed[key] = [
                ...parsed[key],
                ...v
            ];
        });

        securityHeaders['content-security-policy'].template.default.inline = Object.entries(parsed)
            .map(([key, values]) => {
                return [key, values.join(' ')].join(' ')
            })
            .join('; ');
    }

    builtins.transformUpward.tapPromise(async definitions => {
        updateContentSecurityPolicy(definitions, {
            'font-src': 'use.typekit.net'
        });
    });
}

module.exports = localIntercept;