HTTP redirect in iframe instead of redirecting in the parent window

Question

I am working on a web application. In this web application I have to load a web page from a different servers(Eg: www.xyz.com) in an iframe. But sometimes when I try to load the web page from some different server in the iframe the server responds with HTTP status code 302 (stands for redirect) with the redirect link in the Location header field. When this happens the main window(my web app) is redirected instead of redirection happening only in the iframe. How can I ensure that the redirection happens only in the iframe instead of the main window?

Solution 1

Use sandbox="..."

• allow-forms allows form submission
• allow-popups allows popups
• allow-pointer-lock allows pointer lock
• allow-same-origin allows the document to maintain its origin
• allow-scripts allows JavaScript execution, and also allows features to trigger automatically
• allow-top-navigation allows the document to break out of the frame by navigating the top-level window

Top navigation is what you want to prevent, so leave that out and it will not be allowed. Anything left out will be blocked

ex.

        <iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="http://www.example.com"</iframe>

Solution 2

The issue is not about your redirection, but about what happens before: I suppose the user is submitting a form, through POST, and the webserver replies a 302 redirection as per best practice.

If a <form> has an action attribute pointing to another page, its answer will redirect the top iframe. I couldn't find any reference document stating that behavior, but that's how it works in current browsers.

The solution is to set the target attribute to _self:

<iframe>
    ...
    <form action="http..." target="_self" >
    ...
</iframe>

The sandbox attribute won't help here, you likely want to omit the attribute or to set allow-forms allow-navigation at least.

Solution 3

It works for me when I set target="iframe_name".