A while ago, I was looking for a strategy to protect my website from external links provided by forum members. I’m trying to create my own database of harmful URLs. But it’s harder than you think. The sheer volume of links is tough to sort through. So I looked for an API service that could fit my demands and discovered the Google Safe Browsing API, a free service API provided by Google, and attempted to add it to the Discourse forum. Result in my forum *when mouse hover [IMG_9546] Here’s how. To add an icon after all external links in Discourse and display tooltips showing the security status of the links using Google Safe Browsing Lookup API (v4), follow these steps: Create an API Key for Google Safe Browsing: Go to the Google Cloud Console Create a new project or use an existing one Enable the Safe Browsing API Create an API key for this project *It’s all free. Log in to Discourse Admin: Log in to Discourse with your admin account Access Theme Customization: Go to “Admin” → “Customize” → “Themes” Select the theme you want to edit or create a new theme or theme component Add CSS: Click “Edit CSS/HTML” for the desired theme In the “CSS” tab, add the following code: a[target="_blank"]:after { content: url('https://example.com/icon.png'); /* Replace with the URL of your desired icon */ margin-left: 5px; /* Spacing between the link and the 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 of the tooltip */ left: 50%; margin-left: -100px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } Add JavaScript: In the “Header” tab of the theme, add the following code: api.onPageChange(() => { const externalLinks = document.querySelectorAll('a[href^="http"]:not([href*="' + window.location.hostname + '"])'); const apiKey = 'YOUR_GOOGLE_API_KEY'; // Replace with your API key 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.'; }); }); }); This JavaScript will: Find all external links and set them to open in a new tab Add an icon after the link Check the link using the Google Safe Browsing API and display the result in a tooltip Save and Apply the Theme: Click “Save” to save your changes If you created a new theme, set it as the default theme or assign it to the desired user groups These steps will ensure that all external links in your Discourse instance will have an icon after them, and tooltips will show the security status of the links using the Google Safe Browsing API. Edit for security You should add your website to the Website limits section for Google API usage. [IMG_9545] Option Use Font Awesome icon To use an icon from Font Awesome. Here is the updated CSS: Updated CSS with Font Awesome Icons /* Ensure Font Awesome is included */ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); /* Add Font Awesome icon after external links */ a[target="_blank"]:after { content: "\f35d"; /* Unicode for Font Awesome external link icon */ font-family: 'Font Awesome 5 Free'; /* Font Awesome family */ font-weight: 900; /* Font Awesome solid weight */ margin-left: 5px; /* Spacing between the link and the icon */ display: inline-block; } Explanation: Font Awesome Import: The CSS starts by importing the Font Awesome CSS from a CDN. Icon Addition: The content property in the a[target="_blank"]:after selector is set to "\f35d", which is the Unicode for the Font Awesome external link icon. The font-family is set to ‘Font Awesome 5 Free’ and font-weight to 900 to use the solid version of the icon. I hope this is helpful to those who are looking for the same thing as me.

This is a very cool idea!! :warning: Note that by including your Google Cloud API key in a theme component, you’re exposing it to the world. When people have access to your API key then can potentially put you up with a very large bill. :warning: You should either make sure that your API key is sufficiently scoped (e.g. it can only access the Safe Browsing API) or you should add a server side proxy so you can keep the API key safe on your server.

Or … turn this into a plugin and keep the API conversation happening behind the scenes where no-one can see.

[image] Richard - Communiteq: or you should add a server side proxy so you can keep the API key safe on your server That’s what I tried to say :wink:

Well a proxy is a special kind of middleman and also a good idea. It was definitely an OR.

[image] Richard - Communiteq: This is a very cool idea!! :warning: Note that by including your Google Cloud API key in a theme component, you’re exposing it to the world. When people have access to your API key then can potentially put you up with a very large bill. :warning: You should either make sure that your API key is sufficiently scoped (e.g. it can only access the Safe Browsing API) or you should add a server side proxy so you can keep the API key safe on your server. Thank you for the great advice. :blush: I believe there is a mechanism to block API access in Google Cloud Console; add your website there.

[image] Robert: Or … turn this into a plugin and keep the API conversation happening behind the scenes where no-one can see. Because I lack the necessary skills to write plugins. I believe this strategy is basic and straightforward. But if there are people who wish to create, I believe it is superior to my way. And I will be quite thrilled.

And meanwhile I would even propose this could be worth of a feature request. (If that service is liable, that I don’t know)

[image] MHAT DEV: Because I lack the necessary skills to write plugins. I believe this strategy is basic and straightforward. But if there are people who wish to create, I believe it is superior to my way. And I will be quite thrilled. I’m not making any promises but when I have some spare time in the upcoming months then I will definitely consider this.

I’m glad I grabbed your attention, and I appreciate the interest you showed in making this plugin.

[image] Jakke Flemming: And meanwhile I would even propose this could be worth of a feature request. (If that service is liable, that I don’t know) I hope and am pleased to see this in the feature, too.

Showing the security status in all external link using Google Safe Browsing Lookup API

Development

Moin July 23, 2024, 7:39pm 14

You can create a new theme component and add that to your theme

Topic		Replies	Views
Preventing malicious linking Feature	34	5222	December 24, 2017
External Link Shield – Exit Confirmation & Trust Gating Theme component	18	899	October 26, 2026
External Links Icon Theme component	15	874	August 28, 2026
Warning before external link Product Support	6	1302	February 13, 2021
Redirect Page for External URLs Product Support	14	3571	April 9, 2020

Showing the security status in all external link using Google Safe Browsing Lookup API

Related topics