Refused to frame because an ancestor violates the following Content Security Policy directive:

Question

I am facing a problem integrating the Checkout Plus payment gateway in my laravel application. While executing the JS code I am facing an error of CSP.

Refused to frame 'https://test.payu.in/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.facebook.com payments.np.flydubai.com *.instagram.com *.meta.com *.myshopify.com".

I tried to add the following headers on the page

<?php 

header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Max-Age: 86400');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header('X-Frame-Options', 'ALLOW FROM *');
header("Content-Security-Policy: frame-ancestors 'self' *.payu.in *.facebook.com payments.np.flydubai.com *.instagram.com *.meta.com *.myshopify.com *.payubiz.in *.payumoney.com *.google.com https://test.payu.in/; frame-src 'self' *.payu.in *.google.com https://test.payu.in/;");

Also tried same to add via middleware but the error is same every time.

Answer 1

Like mentioned in the comments, owner of test.payu.in is the only one who can change the headers. You can't change that behaviour on your end.

If you're using iframes, you should check the official documentation on handling iframes.