Handle CORS and allow assets to be loaded in externally hosted iframe

On our site loads a payment form in an iframe hosted by another service. The service allows us to supply custom fonts and CSS to the payment form via @import and @font-face.

I’ve tried doing this, but:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.fortomorrow.eu/assets/common/font/CentraNo2-Medium.woff2. (Reason: CORS header 'Access-Control-Allow-Origin' does not match 'secure.fundraisingbox.com').

I’ve already added the following to our netlify.toml:

	for = "*"
		Access-Control-Allow-Origin = "secure.fundraisingbox.com"

I guess I’ve made syntax error? How would I allow this other website to load assets from our site at Netlify? I wouldn’t want to allow all sites to hot link our assets.

I don’t see any iframe on that page.

Sorry I only now see your reply! The iframe appears in the modal that is shown when you click the ‘Jetzt bezahlen’ button on that page.

To make debugging easier, I’ve set up this Codepen.

I’ve changed my netlify.toml to include this instead of the previous headers:

	for = "/*"
		Access-Control-Allow-Origin = "https://codepen.io/kslstn/pen/zYyzqKj"

I saw some examples with ‘https’ in the value for Access-Control-Allow-Origin and some without. I’m also not sure if wild cards are allowed or necessary for the path. That’s why I included the full path. Oddly (even in fullscreen mode, where the URL is exactly the one in the setting), the errors say things like:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.fortomorrow.eu/assets/common/css/style.css. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://codepen.io/kslstn/pen/zYyzqKj’).

Now I’m still trying to wrap my head around CORS, but isn’t that a weird error considering that ‘Access-Control-Allow-Origin’ equals ‘https://codepen.io/kslstn/pen/zYyzqKj’?

@hrishikesh because I took so long to respond, this probably disappeared from your radar, but perhaps you can take another look at it?

Hi, @Koooos. Our support team can assist you with creating header rules if there are questions about how to do so. What we cannot assist you with is determining what headers are the correct headers to create. We need you to tell us that information and not the other way around.

Our support team is here to provide technical support for Netlify’s services and the code we write. Determining what the correct CORS headers should be for you site is something specific to your site and the code you write. For this reason, our support team cannot tell you what the correct of best CORS header should be.

To summarize, we can assist with questions about how to create these headers on Netlify but you need to tell us what headers you want to make.

Now, someone else on this support forum may have the resources to answer the question about what CORS headers you should create so you are free to ask that question here. I just wanted to be clear what our support team can and cannot do to assist here.

Do you know what headers you want to create?