Detecting if there an element or iframe overlaid on top of my iframe
I have an iframe that can be embedded inside any website based on the content security policy.
Is there a way for the my iframe code to detect if there is an element or iframe laid on top of it to prevent clickjacking?
I tried using the trackVisibility in the IntersectionObserver v2 API for this purpose. Let us assume for now that we are good with the fact that support on Chrome is good enough.
For simplicity of discussion, let us assume that the threshold is set to 1.0, so that the entire iframe has to be visible for isVisible to be true. Also, let us call my iframe as iframeGood and the overlaid malicious iframe to be iframeBad.
If the opacity of iframeBad is set to anything higher than 0, then the isVisible of the IntersectionObserver API shows the value as false.
However, if the opacity of the iframeBad is set to 0, then the isVisible of the IntersectionObserver API shows the value as true. Maybe this is intended since iframeGood is fully visible in this case, but it does not solve of the problem of clickjacking.
So is there a way to detecting if there an element or iframe overlaid on top of my iframe from within my iframe?