React iframe sandbox don't allow anything

Question

I have a requirement to use iframe sandbox in React application. In which, I don't want to allow anything and restrict everything.

So when I am passing sandbox as blank, something like:-

<iframe
  frameBorder="0"
  ref={(container) => { this.container[index] = container; }}
  srcDoc={thread.body}
  sandbox
/>

I am getting this - "Warning: Received true for a non-boolean attribute sandbox."

react: "^16.5.2"

Answer 1

React treats <iframe sandbox /> just like it was <iframe sandbox={true} /> which is not correct here.

Based on the docs here: https://www.w3schools.com/tags/att_iframe_sandbox.asp, browser expects sandbox prop to be an empty value.

You should simply use

<iframe
  frameBorder="0"
  ref={(container) => { this.container[index] = container; }}
  srcDoc={thread.body}
  sandbox=""
/>

EDIT:

As OP answered in the comments, he had to do sandbox="allow-same-origin allow-popups".