Skip to content

Shadow-DOM and Iframes

Today, I found out about a very weird interaction that varies across modern browsers. Shadow-DOM is used to obscure elements from the parent context. See the example below for what it actually does

<body>
  <style>
  p {
    color:red; /* this style does not affect the <p> tag below */
  }
  </style>
  <customelement>
    #shadow-root (open)
    <p>obscure me</p>
  </customelement>
</body>

This also means that an <iframe> inside a Shadow-DOM is hidden or obscured from the parent context. That’s perfectly fine and inline with the intent of Shadow-DOMs.

However, the difference comes in how it affects window.frames . For example, in Chrome, <iframe> hidden in a Shadow-DOM is not included in window.frames , while in Firefox, it is.

Enjoyed the content ? Share it with your friends !
Published inProgrammingSecurity

Be First to Comment

Leave a Reply

Your email address will not be published.