CORS steht für Cross-Origin Resource Sharing (MDN). Das ist eine Security Policy, die in Browsern eingebaut ist, um den Nutzer zu schützen. Ganz einfach gesprochen heißt das, dass eine Webseite nicht einfach fremde Ressourcen (nach)laden kann, die nicht zur eigenen Domain gehören oder explizit erlaubt sind.
Beispiel #
Deine eigene Kirchenwebsite ist unter https://meine-gemeinde-website.de/ erreichbar. Alle Ressourcen, CSS, JS oder Bilder werden von dieser Domain ausgeliefert. Sprich, das Headerbild zum Beispiel wäre über die URL https://meine-gemeinde-website.de/header.jpg anzusehen. Der Browser erlaubt in diesem Fall, dass das Headerbild geladen wird, weil die Domain dieselbe ist.
Versucht die Webseite Daten von ChurchTools nachzuladen, um z.B. die Kontaktdaten des Pastors anzuzeigen, dann muss die API https://meine-gemeinde.church.tools/api/persons/1 aufgerufen werden. Hier gibt es zwei Szenarien, die unterschieden werden müssen:
Backendseitiger Aufruf #
Wenn deine Kirchenwebseite die Kontaktdaten über die ChurchTools API über den eigenen Server abruft (PHP, NodeJS, etc.) gibt es keine Probleme. Der Aufruf wird als sicher deklariert, weil es der eigene Server ist und hier keiner sonst Zugriff hat.
Frontendseitiger Aufruf #
Wird die ChurchTools API über das Frontend aufgerufen (Vanilla JS, jQuery, Angular, Vue oder mittels HTML Tags), dann prüft der Browser, ob das Laden erlaubt ist. Der Browser tut das, damit der Nutzer nicht fremde Inhalte lädt, die ihm ggf. ein Angreifer untergejubelt hat. Der Browser fragt also ChurchTools, ob deine Website mit der Domain meine-gemeinde-website.de die Erlaubnis hat, diese Daten zu laden.
Standardmäßig ist das nicht erlaubt. Somit wird der API-Call fehlschlagen und es gelangen keine Daten auf die Webseite.
CORS Header setzen #
Damit der API-Call über das Frontend gelingt, muss ChurchTools bestimmte CORS Header in der Antwort mitschicken, die explizit alle Webseiten auflistet, die diesen Call ausführen dürfen.
Die erlaubten URLs, auch Access Control Allow Origins (4) genannt, kannst du in den System-Einstellungen (1) unter Integrationen (2) > Cross-Origin-Ressource-Sharing (3) einstellen und verwalten.
