Blocked autofocusing on a <input> element in a cross-origin subframe

Question

In our web app/site, I need to use an iframe or a popup window to validate if the current token is valid and refresh it if no.

So, I create an iframe, and set the property 'src' to the validation link such as "https://<domain_name>/auth?client_id=xxx" which is different to our app domain https://<app_domain>. and the return value will like "https://<domain_name>/code=yyyy"

document.createElement('iframe');

and I added the message handle for the web app/site, like

window.addEventListener("message", this.messageHandler);

in the messageHandler, I will check if the message is from a specified website, and then validate the "code" value, blabla, etc.

But when running in Chrome, I always got the error "Blocked autofocusing on a element in a cross-origin subframe."

what confused me is:

it always failed when running in the Chrome browser, but it can work fine in Firefox and Edge chromium.
I tried to set iframe.sandbox = "allow-forms allow-scripts allow-same-origin", the problem still existed.
If the validating token failed in iframe or timeout, I will create a popup window to continue validating and refresh the token. But every time, using popup window can always succeed. If it is really a cross-origin issue, why using iframe failed but using popup window succeeded.
I didn't use window.postmessage. because I don't know how to pass the return value of iframe/popup-window to the main page.
I used CORS extension of Chrome or using parameter --disable-web-security when launching Chrome. the problem still existed.
when I created the iframe or popup window. it is very simple, I just set the iframe.src property, there is no element being created.

any help will be much appreciated.

p.s. I refer to the following doc: Blocked autofocusing on a form control in a cross-origin subframe
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

jmcgrory jmcgrory · Accepted Answer · 2020-09-04T14:04:28

Support for iframes in web development will only get worse over time as they are a security black hole, browsers are gradually over time locking out features and use of them.

I am assuming you are doing this because you are validating a user on a third party service, validating by watching the response of a third party service website?

Without knowing the service you are using I cannot comment specifically but for anyone looking to do something similar I would highly suggest not doing this:

As mentioned, iframes are constantly having features locked down due to security concerns
An attacker could change the source of the iframe and submit their own iframe to look like it has been correctly validated
It's unlikely that the page you are using as your iframe src is intended for this use, which will come back and bite you when the 3rd party developer changes how their page behaves, which they likely will do without knowing it's going to break your application

I recommend:

Finding a stable API the 3rd party service offers and using that
Finding another service if none exist

Apologies to rain on your parade!

Blocked autofocusing on a <input> element in a cross-origin subframe

2 Answers