Setting CORS headers

Kirby 3 Questions šŸ¤”
1

I donā€™t know if this belongs here but I am a little desperate so I hope someone can help me. I have created a website where someone else is loading all kinds of scripts via google tag manager. On these scripts (mainly from facebook) the same error message keeps coming up in my console: ā€œhas been blocked by CORS policy: No ā€˜Access-Control-Allow-Originā€™ header is present on the requested resource.ā€

Now I understand that this is because you have to allow the server to load recourses from other sites but it is not entirely clear to me how to do this in Kirby. After doing some research I added the below at the bottom of my .htaccess file. Unfortunately without any luckā€¦

<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type, XMLHttpRequest"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
</IfModule>

In an older topic I read something about adding it to the index.php so I also tried this without succes:

<?php
header("Access-Control-Allow-Origin: *");

require 'kirby/bootstrap.php';

echo (new Kirby)->render();
2

If you are seeing the errors in the console on your site, the headers shouldnā€™t be sent from your server. The errors you are seeing are because something on your site is trying to access a resource on another server which isnā€™t permitting it.

Itā€™s the server that hosts the requested resource which has to permit the access. Not yours.

Example:

on your webpage afplaktape.com, you serve this:

<script src="https://example.com/script.js"></script>

This loads the script from example.com and runs it on your website.

https://example.com/script.js contains this:

fetch('https://example.com').then(r => console.log(r.status));

This throws an error on your site because not even https://example.com/script.js has access to https://example.com if itā€™s running on afplaktape.com. Unless, example.com sends an Access-Control-Allow-Origin: afplaktape.com header. But it canā€™t be up to afplaktape.com to decide whether content running on afplaktape.com has access to example.com or not.

1 Like
3

Thanks! Not sure if I fully understand but let me try:
The errors that are shown in the console (in this case from Facebook) are there because a script is trying to access the content of another script on the facebook server but since my server is in between these requests, the script is not allowed to access it?

4

Any script that runs on your website, no matter from where it comes from, has only access to your website (or the websiteā€™s ā€œoriginā€, to be precise).

The point of this restriction (itā€™s called the ā€œSame Origin Policyā€) is to prevent the most egregious XSS attacks.

Think, for example, you own the website bankybank.com.
You donā€™t want your logged in users visiting baddywebsite.com to make requests to bankybank.com/api/transfer-all-my-money-please, or at least it should be up to you to allow it via CORS headers, not up to baddywebsite.com.

The same is valid for facebook. Itā€™s up to facebook to allow other websites to access their resources. Think if any website could just fetch stuff from ā€œfacebook.com/meā€.

1 Like