How can I check if the browser supports iframe sandboxing?

I have some user-generated HTML and CSS. I think I should show the user sanitized HTML with no CSS or JS if the browser doesn’t support the sandbox property on iframes, which is what’s stopping JS from running and CSS from selecting part of my page.

So how can I check if the sandbox attribute is supported?

Answer

I found a helpful article on how to do this.

Here is the code snippet obtained from the article relevant to your question:

function elementSupportsAttribute(element, attribute) {
  var test = document.createElement(element);
  if (attribute in test) {
    return true;
  } else {
    return false;
  }
};

if (elementSupportsAttribute("iframe", "sandbox") {

} else {
   // fallback
}

Side note: The sandbox attribute in iframe is supported by almost all browsers except the latest version of Opera Mini. Around 98% of web users’ browsers will be able to support this attribute, so you technically don’t have to worry about browsers that don’t support this attribute, although you could always do so to be safe.