I'm developing a project that required me to run a web application under an iframe. It's a 3 page data entry app that needs almost an hour for users to finish the pages.
- Child works perfectly when not using frames.
- However, when using Child under iframe, around 5 - 10% of our users report that they run into a blank white page when using Chrome.
- Problem randomly happened on different child page with no pattern.
- Parent and Child run on different sub domain.
- Parent frame runs on IIS ASP.NET
- Child frame runs on Apache PHP.
- Child uses jQuery with lost of dynamic content (all pre-loaded) and ajax (auto save progress).
- Child uses document.ready on every pages.
- Child be child forever (aka: never do target="_top")
- All Child assets on Child's sub domain.
- All run on plain HTTP.
- Neither flow uses same-origin policy
I tried to test it on my machines, but unfortunately after countless times, I only triggered the problem once. That one time, I had developer tool opened, and the problematic page was successfully loaded (HTTP 200 / 250ms / No JS error), but browser didn't display it. It was just pure white blank page. I then tried to check the computed css to see if something went wrong. When I click the Element tab under developer tool, the content just instantly shown by itself! Awakened just like poking a sleeping student in a classroom!
After that, I still couldn't trigger the problem again. And integrating these too many languages into one project is already a nightmare!
This is the code.
Parent Response Header (http://subdomain.domain.com/DataEntry.aspx)
HTTP/1.1 200 OK
Accept-Ranges: bytes
Server: Microsoft-IIS/10.0
X-UA-Compatible: IE=10,chrome=1
Date: Thu, 17 Dec 2020 06:44:46 GMT
Content-Length: 767
Content-Type: text/html
Last-Modified: Wed, 16 Dec 2020 03:47:32 GMT
ETag: "XXXXXXXXX"
Vary: Accept-Encoding
Parent HTML (http://subdomain.domain.com/DataEntry.aspx)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<iframe src="http://subdomain1.domain.com/data-entry-1.php" frameborder="0" scrolling="yes"
style="position:fixed;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
height:100%;
border:none;
margin:0;
padding:0;
overflow:hidden;
z-index:999999;"></iframe>
</body>
</html>
Child response header (http://subdomain1.domain.com/data-entry-1.php)
HTTP/1.1 200 OK
Date: Thu, 17 Dec 2020 07:06:56 GMT
Server: Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips mod_fcgid/2.3.9 PHP/7.3.9
X-Powered-By: PHP/7.3.9
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate
Pragma: no-cache
Content-Length: 4057
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
Child HTML (http://subdomain1.domain.com/data-entry-1.php)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="/data-save-1.php" method="POST">
.....
</form>
<script>
$( document ).ready(function() {
// do stuffs
});
</script>
</body>
</html>
Child Flow
GET /data-entry-1.php
POST /data-save-1.php
GET /data-entry-2.php
POST /data-save-2.php
GET /data-entry-3.php
POST /data-save-3.php
GET /finish.php
Child backend PHP (http://subdomain1.domain.com/data-save-1.php)
<?php
//saving stuffs without echoing
//302 redirect to next page
header("Location: http://subdomain1.domain.com/data-entry-2.php");
?>
At first, I suspected if the problem lies around this 302 redirect header, then I changed it to HTTP 200, but problem still exists.
<?php
//saving stuffs without echoing
//200 redirect to next page
?>
<html>
<head>
<script>
window.location.href="http://subdomain1.domain.com/data-entry-2.php";
</script>
</head>
<body>
<p style='text-align:center'>Saving Data ...</p>
</body>
</html>
Since I am a PHP guy, I do not know much about IIS and ASP.NET. At least I managed to make parent frame not using any of ASP.NET's javascript and .AXD. So I think that will not be the cause of this problem.
This is also the first time I (am forced to) use iframe in the project. Now, I'm hitting the road block. Anyone with the same experiences please help guiding me. Thank you in advanced!
