Vor einiger Zeit suchte ich nach einer Strategie, um meine Website vor externen Links zu schützen, die von Forenmitgliedern bereitgestellt werden. Ich versuche, meine eigene Datenbank mit schädlichen URLs zu erstellen. Aber das ist schwieriger als man denkt. Die schiere Menge an Links ist schwer zu sortieren. Also suchte ich nach einem API-Dienst, der meinen Anforderungen entspricht, und entdeckte die Google Safe Browsing API, einen kostenlosen Dienst von Google, und versuchte, ihn in das Discourse-Forum zu integrieren.
Ergebnis in meinem Forum
*beim Überfahren mit der Maus
So geht’s.
Um nach allen externen Links in Discourse ein Symbol hinzuzufügen und Tooltips anzuzeigen, die den Sicherheitsstatus der Links mithilfe der Google Safe Browsing Lookup API (v4) anzeigen, befolgen Sie diese Schritte:
-
Erstellen Sie einen API-Schlüssel für Google Safe Browsing:
- Gehen Sie zur Google Cloud Console
- Erstellen Sie ein neues Projekt oder verwenden Sie ein vorhandenes
- Aktivieren Sie die Safe Browsing API
- Erstellen Sie einen API-Schlüssel für dieses Projekt
*Es ist alles kostenlos.
-
Melden Sie sich bei Discourse Admin an:
- Melden Sie sich mit Ihrem Admin-Konto bei Discourse an
-
Greifen Sie auf die Theme-Anpassung zu:
- Gehen Sie zu “Admin” → “Anpassen” → “Themes”
- Wählen Sie das Theme aus, das Sie bearbeiten möchten, oder erstellen Sie eine neue Theme oder eine Theme-Komponente
-
CSS hinzufügen:
-
Klicken Sie für das gewünschte Theme auf “CSS/HTML bearbeiten”
-
Fügen Sie im Tab “CSS” den folgenden Code hinzu:
a[target="_blank"]:after { content: url('https://example.com/icon.png'); /* Ersetzen Sie dies durch die URL Ihres gewünschten Icons */ margin-left: 5px; /* Abstand zwischen dem Link und dem Icon */ 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 des Tooltips */ left: 50%; margin-left: -100px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
-
-
JavaScript hinzufügen:
-
Fügen Sie im Tab “Header” des Themes den folgenden Code hinzu:
<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'; // Ersetzen Sie dies durch Ihren API-Schlüssel 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>Dieses JavaScript wird:
- Alle externen Links finden und so einstellen, dass sie in einem neuen Tab geöffnet werden
- Ein Symbol nach dem Link hinzufügen
- Den Link mithilfe der Google Safe Browsing API überprüfen und das Ergebnis in einem Tooltip anzeigen
-
-
Speichern und Anwenden des Themes:
- Klicken Sie auf “Speichern”, um Ihre Änderungen zu speichern
- Wenn Sie ein neues Theme erstellt haben, legen Sie es als Standard-Theme fest oder weisen Sie es den gewünschten Benutzergruppen zu
Diese Schritte stellen sicher, dass alle externen Links in Ihrer Discourse-Instanz ein Symbol nach sich haben und Tooltips den Sicherheitsstatus der Links mithilfe der Google Safe Browsing API anzeigen.
Bearbeitung zur Sicherheit
Sie sollten Ihre Website im Abschnitt Website-Limits für die Google API-Nutzung hinzufügen.
Option
Font Awesome Icon verwenden
Um ein Icon von Font Awesome zu verwenden. Hier ist das aktualisierte CSS:
Aktualisiertes CSS mit Font Awesome Icons
/* Stellen Sie sicher, dass Font Awesome enthalten ist */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
/* Font Awesome Icon nach externen Links hinzufügen */
a[target="_blank"]:after {
content: "\f35d"; /* Unicode für Font Awesome externes Link-Icon */
font-family: 'Font Awesome 5 Free'; /* Font Awesome Familie */
font-weight: 900; /* Font Awesome Solid Gewicht */
margin-left: 5px; /* Abstand zwischen dem Link und dem Icon */
display: inline-block;
}
Erklärung:
-
Font Awesome Import:
- Das CSS beginnt mit dem Importieren des Font Awesome CSS von einem CDN.
-
Icon-Hinzufügung:
- Die
content-Eigenschaft im Selektora[target="_blank"]:afterwird auf"\f35d"gesetzt, was der Unicode für das Font Awesome externe Link-Icon ist. - Die
font-familyist auf ‘Font Awesome 5 Free’ undfont-weightauf900gesetzt, um die solide Version des Icons zu verwenden.
- Die
Ich hoffe, das ist hilfreich für diejenigen, die dasselbe suchen wie ich.
Beachten Sie, dass Sie Ihren Google Cloud API-Schlüssel preisgeben, wenn Sie ihn in eine Theme-Komponente aufnehmen. Wenn Personen Zugriff auf Ihren API-Schlüssel haben, können sie Ihnen potenziell eine sehr hohe Rechnung stellen. 
Ich glaube, es gibt einen Mechanismus, um den API-Zugriff in der Google Cloud Console zu blockieren; fügen Sie dort Ihre Website hinzu.