Hosted Pages Chargebee JS

“Blocked autofocusing on a element in a cross-origin subframe” due to CSP headers

Modified on: Wed, 10 May, 2023 at 2:45 PM

This article covers

How do I set the Content Security Policy (CSP) headers?

How do I narrow down the restrictions as much as possible using the CSP headers? 

 

Summary

 

 follow the instruction from the link given below:

 Content security policy for the Checkout page 

script-src https://js.chargebee.com/;

frame-src https://site-test.chargebee.com;

style-src https://site-test.chargebee.com/assets/hp_v3/iframe_views/

But as a result, You can see more errors from the Chrome developer console when opening the Chargebee portal.  Please see the screenshot:

 

Solution

In CSP headers you have currently only included Chargebee

  • If you are using any gateway, eg: Cybersource gateway, the URL will get blocked because the Cybersource CSP headers aren’t being set as well, so you would need to include Cybersource headers

  • In addition to that you may need to modify your Chargebee CSP headers as laid out below:

frame-src: should always be *
script-src: depending on which payment gateway you're using, you will have to configure the CSP policy from the respective gateway
style-src: *.chargebee.com & payment gateway CSP policy







 


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.
×