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

shivani_kumbhar — Tue, 21 Jan 2025 10:55:40 GMT

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.

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;" );

topic How to Allow Framing of CyberSource in iframe with CSP frame-ancestors Directive? in Integration and Testing