I have a requirement to integrate with Plaid from a Salesforce Site page. Below is the snippet from their documentation that I am embedding to my site VF page:
(async function() {
const configs = {
token: '{!link_token}',
onSuccess: async function(public_token, metadata) {
// The onSuccess function is called when the user has successfully
// authenticated and selected an account to use.
await fetch('/get_access_token', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ public_token: public_token }),
});
},
onExit: async function(err, metadata) {
// 2b. Gracefully handle the invalid link token error. A link token
// can become invalidated if it expires, has already been used
// for a link session, or is associated with too many invalid logins.
if (err != null && err.error_code === 'INVALID_LINK_TOKEN') {
linkHandler.destroy();
linkHandler = Plaid.create({
...configs,
token: await fetchLinkToken(),
});
}
if (err != null) {
// Handle any other types of errors.
}
// metadata contains information about the institution that the
// user selected and the most recent API request IDs.
// Storing this information can be helpful for support.
},
};
var linkHandler = Plaid.create(configs);
document.getElementById('j_id0:frm:link-button').onclick = function() {
linkHandler.open();
};
})();
Link token is generated by making a callout in my apex controller. The javascript uses the token to render a webpage from plaid in an iframe. At this point, the site page opens the iframe and immediately closes it. When I add this to a simple HTML the iframe renders correctly. I have added the iframe domain as a trusted domain for my site and set Clickjack Protection Level to 'Allow framing of site or community pages on external domains (Good protection)'. I even tested by setting it to 'Allow framing by any page (No protection)' but it still exhibits same behavior. Any thoughts on what could be going wrong?