منذ فترة، كنت أبحث عن استراتيجية لحماية موقعي من الروابط الخارجية التي يقدمها أعضاء المنتدى. أحاول إنشاء قاعدة بيانات خاصة بي للروابط الضارة. لكن الأمر أصعب مما تعتقد. الحجم الهائل للروابط يصعب فرزه. لذلك بحثت عن خدمة API تناسب متطلباتي واكتشفت Google Safe Browsing API، وهي خدمة API مجانية تقدمها Google، وحاولت إضافتها إلى منتدى Discourse.
النتيجة في منتدى
عند تمرير الماوس
إليك الطريقة.
لإضافة أيقونة بعد جميع الروابط الخارجية في Discourse وعرض تلميحات تظهر حالة أمان الروابط باستخدام Google Safe Browsing Lookup API (v4)، اتبع الخطوات التالية:
-
إنشاء مفتاح API لـ Google Safe Browsing:
- انتقل إلى Google Cloud Console
- أنشئ مشروعًا جديدًا أو استخدم مشروعًا موجودًا
- قم بتمكين Safe Browsing API
- أنشئ مفتاح API لهذا المشروع
- كل هذا مجاني.
-
تسجيل الدخول إلى Discourse Admin:
- قم بتسجيل الدخول إلى Discourse باستخدام حساب المسؤول الخاص بك
-
الوصول إلى تخصيص المظهر:
- انتقل إلى “Admin” → “Customize” → “Themes”
- اختر المظهر الذي تريد تعديله أو أنشئ مظهرًا جديدًا أو مكون مظهر
-
إضافة CSS:
- انقر على “Edit 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:
- في علامة التبويب “Header” للمظهر، أضف الكود التالي:
<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 وعرض النتيجة في تلميح
-
حفظ وتطبيق المظهر:
- انقر على “Save” لحفظ التغييرات
- إذا أنشأت مظهرًا جديدًا، قم بتعيينه كمظهر افتراضي أو قم بتعيينه لمجموعات المستخدمين المطلوبة
ستضمن هذه الخطوات أن جميع الروابط الخارجية في مثيل Discourse الخاص بك سيكون لها أيقونة بعدها، وستعرض التلميحات حالة أمان الروابط باستخدام Google Safe Browsing API.
تعديل للأمان
يجب عليك إضافة موقعك إلى قسم حدود الموقع لاستخدام Google API.
خيار
استخدام أيقونة Font Awesome
لاستخدام أيقونة من Font Awesome. إليك CSS المحدث:
CSS المحدث بأيقونات Font Awesome
/* تأكد من تضمين 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"; /* Unicode لأيقونة الرابط الخارجي Font Awesome */
font-family: 'Font Awesome 5 Free'; /* عائلة Font Awesome */
font-weight: 900; /* وزن Font Awesome الصلب */
margin-left: 5px; /* المسافة بين الرابط والأيقونة */
display: inline-block;
}
شرح:
-
استيراد Font Awesome:
- يبدأ CSS باستيراد CSS الخاص بـ Font Awesome من CDN.
-
إضافة الأيقونة:
- تم تعيين خاصية
contentفي محددa[target="_blank"]:afterإلى\"\\f35d\"، وهو Unicode لأيقونة الرابط الخارجي لـ Font Awesome. - تم تعيين
font-familyإلى ‘Font Awesome 5 Free’ وfont-weightإلى900لاستخدام النسخة الصلبة من الأيقونة.
- تم تعيين خاصية
آمل أن يكون هذا مفيدًا لمن يبحث عن نفس الشيء مثلي.
لاحظ أن تضمين مفتاح واجهة برمجة تطبيقات Google Cloud الخاص بك في مكون سمة يعرضه للعالم. عندما يتمكن الأشخاص من الوصول إلى مفتاح واجهة برمجة التطبيقات الخاص بك، فيمكنهم إحتمال أن يضعوك في فاتورة كبيرة جدًا. 
أعتقد أن هناك آلية لحظر الوصول إلى واجهة برمجة التطبيقات في Google Cloud Console؛ أضف موقعك الإلكتروني هناك.