Tempo fa, stavo cercando una strategia per proteggere il mio sito web dai link esterni forniti dai membri del forum. Sto cercando di creare il mio database di URL dannosi. Ma è più difficile di quanto si pensi. L’enorme volume di link è difficile da vagliare. Così ho cercato un servizio API che potesse soddisfare le mie esigenze e ho scoperto l’API Google Safe Browsing, un servizio API gratuito fornito da Google, e ho provato ad aggiungerlo al forum Discourse.
Risultato sul mio forum
*quando il mouse passa sopra
Ecco come.
Per aggiungere un’icona dopo tutti i link esterni in Discourse e visualizzare tooltip che mostrano lo stato di sicurezza dei link utilizzando l’API Google Safe Browsing Lookup (v4), segui questi passaggi:
-
Crea una chiave API per Google Safe Browsing:
- Vai alla Google Cloud Console
- Crea un nuovo progetto o utilizzane uno esistente
- Abilita l’API Safe Browsing
- Crea una chiave API per questo progetto
*È tutto gratuito.
-
Accedi ad Amministratore Discourse:
- Accedi a Discourse con il tuo account amministratore
-
Accedi alla Personalizzazione del Tema:
- Vai su “Admin” → “Personalizza” → “Temi”
- Seleziona il tema che desideri modificare o crea un nuovo tema o componente del tema
-
Aggiungi CSS:
-
Fai clic su “Modifica CSS/HTML” per il tema desiderato
-
Nella scheda “CSS”, aggiungi il seguente codice:
a[target="_blank"]:after { content: url('https://example.com/icon.png'); /* Sostituisci con l'URL della tua icona desiderata */ margin-left: 5px; /* Spaziatura tra il link e l'icona */ 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%; /* Posizione del tooltip */ left: 50%; margin-left: -100px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
-
-
Aggiungi JavaScript:
-
Nella scheda “Header” del tema, aggiungi il seguente codice:
<script type="text/discourse-plugin" version="0.8"> api.onPageChange(() => { const externalLinks = document.querySelectorAll('a[href^="http"]:not([href*="' + window.location.hostname + '"])'); const apiKey = 'YOUR_GOOGLE_API_KEY'; // Sostituisci con la tua chiave 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>Questo JavaScript farà quanto segue:
- Trova tutti i link esterni e impostali per aprirli in una nuova scheda
- Aggiunge un’icona dopo il link
- Controlla il link utilizzando l’API Google Safe Browsing e visualizza il risultato in un tooltip
-
-
Salva e Applica il Tema:
- Fai clic su “Salva” per salvare le modifiche
- Se hai creato un nuovo tema, impostalo come tema predefinito o assegnalo ai gruppi di utenti desiderati
Questi passaggi garantiranno che tutti i link esterni nella tua istanza Discourse avranno un’icona dopo di essi e i tooltip mostreranno lo stato di sicurezza dei link utilizzando l’API Google Safe Browsing.
Modifica per la sicurezza
Dovresti aggiungere il tuo sito web alla sezione Limiti del sito web per l’utilizzo dell’API di Google.
Opzione
Usa l'icona di Font Awesome
Per utilizzare un’icona da Font Awesome. Ecco il CSS aggiornato:
CSS aggiornato con icone Font Awesome
/* Assicurati che Font Awesome sia incluso */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
/* Aggiungi l'icona di Font Awesome dopo i link esterni */
a[target="_blank"]:after {
content: "\f35d"; /* Unicode per l'icona del link esterno di Font Awesome */
font-family: 'Font Awesome 5 Free'; /* Famiglia Font Awesome */
font-weight: 900; /* Peso solido di Font Awesome */
margin-left: 5px; /* Spaziatura tra il link e l'icona */
display: inline-block;
}
Spiegazione:
-
Importazione di Font Awesome:
- Il CSS inizia importando il CSS di Font Awesome da un CDN.
-
Aggiunta dell’icona:
- La proprietà
contentnel selettorea[target="_blank"]:afterè impostata su"\f35d", che è l’Unicode per l’icona del link esterno di Font Awesome. - Il
font-familyè impostato su ‘Font Awesome 5 Free’ efont-weightsu900per utilizzare la versione solida dell’icona.
- La proprietà
Spero che questo sia utile a coloro che cercano la stessa cosa mia.
Tieni presente che includendo la tua chiave API di Google Cloud in un componente del tema, la stai esponendo al mondo. Quando le persone hanno accesso alla tua chiave API, possono potenzialmente farti incorrere in una fattura molto salata. 
Credo che ci sia un meccanismo per bloccare l’accesso alle API nella Google Cloud Console; aggiungi lì il tuo sito web.