معمل الواجهة الآمنة: اعرض نص المستخدم والذكاء الاصطناعي

ابدأ بتمرين محلي لا يرسل أي بيانات

تحتاج محرر نصوص ومتصفحًا ومعرفة أولية بعناصر HTML وأحداث JavaScript. لا تحتاج حساب Gammal Tech أو استدعاء ذكاء اصطناعي مدفوعًا في المرحلة الأولى. استخدم صفحة تملكها ونصوصًا وهمية. الأمثلة كود تنقله إلى ملف التعلم، وليست أدوات تفاعلية تعمل داخل المقالة.

أنشئ صفحة واحدة تحتوي على العناصر التالية، وضع JavaScript بعدها أو حمّله بعد وجودها في المستند:

<label for="lab-note">Fictional learning note</label>
<textarea id="lab-note" maxlength="300"></textarea>
<button id="preview-note" type="button">Preview locally</button>
<p id="preview-status" role="status"></p>
<pre id="safe-output"></pre>

منطقة المعاينة عنصر pre عادي يحافظ على ظهور فواصل السطور. لكن طريقة إدخال المحتوى فيه يحددها الكود. إبقاء النسخة الأولى محلية يساعدك على عزل سلوك العرض عن تسجيل الدخول والشبكة والتكلفة. يمكنك ترجمة العناوين الظاهرة، مع الحفاظ على المعرفات حتى يعمل المثال كما هو.

نفذ مسارًا واضحًا لعرض النص

توصي إرشادات OWASP لمنع XSS بمعالجة المخرجات حسب موضع العرض. في العنصر النصي العادي هنا، مرر النص الأصلي إلى textContent بدلًا من إنشاء HTML من الملاحظة.

const note = document.getElementById("lab-note");
const preview = document.getElementById("preview-note");
const status = document.getElementById("preview-status");
const output = document.getElementById("safe-output");
preview.addEventListener("click", () => {
  const value = note.value;
  if (value.trim().length === 0 || value.length > 300) {
    status.textContent = "Enter 1 to 300 characters.";
    output.textContent = "";
    return;
  }
  output.textContent = value;
  status.textContent = "Local text preview. Nothing was sent.";
});

عند رفض المدخل، يمسح المثال المعاينة السابقة حتى لا تبدو نتيجة قديمة كأنها ناتج التعديل الجديد. رسائل الحالة أيضًا تُعرض كنص، ولا يسجل المثال الملاحظات أو الأخطاء. لا تحول العلامات يدويًا إلى كيانات HTML قبل استخدام textContent، لأن المتعلم قد يرى حينها تهجئة الكيانات بدلًا من الحروف التي كتبها.

اختبر حروفًا تكشف طريقة تفسير المحتوى

اكتب توقع النتيجة أولًا، ثم جرب الأمثلة غير الضارة التالية. أنت تراجع مكونًا تملكه، ولا تختبر موقعًا تابعًا لشخص آخر.

اختبر نصًا عربيًا وطولًا عند الحد المسموح، وسجل المتصفح وإصدار الملف. نجاح الحالات يثبت السلوك المقصود لهذا المكون، ولا يعني أن الموقع كله خالٍ من الثغرات. وإذا غيّرت الكود، أعد الحالات المتأثرة بدلًا من الاعتماد على صورة قديمة.

عامل الإجابة الوهمية بنفس القاعدة

قد تحتوي إجابة مولدة على روابط أو تنسيق أو نص يشبه الكود. استخدم قيمة ثابتة في هذا التمرين بدلًا من استدعاء خدمة حقيقية:

// A fictional local fixture, not a response from a live AI call.
const fictionalAnswer = "<strong>Check the project settings</strong>";
output.textContent = fictionalAnswer;

يجب أن تظهر علامات strong نفسها، لا عبارة بخط عريض. سمّ المثال داخل ملف أعمالك «إجابة وهمية للاختبار» حتى لا يظنه شخص تجربة حية. وعند دمج استدعاء موثق لاحقًا، اجعل النص المسترجع يمر بنفس مسار العرض، مع حالات انتظار وفشل مناسبة.

إذا احتاج المنتج محتوى منسقًا، فهذا تغيير مستقل يتطلب تحديد الصيغ المسموحة وآلية تنقية يتم تحديثها. لا تستبدل textContent بـ innerHTML لمجرد تحسين شكل إجابة واحدة. كذلك تعليمات النموذج العامة لا تمثل حاجز حماية داخل المتصفح.

ضع للروابط قاعدة تختلف عن النص

