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

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

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.