Application Electron utilisant Google OAuth : "Ce navigateur ou cette application peuvent ne pas être sécurisés".

Question

Un utilisateur de mon application a signalé aujourd'hui un problème concernant l'autorisation de l'utilisateur avec Google (en utilisant OAuth 2.0). Jusqu'à présent, l'application ouvrait une nouvelle BrowserWindow (l'intégration des nœuds est désactivée, la session est séparée de l'application principale). Vous pouvez voir l'implémentation aquí puisque la bibliothèque est OSS. Je l'utilise pour autoriser l'utilisateur à accéder aux données de l'application sur Google Drive. Aujourd'hui, après m'être connecté, je vois le message suivant :

Ce navigateur ou cette application peuvent ne pas être sécurisés.

Essayez d'utiliser un autre navigateur. Si vous utilisez déjà un navigateur compatible, vous pouvez rafraîchir votre écran et réessayer de vous connecter.

Le lien "En savoir plus" comporte une section destinée aux développeurs. Cette section comporte deux liens. L'un d'eux explique comment mettre à jour l'application en PWA. L'application étant un outil de test d'API, il ne sera pas possible de l'exécuter dans un navigateur web. Le second lien renvoie à un document décrivant comment migrer vers l'autorisation pour les applications natives. Cependant, le flux décrit nécessite l'octroi d'un code d'autorisation. Cela signifie que je dois inclure le secret OAuth dans mon application. L'application Electron, cependant, est toujours une application web et il n'y a pas de notion de compilation des sources. J'exposerais le secret du client au public, ce qui n'est pas sécurisé. Je pourrais éventuellement créer une application serveur pour la prendre en charge, mais l'application est un projet OSS. Elle ne dispose pas des fonds nécessaires à l'exécution d'un serveur d'autorisation.

Ma question est maintenant de savoir comment je dois implémenter OAuth 2 pour l'application Electron. Je ne peux pas utiliser de PWA et le flux d'autorisation du serveur (code grant) est loin d'être idéal dans ce cas.

Answer 1

Comme l'a expliqué Pawe, la modification de l'agent utilisateur fera l'affaire. Cependant, vous pouvez facilement définir l'agent utilisateur en passant un objet lors du chargement de l'URL

win = new BrowserWindow({width: 800, height: 600});
win.loadURL(authUrl, {userAgent: 'Chrome'})

Je l'ai testé et il a fonctionné comme un charme.

Answer 2

Avertissement : Cette réponse repose sur la modification de l'agent utilisateur du navigateur. Depuis janvier 2021, Google désapprouve cette pratique et recommande de ne pas l'utiliser (voir EDIT4). Utilisez-le à vos risques et périls !

Les autres réponses n'ont pas fonctionné pour moi (dans Electron 9.0.5), mais j'ai finalement trouvé ceci, qui a fonctionné :

app.on("ready", ()=> {
    session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => {
        details.requestHeaders["User-Agent"] = "Chrome";
        callback({ cancel: false, requestHeaders: details.requestHeaders });
    });

    CreateMainWindow(); // your regular code to create root browser window
});

EDIT : Deux autres approches, que je n'ai pas testées, mais qui peuvent également fonctionner :

app.on("ready", ()=>{
    session.defaultSession.setUserAgent("Chrome");
    ...
}

app.userAgentFallback = "Chrome";

EDIT2 : En réessayant quelque temps plus tard, l'approche n° 2 n'a pas fonctionné, mais l'approche n° 1 a fonctionné. Je n'ai pas encore essayé l'approche n°3.

EDIT3 : En réessayant plus tard, il semble qu'aucune de ces solutions de contournement ne soit plus nécessaire ! Google semble à nouveau accepter les popups de connexion des applications Electron, sans modification du user-agent. (C'est étrange qu'ils reviennent sur cette décision ; peut-être que j'ai fait quelque chose de mal lors de ma nouvelle tentative)

EDIT4 : Bien que l'approche n° 1 fonctionne toujours, j'ai récemment trouvé cet article de blog : https://developers.googleblog.com/2020/08/guidance-for-our-effort-to-block-less-secure-browser-and-apps.html Apparemment, Google restreint l'utilisation de la connexion Google dans les navigateurs non standard (ce qui inclut probablement Electron) à partir de janvier 2021, et avertit les développeurs de ne pas modifier le user-agent de leur navigateur (ce que font les trois possibilités que je mentionne). Utilisez-le à vos risques et périls ! (ils n'indiquent pas clairement quel sera le résultat, mais pour mon usage personnel, j'opte pour l'alternative montrée ci-dessous à partir de maintenant)

---

Au lieu d'utiliser un popup de connexion Google dans votre application (ce dont certains pourraient se méfier, car les applications Electron pourraient en principe insérer du code dans le popup pour lire le mot de passe brut - ce qui n'a pas beaucoup d'importance, car les applications Electron pourraient de toute façon installer des enregistreurs de frappe ou autres), vous pourriez ouvrir un onglet dans le navigateur externe habituel de l'utilisateur, pointer vers une page spéciale qui déclenche un popup de connexion, puis envoyer les informations d'identification à votre application Electron par la suite.

Les instructions peuvent être consultées ici (approche 3) : https://stackoverflow.com/a/64328193/2441655

Answer 3

Après avoir deviné, j'ai décidé de modifier la chaîne de l'agent utilisateur et d'en supprimer le nom de l'application. Electron/ avec version. Après cette modification, il a recommencé à fonctionner.

Exemple de mise en œuvre :

const win = new BrowserWindow(params);
let ua = win.webContents.userAgent;
ua = ua.replace(/APPLICATION NAME HERE\/[0-9\.-]*/,'');
ua = ua.replace(/Electron\/*/,'');
win.webContents.userAgent = ua;

Cela suppose que l'application utilise symver et qu'il n'y ait pas de balises de préversion. Dans le cas contraire, il faudrait modifier un peu l'expression rationnelle.