This is pretty much a duplicate of this question, whose answer doesn't seem to work as on June 10, 2020
Hello, everyone.
I'm facing the exact same issue @Limbo described in that question. I'd like to ping the author, but simply don't have enough reputation to leave a comment... ¯_(ツ)_/¯
Long story short:
I'm working on implementation of Telegram's authentication via it's widget. Naturally, I'd like to customize default "Log in"-button. The problem is the fact that Telegram provides such possibility only via <iframe>, which means that "Log in"-button can't be reached neither via JS, nor via CSS.
Is there any other way to make stylized trigger of authentication window (e.g. by bypassing of cross-domain restriction, or by creation of own button on native origin)?
The only solution I see now - is to transform: scale(); visibility: hidden; iframe's container and make it overlap an element, which were supposed to trigger authentication window, via position: absolute; z-index: 2;. But that seems to be a kludge. Very bad one.
Why this answer doesn't work:
The author proposes to catch authentication payload via "message"-listener. Due to mine investigation, it is not possible, as at 3-d step of flow (see picture) Telegram runs postMessage-function for window.opener, which is <iframe>-element, and specifies that event should be available only for https://oauth.telegram.org. Thus, it is not possible to catch it on any other origin.
