しばらく前、フォーラムのメンバーが提供する外部リンクからウェブサイトを保護する戦略を探していました。有害なURLの独自のデータベースを作成しようとしていますが、思ったよりも難しいです。リンクの量が膨大で、整理するのが大変です。そこで、私の要求に合ったAPIサービスを探し、Googleが提供する無料のサービスAPIであるGoogle Safe Browsing APIを見つけ、Discourseフォーラムに追加してみました。
私のフォーラムでの結果
*マウスホバー時
手順は以下の通りです。
Discourseのすべての外部リンクの後にアイコンを追加し、Google Safe Browsing Lookup API (v4)を使用してリンクのセキュリティステータスを示すツールチップを表示するには、次の手順に従います。
-
Google Safe BrowsingのAPIキーを作成する：
- Google Cloud Consoleにアクセスします。
- 新しいプロジェクトを作成するか、既存のプロジェクトを使用します。
- Safe Browsing APIを有効にします。
- このプロジェクトのAPIキーを作成します。
*すべて無料です。
-
Discourse管理画面にログインする：
- 管理者アカウントでDiscourseにログインします。
-
テーマのカスタマイズにアクセスする：
- 「管理」->「カスタマイズ」->「テーマ」に移動します。
- 編集したいテーマを選択するか、新しいテーマまたはテーマコンポーネントを作成します。
-
CSSを追加する：
-
希望するテーマの「CSS/HTMLを編集」をクリックします。
-
「CSS」タブに、次のコードを追加します。
a[target="_blank"]:after { content: url('https://example.com/icon.png'); /* 希望するアイコンのURLに置き換えてください */ margin-left: 5px; /* リンクとアイコンの間隔 */ 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%; /* ツールチップの位置 */ left: 50%; margin-left: -100px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
-
-
JavaScriptを追加する：
-
テーマの「ヘッダー」タブに、次のコードを追加します。
<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'; // 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>このJavaScriptは次のことを行います。
- すべての外部リンクを見つけ、新しいタブで開くように設定します。
- リンクの後にアイコンを追加します。
- Google Safe Browsing APIを使用してリンクをチェックし、結果をツールチップに表示します。
-
-
テーマを保存して適用する：
- 「保存」をクリックして変更を保存します。
- 新しいテーマを作成した場合は、それをデフォルトテーマとして設定するか、希望するユーザーグループに割り当てます。
これらの手順により、Discourseインスタンスのすべての外部リンクにアイコンが表示され、ツールチップにGoogle Safe Browsing APIを使用したリンクのセキュリティステータスが表示されるようになります。
セキュリティのための編集
Google APIの使用制限の「ウェブサイト」セクションに、ご自身のウェブサイトを追加する必要があります。
オプション
Font Awesomeアイコンを使用する
Font Awesomeのアイコンを使用するには、CSSを次のように更新します。
Font Awesomeアイコンを使用したCSSの更新
/* Font Awesomeが確実に含まれていることを確認してください */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
/* 外部リンクの後にFont Awesomeアイコンを追加 */
a[target="_blank"]:after {
content: "\f35d"; /* Font Awesomeの外部リンクアイコンのUnicode */
font-family: 'Font Awesome 5 Free'; /* Font Awesomeファミリー */
font-weight: 900; /* Font Awesomeのソリッドウェイト */
margin-left: 5px; /* リンクとアイコンの間隔 */
display: inline-block;
}
説明：
-
Font Awesomeのインポート：
- CSSは、CDNからFont Awesome CSSをインポートすることから始まります。
-
アイコンの追加：
a[target="_blank"]:afterセレクターのcontentプロパティは、Font Awesomeの外部リンクアイコンのUnicodeである"\f35d"に設定されます。font-familyは’Font Awesome 5 Free’に、font-weightは900に設定され、アイコンのソリッドバージョンが使用されます。
私も同じことを探している方々の役に立つことを願っています。
テーマコンポーネントにGoogle Cloud APIキーを含めると、世界中に公開されることになります。APIキーにアクセスできる人がいると、非常に高額な請求が発生する可能性があります。
Google Cloud Console で API アクセスをブロックするメカニズムがあると思います。ウェブサイトを追加してください。