Workflow WebhooksWorkflow Webhooks
CORS, die Proxy-URL der App und Browser-Aufrufe

CORS, die Proxy-URL der App und Browser-Aufrufe

Seite kopieren

Webhooks in Shopify Flow vom Browser aufrufen: CORS aktivieren, die App-Proxy-URL auf der Shop-Domain nutzen und Token-Risiken im Frontend verstehen.

Ein Webhook wird normalerweise von Server zu Server aufgerufen. Wenn Sie einen Webhook von einem Browser aus aufrufen möchten - beispielsweise von Ihrer Storefront, einer Landingpage oder einem Kundenportal, sind zwei Einstellungen entscheidend: „CORS aktivieren“ und „App-Proxy-URL verwenden“. Beide finden Sie in den „Erweiterten Einstellungen“ des Webhooks.

CORS aktivieren

Browser lehnen eine domänenübergreifende Anfrage ab, sofern der empfangende Server nicht angibt, dass diese zulässig ist. Aktivieren Sie die Option** „CORS aktivieren**“, damit der Webhook auf die Vorababfrage des Browsers antwortet und den Aufruf akzeptiert.

Die Vorabprüfung lässt zudem jeden beliebigen Header zu, der Ihr Token enthält, einschließlich eines von Ihnen selbst festgelegten benutzerdefinierten Headernamens, sodass ein Browser nicht darüber stolpert.

App-Proxy-URL verwenden

Jeder Webhook verfügt über zwei Adressen, die beide unter den URL-Einstellungen mit einer Schaltfläche zum Kopieren angezeigt werden:

URL Es sieht so aus, als ob Anmerkungen
Direkte App-URL unsere App-Domain, die mit dem Code des Webhooks endet Funktioniert stets, auch in Entwicklungsumgebungen und in passwortgeschützten Shops
URL des App-Proxys ein Pfad auf der eigenen Domain des Shops Gleiche Herkunft wie Ihre Storefront, sodass der Browser dies als First-Party-Anfrage behandelt

Aktivieren Sie die Option** „App-Proxy-URL verwenden“**, um die Proxy-Adresse zu veröffentlichen. Dies lässt sich nahtloser in die Storefront integrieren, und da es sich um denselben Ursprung handelt, benötigen Sie oft gar kein CORS.

Was Sie vor dem Einschalten beachten sollten:

  • Die Storefront muss erreichbar sein. Bei einem passwortgeschützten Shop, wie beispielsweise einem Entwicklungsshop, gibt die Proxy-URL erst nach Eingabe des Storefront-Passworts eine Antwort, sodass Aufrufer außerhalb Ihres Shops diese dort nicht nutzen können.
  • Die IP-Zulassungslisten gilt nicht für die Proxy-URL: Diese Anfragen erreichen uns über die Server von Shopify, sodass deren Adresse keine Rückschlüsse auf den ursprünglichen Absender zulässt.
  • Shopify signiert jede Anfrage über die Proxy-URL. Sie können dies nutzen, um den Aufruf des Webhooks ausschließlich angemeldeten Kunden zu gestatten, die direkte URL zu deaktivieren und die Kunden-ID in Shopify Flow abzurufen: siehe Angemeldete Kunden in Ihrer Storefront.

Die Authentifizierung funktioniert bei beiden Adressen auf dieselbe Weise. Gleiches gilt für Schutz vor doppelten Lieferungen, den Verlauf und das Planlimit.

Benutzerdefinierten Anfragetext zulassen

Ebenfalls in den erweiterten Einstellungen: Die Option „Benutzerdefinierten Anfragetext zulassen“ deaktiviert die strenge Validierung des Anfragetextes, sodass der Webhook jede beliebige JSON-Struktur akzeptiert und nicht nur die von Ihnen zugeordneten Felder. Verwenden Sie diese Option, wenn die Payload des Absenders dynamisch ist oder Sie keine Kontrolle darüber haben. Zugeordnete Felder gelangen weiterhin auf die gleiche Weise in Shopify Flow - siehe Zuordnung der Payload-Daten und Flow-Variablen.

Verwandte Themen