In an application I am working on, there is a page which has a bunch of iframes on it that contain page previews for pages in the user's project, organized by sections. A user can click to add a new page and put in details of that page.
The problem is that if they use the browser back button to return to the page with all the iframes, the page that they just added shows the incorrect content. I see this in Firefox and Safari. In Chrome, when hitting back, it doesn't even seem to add the new iframe until refreshing.
I have re-created this issue as a standalone simple project at https://iframeissue.infinityfreeapp.com/ - if you click to add a page to section one, give it a unique name, then hit the back button, you can see the mismatch between the iframe URL in the src attribute, and the loaded page URL. For this re-creation it simply shows the URL the iframe is loading on the main page (which can be verified with inspect element) and the page loaded in the iframe just echos $_SERVER['REQUEST_URI']
I do not believe there is an issue with any of the code (although I'm hoping there is something I can add that fix the problem), as it is very straightforward, and the issue occurs outside of the code. You can view the source code for each file involved at https://iframeissue.infinityfreeapp.com/viewsource.php and I have also included the code for each file at the end of this post.
The application is PHP based, but my hunch is that this is not a PHP issue.
I have no idea why this is happening or how to prevent it, and would appreciate any help!
Code:
index.php
<?php
session_start();
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache, no-store");
$jsonFile=__DIR__ . '/jsons/' . session_id() . '.json';
if (!file_exists($jsonFile)) {
file_put_contents($jsonFile, file_get_contents(__DIR__ . '/pages.json'));
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>IFrame Issue</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Add a page to a section, then hit back. After you hit back, you will notice that the URI of the iframe does not match
the URI of the page it loads. If you refresh, it will be correct.</p>
<p>A new set of pages is created per PHP session so that multiple people looking at this issue don't affect each other.</p>
<p><a href='viewsource.php'>View Source Code for all files</a></p>
<div id="pages">
<?php
$pages = json_decode(file_get_contents($jsonFile));
foreach ($pages as $section => $sectionPages) {
print "<div class='section-wrapper'><h1>$section <button class='add-page' onclick='addPage(\"$section\")'>Add Page</button></h1><div class='sectionPages'>";
$pos = 0;
foreach ($sectionPages as $title) {
$pos++;
print "<div class='page' id='page-$pos'>Loading : page.php?t=" . microtime(true) . "&page=" . urlencode($title) . "<br><iframe src='page.php?t=" . microtime(true) . "&page=" . urlencode($title) . "'></iframe></div>";
}
print "</div>\n";
}
?>
</div>
<script src="index.js"></script>
</body>
</html>
page.php
<?php session_start();
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Page</title>
</head>
<body>
<?php echo "Loaded URI ".$_SERVER['REQUEST_URI']; ?>
</body>
</html>
add.php
<?php
session_start();
$jsonFile=__DIR__.'/jsons/' . session_id() . '.json';
$curr=json_decode(file_get_contents($jsonFile), true);
if (isset($_GET['section']) && isset($_GET['title']) && isset($curr[$_GET['section']])) {
$curr[$_GET['section']][] = $_GET['title'];
$res=file_put_contents($jsonFile, json_encode($curr));
$message='Page "'.$_GET['title'].'" has been added to section "'.$_GET['section'].'". Hit back on the browser now to see the issue.';
}
else {
$message='Invalid Request';
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Add</title>
</head>
<body>
<p><?php echo $message; ?></p>
</body>
</html>
index.js
function addPage(section) {
const title=prompt("Please enter a name for the page");
location.href="add.php?section="+encodeURIComponent(section)+"&title="+encodeURIComponent(title);
}
style.css
.sectionPages {
display: flex;
gap: 20px; }
.page {
background: #fdfdfd;
padding: 10px;
border: 1px solid #616161;
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 10px; }
pages.json (copied for each new session)
{"section 1":["section 1, page 1","section 1, page 2","section 1, page 3"],"section 2":["section 2, page 1"],"section 3":["section 3, page 1"]}
