Há algum tempo, eu estava procurando uma estratégia para proteger meu site contra links externos fornecidos por membros do fórum. Estou tentando criar meu próprio banco de dados de URLs prejudiciais. Mas é mais difícil do que parece. O grande volume de links dificulta a triagem. Então, procurei um serviço de API que pudesse atender às minhas necessidades e descobri a API Google Safe Browsing, um serviço de API gratuito fornecido pelo Google, e tentei adicioná-lo ao fórum Discourse.
Resultado no meu fórum
ao passar o mouse por cima
Veja como.
Para adicionar um ícone após todos os links externos no Discourse e exibir dicas mostrando o status de segurança dos links usando a API Google Safe Browsing Lookup (v4), siga estas etapas:
-
Crie uma chave de API para o Google Safe Browsing:
- Vá para o Google Cloud Console
- Crie um novo projeto ou use um existente
- Ative a API Safe Browsing
- Crie uma chave de API para este projeto
*É tudo grátis.
-
Faça login no Discourse Admin:
- Faça login no Discourse com sua conta de administrador
-
Acesse a Personalização de Temas:
- Vá para “Admin” → “Customize” → “Themes”
- Selecione o tema que você deseja editar ou crie um novo tema ou componente de tema
-
Adicione CSS:
-
Clique em “Edit CSS/HTML” para o tema desejado
-
Na aba “CSS”, adicione o seguinte código:
a[target="_blank"]:after { content: url('https://example.com/icon.png'); /* Substitua pela URL do seu ícone desejado */ margin-left: 5px; /* Espaçamento entre o link e o ícone */ 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%; /* Posição da dica */ left: 50%; margin-left: -100px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
-
-
Adicione JavaScript:
-
Na aba “Header” do tema, adicione o seguinte código:
<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'; // Substitua pela sua chave de 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>Este JavaScript irá:
- Encontrar todos os links externos e configurá-los para abrir em uma nova aba
- Adicionar um ícone após o link
- Verificar o link usando a API Google Safe Browsing e exibir o resultado em uma dica
-
-
Salve e Aplique o Tema:
- Clique em “Save” para salvar suas alterações
- Se você criou um novo tema, defina-o como o tema padrão ou atribua-o aos grupos de usuários desejados
Essas etapas garantirão que todos os links externos em sua instância do Discourse tenham um ícone após eles, e as dicas mostrarão o status de segurança dos links usando a API Google Safe Browsing.
Edição para segurança
Você deve adicionar seu site à seção Limites do site para uso da API do Google.
Opção
Usar ícone do Font Awesome
Para usar um ícone do Font Awesome. Aqui está o CSS atualizado:
CSS Atualizado com Ícones do Font Awesome
/* Garanta que o Font Awesome esteja incluído */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
/* Adicionar ícone do Font Awesome após links externos */
a[target="_blank"]:after {
content: "\\f35d"; /* Unicode para o ícone de link externo do Font Awesome */
font-family: 'Font Awesome 5 Free'; /* Família Font Awesome */
font-weight: 900; /* Peso sólido do Font Awesome */
margin-left: 5px; /* Espaçamento entre o link e o ícone */
display: inline-block;
}
Explicação:
-
Importação do Font Awesome:
- O CSS começa importando o CSS do Font Awesome de um CDN.
-
Adição de Ícone:
- A propriedade
contentno seletora[target="_blank"]:afteré definida como\"\\f35d\", que é o Unicode para o ícone de link externo do Font Awesome. - A
font-familyé definida como ‘Font Awesome 5 Free’ efont-weightcomo900para usar a versão sólida do ícone.
- A propriedade
Espero que isso seja útil para aqueles que procuram a mesma coisa que eu.
Observe que, ao incluir sua chave de API do Google Cloud em um componente de tema, você a está expondo ao mundo. Quando as pessoas tiverem acesso à sua chave de API, elas poderão gerar uma conta com uma fatura muito alta. 
Acredito que exista um mecanismo para bloquear o acesso à API no Google Cloud Console; adicione seu site lá.