SecurityError: An attempt was made to break through the security policy of the user agent.

[felix-berlin]

trafficstars

Hello everyone,

we are using some of the local payment methods like for example iDEAL, Bancontact ect.

Right now it is not possible to successfully pay with one of those payment providers, braintree-web init as normal but when someone tries to pay for example with iDEAL the iFrame generated by braintree-web does fail with the following error: SecurityError An attempt was made to break through the security policy of the user agent..

The iFrame opens, but the only thing you see is an infinite loading spinner:

This behavior occurs with version 3.117.1 and 3.118.0.

[kaiserkiwi]

I have the same problem. The error happens at least in Chrome, Safari and Firefox on macOS. All have the newest version. According to our error tracking older Chrome versions and browsers on Windows and Android are affected aswell.

[vettndr]

I'm facing the same issue.

Also in development environment like localhost I'm having cors errors

[vettndr]

@kaiserkiwi @felix-berlin @ibooker hello guys, any updates?

[felix-berlin]

Hi @vettndr, not really 😔. We are in contact with the braintreee support, they are investigating directly on our staging env.

[kaiserkiwi]

We just fixed the error and were able to pin it down to our Vue 3 Update. We still were using Vue 2.7 with the Options API until April. The error was obvious only a week later so it was hard for us to know what exactly the reason was, as we deployed nothing related to it.

Anyways… The error was, that we saved our localPaymentInstance property in the data-Object from the Options API. This was no problem in Vue 2 as it was still just an object. But in Vue 3 objects in reactive properties are Proxy-Objects. And this is the reason for the security error. What we are sending to Braintree was a whole lot more complex than the object that was expected. Hence the security error.

So we converted the component to the Script Setup Composition API. The error persisted, as the localPaymentInstance was converted 1 to 1 as const localPaymentInstance = ref(null);. I changed the line to let localPaymentInstance = null; and it worked instantly.

It can be so easy sometimes. You just have to know the context. 😅

[jplukarski]

Closing since this is an issue specific to Vue