CSP没有跨域iframe的不安全内联寄存器加载处理程序

Question

our motivation

We're implementing CSP 2.0 with script-src: 'self' (especially no 'unsafe-inline' ). In some places we render iframes with cross-origin content and we need to know when they are loaded. Before CSP we would simply write

<iframe src="https://some.cross/origin/content" onload="this.complete = true"/>
<script>
  var iframe = document.querySelector('iframe');
  function loaded() { /* whatever happens when the iframe is loaded */ }
  if (iframe.complete) {
    loaded();
  } else {
    iframe.addEventListener('load', loaded);
  }
</script>

However, without 'unsafe-inline' we can't use the onload="this.complete = true" any more. Simply attaching the event listener does not work if it did already fire:

<iframe src="https://some.cross/origin/content"/>
<script>
  var iframe = document.querySelector('iframe');
  function loaded() { /* ... */ }
  // if the load event does not fire because it fired before
  // loaded() will never be executed
  iframe.addEventListener('load', loaded);
</script>

what we tried

Now, a solution would be to look inside the iframe contents document.readystate , but with cross-origin content we get security exceptions here.

Nonces don't work on inline handlers (at least in CSP 2.0), so simply supplying a nonce for the inline handler is not an option.

Our final idea would be to rewrite all onload iframes to javascript-inserted elements, because there we could attach the load handler before inserting the element, like

<!-- no iframe tag anymore -->
<script>
  var iframe = document.createElement('iframe');
  function loaded() { /* ... */ }
  iframe.addEventListener('load', loaded);
  document.body.appendChild(iframe);
</script>

But for this approach we fear the performance impact of creating iframes via JavaScript -- the html iframe would be rendered and loaded before the script would even start to execute.

our question

How do we figure out reliably if the content of a cross-origin iframe is loaded without an onload="this.complete = true" inline handler (that would need CSP 2.0's script-src: ... 'unsafe-inline' )?

Answer 1

Without any active cooperation from those 3rd-party providers (like postMessage communication), I think inserting those iframes via JS is your only realistic option. Or to at least “trigger” them to load their actually content only after you had a chance to add your load handler - so you could keep <iframe src="about:blank" data-real-src="http://3rd.party/..."> in your HTML, and have a script coming after that switch out src for data-real-src after adding the load handler. But those inline scripts will be “render blocking”, so not the best regarding overall page performance.

Maybe you'd have more success by loading a minimal document from your own domain into the iframes first, that does two things: Reach up into the parent document and attach the load event handler, and then redirect itself to the actual 3rd-party target URL afterwards …?

<iframe id="iframe123" src="/my-iframe-loader.xyz?iframeid=iframe123&
                            targeturl=http://3rd.party/...">

Passing the iframe element id as a GET parameter would allow you to directly locate the corresponding iframe element in the parent document (by creating that part of the JS code dynamically, server-side),

parent.document.querySelector('iframe123').addEventlistener(...);
location.href = 'http://3rd.party/...';

The iframe element should be accessible in the parent document at this point already, because if it wasn't ... our script inside the iframe would hardly have loaded yet to begin with.

This still would not eliminate all delay, but I think this could be faster (no render blocking), and cleaner than having inline scripts scattered all over the parent document.

(Plus, you could implement a non-JS fallback that would at least still load the iframe contents, if you add a meta refresh to those loader documents that would redirect to the target URL with a small delay ... if even applicable.)