How to handle the 'allow-modals' sandbox flag for iframes in browsers that do not yet support it?

Question

Since Chrome 46 it is needed to add the 'allow-modals' flag to the sandbox attribute of an iframe to allow modals (like alert and confirm) to break out of the iframe. No problem so far.

But when you run that code in browsers that do not yet support the flag (like Safari or Chrome before version 46) you get the following error: Error while parsing the 'sandbox' attribute: 'allow-modals' is an invalid sandbox flag.

Anybody an idea how to fix this without some kind of browser sniffing?

Answer 1

Seems like the only way to add it is retroactively, via JS.

function allowModals(){
  for (const i of document.getElementsByTagName('iframe')) {
    if (!i.sandbox.supports('allow-modals')) {
      console.warn("Your browser doesn't support the 'allow-modals' attribute :(");
      break;
    }
    if (i.sandbox.contains('allow-modals')) continue;
    console.info(i, "doesn't allow modals");
    i.sandbox.add('allow-modals');
    console.info(i, 'now allows modals');
  }
}

<button onclick='allowModals()' style='display: block'>Allow modals</button>
<iframe src="//example.com"></iframe>

Seems awfully strange that a new attribute value can't be used in older browsers. Backwards-incompatible changes aren't the way the web should work. :/