النص الذي سيصبح وجهة رابط يحتاج قرارًا خاصًا. تقبل الدالة التالية عناوين HTTPS المطلقة فقط لحقل موارد افتراضي:

function approvedWebAddress(value) {
  if (typeof value !== "string" || value.length > 300) return null;
  try {
    const url = new URL(value);
    return url.protocol === "https:" ? url.href : null;
  } catch {
    return null;
  }
}

جرب عنوان HTTPS صحيحًا وجملة عادية وعنوان HTTP. يجب رفض الأخيرين وفق سياسة هذا المعمل. إذا أنشأت رابطًا لاحقًا، فاعرض عنوانه المرئي عبر textContent وحدد وجهته بعد التحقق فقط. وإذا لم تتطلب الوظيفة روابط يكتبها المستخدم، فاستخدم وجهة ثابتة معروفة.

هذه الدالة لا تثبت صدق الموقع المقصود أو أمان محتواه، ولا تصلح تلقائيًا للتحقق من رفع الملفات أو إعادة التوجيه أو جلب عناوين من السيرفر. اكتب حدودها بجوارها حتى لا تُنسخ إلى مهمة مختلفة دون مراجعة. اختيار القاعدة جزء من تصميم الوظيفة وليس مجرد دالة عامة تسمى «آمنة».

افصل سهولة الاستخدام عن فرض الصلاحيات

حد الطول وفحص JavaScript يساعدان المستخدم، لكن الشخص يتحكم في متصفحه ويمكنه تغيير القيم أو تجاوز الزر. لذلك لا تستطيع هذه الفحوص وحدها فرض صلاحية حساب أو سعر أو حالة دفع أو حد استخدام للخدمة.

ارسم ثلاث خانات: المتصفح، وAPI المستضاف، وأي نظام عمل موثوق موجود. ضع المعاينة في خانة المتصفح. وضع قرار السماح بخدمة مدفوعة عند المكون القادر على التحقق من الاستحقاق. إذا لم تجد مكونًا يؤدي هذا الدور، فسجل أن التصميم غير مكتمل. إخفاء حقل أو تعقيد قراءة JavaScript لا يحل المشكلة.

اكتب ما تتحقق منه الواجهة لتسهيل الاستخدام، وما يحتاج جهة موثوقة لفرض القرار. هذه مهارة أساسية في الأمن السيبراني حتى لو كانت الصفحة بسيطة جدًا من ناحية الشكل.

احمِ طريقة وصول الكود إلى المستخدم

يمكن أن تستضيف Gammal Tech وظائف دخول وتخزين مدعومة، بينما تعرض واجهتك البيانات المسترجعة. تغيير ضار في الواجهة قد يؤثر على المعلومات والعمليات المتاحة للصفحة. لذلك احمِ حسابات الدومين والنشر ومستودع الكود.

توضح إرشادات OWASP للسكربتات الخارجية أهمية مراجعة الكود المدمج. احصر أدوات التحليلات والإضافات في مشروعك، واكتب سبب وجود كل واحدة واحذف غير الضروري. اعتماد الدومين لا يجعل كل كود منشور عليه موثوقًا. اسأل من يستطيع إضافة سكربت ومن يراجع التغيير قبل وصوله إلى موقع العميل.

سلّم المكون مع مذكرة مراجعة صغيرة

سلّم صفحة التعلم وجدول النتائج الفعلية والإجابة الوهمية ورسم توزيع المسؤوليات. أضف حالة غير مقبولة تعاملت معها بصورة صحيحة واشرح سبب مسح المعاينة السابقة. حدد هل ظل الملف محليًا أم نُشر على دومين تملكه.

للقبول، يجب أن تبقى النصوص حرفية، وتتبع الروابط السياسة المكتوبة، وتظهر حالة واضحة للمدخل غير المقبول، وألا يرسل هذا المعمل المحلي أي طلب. اكتب المراجعة الجديدة المطلوبة عند إضافة تنسيق أو أداة خارجية أو API فعلي. بذلك يصبح المكون قابلًا لإعادة الاستخدام دون ادعاء أنه شهادة أمان للتطبيق بالكامل.

أسئلة شائعة

هل يجب استدعاء خدمة الذكاء الاصطناعي لإتمام المعمل؟

لا. نستخدم إجابة وهمية محلية بوضوح لاختبار العرض، دون طلبات شبكة أو رسوم استخدام.

هل textContent تحل كل مشاكل الواجهة؟

لا. هي مناسبة هنا للعناصر النصية العادية. الروابط والمحتوى المنسق وحسابات النشر وقرارات الصلاحيات تحتاج ضوابط تناسب كل حالة.