CSP Integratie in Magento 2 voor MyWin

Samenvatting

Hieronder vind je een volledige en duidelijke instructie voor het integreren van een Content Security Policy (CSP) whitelist in Magento 2, specifiek gericht op het toevoegen van een SaaS-oplossing zoals MyWin. Hiervoor moet een Magento module worden aangemaakt.

Ontwikkelaar(s)	@Laurens Bloemert
Versie documentatie	Klik hier

Instructies

Stap 1: Creëer een basis module, hiervoor zijn verschillende bestanden nodig en mappen nodig.

Als voorbeeld gebruiken wij de module naam: MyCompany_MyCsp, deze kan naar eigen inzicht aangepast worden.

Maak de volgende mappen structuur aan:

app/code/MyCompany/MyCsp/

Maak in app/code/MyCompany/MyCsp/ het volgende bestand aan: registration.php

<?php

declare(strict_types=1);

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'MyCompany_MyCsp',
    __DIR__
);

Maak in app/code/MyCompany/MyCsp/etc/ het volgende bestand aan: module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="MyCompany_MyCsp"/>
</config>

Stap 2: Voeg je CSP whitelist toe

Bestand aanmaken:

app/code/MyCompany/MyCsp/etc/csp_whitelist.xml

Inhoud voorbeeld (MyWin integratie):

<?xml version="1.0" encoding="UTF-8"?>
<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
               xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
    <policies>
        <policy id="script-src">
            <values>
                <value id="mywin-popup-app" type="host">https://pop-up.mywin.app</value>
                <!-- Optioneel: Alleen als inline JS gebruikt wordt -->
                <!-- <value id="mywin-script-unsafe-inline" type="directive">'unsafe-inline'</value> -->
            </values>
        </policy>

        <policy id="style-src">
            <values>
                <value id="mywin-styles" type="host">https://pop-up.mywin.app</value>
                <!-- Optioneel: Alleen als inline styles gebruikt worden -->
                <!-- <value id="mywin-style-unsafe-inline" type="directive">'unsafe-inline'</value> -->
            </values>
        </policy>

        <policy id="img-src">
            <values>
                <value id="mywin-img" type="host">https://pop-up.mywin.app</value>
            </values>
        </policy>

        <policy id="connect-src">
            <values>
                <value id="mywin-api" type="host">https://api.mywin.app</value>
            </values>
        </policy>
    </policies>
</csp_whitelist>

Stap 3: Module activeren

php bin/magento setup:upgrade

Stap 4: Cache legen en testen

Voer de volgende commando’s uit na het toevoegen of wijzigen van CSP:

bin/magento cache:flush

Herlaad je storefront, open de developer console (F12) en kijk naar eventuele CSP-violations in het "Console" of "Network" tabblad.

Stap 5: (Optioneel) CSP report-only mode activeren

Wil je eerst zien wat er geblokkeerd wordt, zonder het daadwerkelijk te blokkeren?

bin/magento config:set csp_mode report_only

Flush de cache: