Subresource Integrity für Shopware 6

<!-- Twig-Template: SRI für externe Payment-Scripts -->
<!-- Resources/views/storefront/base.html.twig -->

{% block base_script_hmr %}
    {% sw_include '@Storefront/storefront/page/checkout/payment-scripts.html.twig' %}
{% endblock %}

<!-- payment-scripts.html.twig -->
<script
    src="https://js.stripe.com/v3/"
    integrity="sha384-[HASH-HIER-EINFÜGEN]"
    crossorigin="anonymous"
></script>

<!-- Für PayPal SDK -->
<script
    src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID"
    integrity="sha384-[HASH-HIER-EINFÜGEN]"
    crossorigin="anonymous"
    data-csp-nonce="{{ sw_csrf('') }}"
></script>

# SRI-Hash für eine externe Datei generieren
curl -s https://js.stripe.com/v3/ | \
  openssl dgst -sha384 -binary | \
  openssl base64 -A

# Ergebnis als integrity-Attribut verwenden:
# integrity="sha384-[ERGEBNIS]"

# Mehrere Hashes für Fallback (SHA-256 + SHA-384)
# Nützlich für schrittweise Migration
FILE_URL="https://js.stripe.com/v3/"
SHA256=$(curl -s $FILE_URL | openssl dgst -sha256 -binary | openssl base64 -A)
SHA384=$(curl -s $FILE_URL | openssl dgst -sha384 -binary | openssl base64 -A)
echo "integrity=\"sha256-$SHA256 sha384-$SHA384\""

// Build-Pipeline: SRI-Hashes automatisch generieren
// webpack.config.js im Custom Theme

const SriPlugin = require('webpack-subresource-integrity');

module.exports = {
    plugins: [
        new SriPlugin({
            hashFuncNames: ['sha384'],
            enabled: process.env.NODE_ENV === 'production',
        }),
    ],
    output: {
        crossOriginLoading: 'anonymous',
    },
};