CORS stands for Cross-Origin Resource Sharing(MDN). This is a security policy that is built into browsers to protect the user. In simple terms, this means that a website cannot simply (re)load external resources that do not belong to its own domain or are explicitly permitted.
Example #
Your own congregation website is available at https://my-congregation-website.uk/ . All resources, CSS, JS or images are delivered from this domain. In other words, the header image, for example, can be viewed via the URL https://my-congregation-website.uk/header.jpg. In this case, the browser allows the header image to be loaded because the domain is the same.
If the website attempts to load data from ChurchTools, e.g. to display the pastor’s contact details, the API https://my-congregation.church.tools/api/persons/1 must be called. There are two scenarios that need to be distinguished here:
Backend call #
If your congregation website retrieves the contact data via the ChurchTools API using your own server (PHP, NodeJS, etc.), there are no problems. The call is declared as secure because it is your own server and nobody else has access to it.
Front-end call #
If the ChurchTools API is called via the frontend (Vanilla JS, jQuery, Angular, Vue or using HTML tags), the browser checks whether loading is permitted. The browser does this so that the user does not load third-party content that an attacker may have planted on them. The browser therefore asks ChurchTools whether your website with the domain meine-gemeinde-website.de has permission to load this data.
This is not allowed by default. This means that the API call will fail and no data will reach the website.
Set CORS header #
In order for the API call to succeed via the frontend, ChurchTools must send certain CORS headers in the response, which explicitly list all websites that are allowed to execute this call.
You can set and manage the permitted URLs, also known as Access Control Allow Origins (4), in the system settings (1) under Integrations (2) > Cross-Origin Resource Sharing (3).
