How to Allow Framing of CyberSource in iframe with CSP frame-ancestors Directive?

[shivani_kumbhar]

I'm working on embedding a page from https://apitest.cybersource.com/ in an iframe, but I'm encountering the following error:
Refused to frame 'https://apitest.cybersource.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://example.com".

It is restricting to show the div components that are replaced with  Click to Pay Drop-In UI iframes.

What I’ve Tried:

1. Adding CSP Headers in Node.js: I attempted to modify the Content-Security-Policy header in my Express.js server:

   js

   res.setHeader( 'Content-Security-Policy', "frame-ancestors 'self' https://example.com https://apitest.cybersource.com;" );