Search code examples
javascripthtmlgoogle-chromeiframesame-origin-policy

Why can I write to sessionStorage from an iframe on the first try, but not any consecutive tries? (Chrome Version 74)

This issue has shown up in the latest version of Chrome (74.0.3729.108). This is unique to the local filesystem, as I have other ways of loading up neighboring documents in iframes when the app is on a server.

In my app, we have been able to load up documents from the filesystem with JavaScript by writing iframes to the DOM, and then having the document in the iframe write it's innerHTML to sessionStorage. Once the iframe is done loading, we catch that with the onload attribute on the iframe and handle getting the item written to sessionStorage.

I have narrowed this down to some bare-bones code and found that this works only on the first try, and then any tries after the first fail.

Here is a minimal HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>Chrome iFrame Tester</title>
  <script src="iframe-load.js"></script>
</head>
<body onload="OnLoad()">
  <div id="result"></div>
</body>
</html>

Here is the JavaScript:

var urls = ['file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc1.html', 
            'file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc2.html'];

HandleLoad = function () {
  'use strict';

  var data;

  try {
    data = window.sessionStorage['data'];
    delete window.sessionStorage['data'];
  } catch (ignore) {
    // something went wrong
  }

  var container = document.getElementById('container');
  window.document.body.removeChild(container);

  if (data !== null && data !== undefined) {
    var resultContainer = document.getElementById('result');
    resultContainer.innerHTML += data;
  }

  if (urls.length > 0) {
    OnLoad();
  }
}

function OnLoad() {
  var url = urls[0];

  if (url) {
    urls.splice(0, 1);

    var container = document.createElement('div');
    container.id = 'container';
    container.style.visibility = 'hidden';
    window.document.body.appendChild(container);
    container.innerHTML = '<iframe src="' + url + '" onload="HandleLoad();"></iframe>';
  }
}

In the filesystem, we have the HTML written into index.html, and right next to it are two minimal HTML files, Doc1.html and Doc2.html. Their contents are both identical except the identifying sentence in the body's div:

Neighbor document HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Chrome iFrame Tester</title>
  <script>
    function OnLoad() {
      try {
        window.sessionStorage['data'] = window.document.body.innerHTML;
      } catch {
        // no luck
      }
    }
  </script>
</head>
<body onload="OnLoad()">
  <div>This is Doc 1's content!</div>
</body>
</html>

When this is run, we should see the content HTML of the two neighbor documents written to the result div in index.html.

When I run this minimal example, I can see that the content is successfully written to sessionStorage and then to the DOM for the first document, but the next try fails. What can I do to get it to work consistently, and what is happening here that it fails?

Solution

  • I'm not sure what is causing the weird behavior, so hopefully someone else can provide some insight on what exactly is going on here.

    In the meantime, here is an alternative solution using window.postMessage:

    index.html

    <!DOCTYPE html>
<html>
<head>
  <title>Chrome iFrame Tester</title>
  <script src="iframe-load.js"></script>
</head>
<body onload="OnLoad()">
  <div id="result"></div>
</body>
</html>

    iframe-load.js

    var urls = ['file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc1.html', 
            'file://C:/Users/afrench/Documents/Other/Misc%20Code/Chrome%20iFrame/Doc2.html'];

window.addEventListener('message', event => {
  'use strict';

  var data = event.data;

  var container = document.getElementById('container');
  window.document.body.removeChild(container);

  if (data) {
    var resultContainer = document.getElementById('result');
    resultContainer.innerHTML += data;
  }

  if (urls.length > 0) {
    OnLoad();
  }
})

function OnLoad() {
  var url = urls.shift();

  if (url) {
    var container = document.createElement('div');
    container.id = 'container';
    container.style.visibility = 'hidden';
    window.document.body.appendChild(container);
    container.innerHTML = '<iframe src="' + url + '"></iframe>';
  }
}

    Doc1.html

    <!DOCTYPE html>
<html>
<head>
  <title>Chrome iFrame Tester</title>
  <script>
    function OnLoad() {
      window.parent.postMessage(window.document.body.innerHTML, '*');
    }
  </script>
</head>
<body onload="OnLoad()">
  <div>This is Doc 1's content!</div>
</body>
</html>