How can you make an iframe have pointer-events: none; but not on a div inside that?

Question

I have an iframe with an inherited pointer-events: none; but when I have inserted a

inside the iframe with a pointer-events: auto

Answer 1

There's no way you can do it, since it would be another security issue along with clickjacking.

Styles inside iframe don't cooperate in any way with styles inside of host site. So if you even set z-index/pointer-events or something else on iframe and would try to override the rule inside of it, it won't apply to host site rules in any way.

So what's the solution? You have to split your iframe into multiple ones, and tinker with theirs position.