Uncaught DOMException: Blocked a frame with origin "https://our-website.com" from accessing a cross-origin frame

Question

We are trying to access our source website in a third-party client website using Iframe. As per suggestions we enabled the below conf in nginx in our source server

add_header X-Frame-Options "allow-from http://client-website.com" always;
add_header Content-Security-Policy "frame-ancestors 'self' http://client-website.com" always;

But right now the issue is , In firefox, while accesing it via client-website its working fine without any issue but for chrome and safari it giving the below error :

Uncaught DOMException: Blocked a frame with origin "https://our-website.com" from accessing a cross-origin frame.

Firefox:Version : 114.0.2 Chrome :Version 118.0.5993.70

Is there anything extra needed for chrome to make it work?

Answer 1

You have allowed http://client-website.com, while request is coming from https://client-website.com, the scheme differs.

Also, it seems like ".com" is missing for X-Frame-Options, but as you implement the frame-ancestors directive it is ignored in most browsers. It will only be used by Internet Explorer and other very old browsers.