Embedding an iFrame without allowing any internal links to be clickable using CSS pointer-events

CSS pointer-events can be applied to an iFrame so that events within the iframe don't bubble up. Since events within an iframe don't bubble up to the parent document in such a way that event.preventDefault() would capture and cancel them, this is an effective means of rendering the iframe contents without actually allowing them to be interactive.

The means of adding this functionality is as simple as setting pointer-events: none on the <iframe>. For example in React via Tailwind.css class naming:

<iframe
    className="pointer-events-none"
/>

Feedback?

Email us at enquiries@kinsa.cc.