Il y a quelque temps, je cherchais une stratégie pour protéger mon site web des liens externes fournis par les membres du forum. J’essaie de créer ma propre base de données d’URL nuisibles. Mais c’est plus difficile qu’on ne le pense. Le volume énorme de liens est difficile à trier. J’ai donc cherché un service API qui pourrait répondre à mes besoins et j’ai découvert l’API Google Safe Browsing, un service API gratuit fourni par Google, et j’ai tenté de l’ajouter au forum Discourse.
Résultat sur mon forum
*lors du survol de la souris
Voici comment.
Pour ajouter une icône après tous les liens externes dans Discourse et afficher des infobulles montrant le statut de sécurité des liens à l’aide de l’API Google Safe Browsing Lookup (v4), suivez ces étapes :
-
Créez une clé API pour Google Safe Browsing :
- Accédez à la Google Cloud Console
- Créez un nouveau projet ou utilisez-en un existant
- Activez l’API Safe Browsing
- Créez une clé API pour ce projet
*Tout est gratuit.
-
Connectez-vous à l’administration de Discourse :
- Connectez-vous à Discourse avec votre compte administrateur
-
Accédez à la personnalisation des thèmes :
- Allez dans “Admin” → “Customize” → “Themes”
- Sélectionnez le thème que vous souhaitez modifier ou créez un nouveau thème ou un composant de thème
-
Ajoutez du CSS :
-
Cliquez sur “Edit CSS/HTML” pour le thème souhaité
-
Dans l’onglet “CSS”, ajoutez le code suivant :
a[target="_blank"]:after { content: url('https://example.com/icon.png'); /* Remplacez par l'URL de votre icône souhaitée */ margin-left: 5px; /* Espacement entre le lien et l'icône */ display: inline-block; } .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 200px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; /* Position de l'infobulle */ left: 50%; margin-left: -100px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
-
-
Ajoutez du JavaScript :
-
Dans l’onglet “Header” du thème, ajoutez le code suivant :
<script type="text/discourse-plugin" version="0.8"> api.onPageChange(() => { const externalLinks = document.querySelectorAll('a[href^="http"]:not([href*="' + window.location.hostname + '"])'); const apiKey = 'VOTRE_CLE_API_GOOGLE'; // Remplacez par votre clé API const lookupUrl = 'https://safebrowsing.googleapis.com/v4/threatMatches:find?key=' + apiKey; externalLinks.forEach(link => { link.setAttribute('target', '_blank'); link.classList.add('tooltip'); const tooltipText = document.createElement('span'); tooltipText.className = 'tooltiptext'; tooltipText.innerText = 'Checking link safety...'; link.appendChild(tooltipText); fetch(lookupUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ client: { clientId: 'yourcompany', clientVersion: '1.5.2' }, threatInfo: { threatTypes: ['MALWARE', 'SOCIAL_ENGINEERING'], platformTypes: ['ANY_PLATFORM'], threatEntryTypes: ['URL'], threatEntries: [ { url: link.href } ] } }) }) .then(response => response.json()) .then(data => { if (data.matches && data.matches.length > 0) { tooltipText.innerText = 'Warning: This link may be unsafe!'; tooltipText.style.backgroundColor = '#ff0000'; } else { tooltipText.innerText = 'This link is safe.'; } }) .catch(error => { tooltipText.innerText = 'Error checking link safety.'; }); }); }); </script>Ce JavaScript va :
- Trouver tous les liens externes et les faire s’ouvrir dans un nouvel onglet
- Ajouter une icône après le lien
- Vérifier le lien à l’aide de l’API Google Safe Browsing et afficher le résultat dans une infobulle
-
-
Enregistrez et appliquez le thème :
- Cliquez sur “Save” pour enregistrer vos modifications
- Si vous avez créé un nouveau thème, définissez-le comme thème par défaut ou attribuez-le aux groupes d’utilisateurs souhaités
Ces étapes garantiront que tous les liens externes de votre instance Discourse auront une icône après eux, et que des infobulles afficheront le statut de sécurité des liens à l’aide de l’API Google Safe Browsing.
Modification pour la sécurité
Vous devriez ajouter votre site web à la section des limites de sites web pour l’utilisation de l’API Google.
Option
Utiliser l'icône Font Awesome
Pour utiliser une icône de Font Awesome. Voici le CSS mis à jour :
CSS mis à jour avec les icônes Font Awesome
/* Assurez-vous que Font Awesome est inclus */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
/* Ajouter l'icône Font Awesome après les liens externes */
a[target="_blank"]:after {
content: "\\f35d"; /* Unicode pour l'icône de lien externe Font Awesome */
font-family: 'Font Awesome 5 Free'; /* Famille Font Awesome */
font-weight: 900; /* Poids solide de Font Awesome */
margin-left: 5px; /* Espacement entre le lien et l'icône */
display: inline-block;
}
Explication :
-
Importation de Font Awesome :
- Le CSS commence par importer le CSS de Font Awesome à partir d’un CDN.
-
Ajout d’icône :
- La propriété
contentdans le sélecteura[target="_blank"]:afterest définie sur\"\\f35d\", qui est l’Unicode de l’icône de lien externe Font Awesome. - La
font-familyest définie sur ‘Font Awesome 5 Free’ etfont-weightsur900pour utiliser la version solide de l’icône.
- La propriété
J’espère que cela sera utile à ceux qui recherchent la même chose que moi.
Notez qu’en incluant votre clé API Google Cloud dans un composant de thème, vous l’exposez au monde entier. Lorsque les gens ont accès à votre clé API, ils peuvent potentiellement vous facturer une facture très importante. 
Je crois qu’il existe un mécanisme pour bloquer l’accès à l’API dans la Google Cloud Console ; ajoutez votre site web là-bas.