Une extension navigateur bloque mon site Liferay
Une extension navigateur bloque mon site Liferay
Récemment, beaucoup d'utilisateurs Estoniens ont été confrontés à une désagréable surprise lorsqu'ils ont constaté qu'ils ne pouvaient pas accéder à notre site Liferay. Après avoir mené des investigations, nous avons découvert que cela était dû à l'utilisation de l'extension de navigateur "WEB eID" (https://web-eid.eu/ ), l’utilisation de cette extension étant assez répandu dans ce pays.
Quel est l'objectif de cette extension ?
L'Estonie, connue pour être à la pointe de la technologie, a été pionnière dans l'adoption de solutions numériques innovantes pour faciliter la vie quotidienne de ses citoyens. L'un des éléments clés de cette transition numérique est l'utilisation très répandue des identifiants web et de la e-identité. L’extension “WEB eID” intervient ici comme relais entre l’application navigateur sur le poste de l'utilisateur qui gère les identités numériques, et la page web qui demande les informations concernant l’identité de l’utilisateur.
Dans notre cas, nous n’utilisons pas les fonctionnalités fournies par l’extension. Mais le déploiement de cette extension est extrêmement répandu en Estonie et beaucoup de sites locaux l'utilisent.
Le détail du problème
Lors du chargement de la page, Liferay échoue à procéder à l’initialisation du contexte React. En découle le message d’erreur dans la console du navigateur suivant :
Comment reproduire le problème sur son poste
L’extension est directement disponible sur le navigateur une fois que l’on a installé sur le poste de travail l’application Web eID. Les instructions sont disponibles sur le site de l’éditeur https://web-eid.eu/#usage (disponible pour Windows/Linux/macOS). Pour tester le problème, il n’est pas nécessaire de s’authentifier ou d’appliquer une configuration spécifique. Une fois l’application installée et l’extension active sur son navigateur, on peut observer l’erreur.
Les impacts sur le site Liferay
Cette anomalie survient pendant l'initialisation du contexte React. En conséquence, tous les scripts de la page sont affectés, car Liferay interrompt l'exécution des scripts JavaScript après cette erreur. Cela impacte non seulement les applications React, mais également les modules fournis par Liferay (tels que les formulaires et les taglibs) ainsi que vos portlets spécifiques qui utilisent du code React. Dans notre situation, le module de connexion a cessé de fonctionner en raison d'un formulaire d'inscription présent sur la même page.
Le code de l’extension
Après avoir analysé et débogué la stack JavaScript de la page, nous avons identifié cette fonction issue du code exécuté par l'extension :
(function() {
const env = {"TOKEN_SIGNING_BACKWARDS_COMPATIBILITY":"true"};
try {
if (process) {
process.env = Object.assign({}, process.env);
Object.assign(process.env, env);
return;
}
} catch (e) {} // avoid ReferenceError: process is not defined
globalThis.process = { env:env };
})();
On remarque que l'extension initialise une variable dans le contexte de la page. Selon le cas, l’extension crée un contexte si elle n'en trouve pas ou ajoute la variable au contexte existant. Dans notre cas, l’extension s'exécute au chargement de la page, avant les scripts de Liferay. Le portail n'ayant pas encore initialisé le contexte, il est donc toujours vide et l'extension crée systématiquement un nouveau contexte.
L’initialisation du contexte par Liferay
Liferay procède de son côté à l’initialisation. Cependant, il ne le fait que si le contexte est vide. Pas si le contexte existe avec une variable, même non liée comme dans notre cas.
// Egregious hack because react-dnd expects window.process to exist:
//
// https://github.com/react-dnd/asap/blob/b6bebeb734/src/node/asap.ts#L24
if (!window.process) {
window.process = process;
}Le contexte est initialisé via le module NPM process ( https://www.npmjs.com/package/process )
Cette initialisation simple est gérée dans le fichier browser.js.
La solution
Notre problème devient clair : étant donné que l'extension initialise le contexte, l'initialisation par Liferay est désactivée. La solution est donc de procéder à l’initialisation du contexte avant l’extension. Pour cela, nous récupérons le script browser.js et l’adaptons pour le réintégrer à la page. Vu que nous utilisons notre propre thème, nous pouvons intégrer le script en haut de la page.
Note: il est possible de réaliser la même solution avec une Client Extension JS et de choisir de l’intégrer en début de page.
Il est nécessaire la deuxième ligne du fichier de remplacer var process = module.exports = {}; par var process = {};.
Ensuite on intègre dans le template portal_normal.js du thème, dans les premières lignes juste après les balises meta, la déclaration de notre script modifié browser.js.
<script type="text/javascript" src="${htmlUtil.escape(portalUtil.getStaticResourceURL(request, javascript_folder + "/browser.js"))}" defer></script>Désormais, le contexte est complètement initialisé, et la partie React peut se charger sans erreur et les modules fonctionnent à nouveau correctement.