Having trouble with my chrome extension that autofills form inputs because the iframe is loaded from a different source, resulting in Chrome restricting script access to the iframe. There are numerous questions about this on SO already.
I recently discovered that the Privacy.com extension can insert an HTML element into the same iframe seamlessly. How do they achieve this?
To test it out:
- Install the Pay by Privacy.com Chrome extension.
- Visit this codepen page with a form.
- You will notice a "P" icon on the Credit Card number input field, injected by the extension inside the iframe.
- Attempt to manually select the HTML element of the Credit Card number input using Chrome dev console with the following code (Ensure
topis set as the JS context in the console):
document.querySelectorAll('iframe')[0].contentWindow.document.querySelector('#credit-card-number');
This will result in an error message:
Uncaught DOMException: Blocked a frame with origin "https://codepen.io" from accessing a cross-origin frame.
at <anonymous>:1:53
The expected error also occurs when I attempt the same action from my extension. So, how does Privacy.com manage to make it work?