I'm embedding an iFrame to an external payment-provider, after the user completes their step the user gets redirected to my domain. I'm now trying to redirect the parent page to another page located on my domain like so:
iFrame embedded on mydomain.com
<iframe src="example.com/payment" sandbox="allow-top-navigation allow-forms allow-scripts"></iframe>
Code to redirect the parent page
window.top.location.href = "mydomain.com";
On Safari in iOS I'm now getting: SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.
Is this the expected behavior even though I used allow-top-navigation in my sandbox parameter? If so, are there any existing workarounds?
I found the answer myself. My iframe sandbox attribute was missing the: allow-same-origin Parameter
Working Example
<iframe src="example.com/payment" sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"></iframe>
Explanation
From what I understand the problem was the redirect of: example.com/payment to mydomain.com this gets prevented by some browsers. Sadly I found no clear explanation on why this particular redirect is prevented. It seems to be related to: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy