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

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/v2/chargebee.js;

frame-src

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