شرح صفوف ومحتوى الفقرة
بما أن جميع ملفات الواجهة الأمامية تنتقل إلى متصفح الزائر، تبرز هنا قاعدة أمنية صارمة لا تقبل الاستثناء: يُمنع تماماً تخزين أي مفاتيح سرية أو كلمات مرور داخل ملفات الواجهة الأمامية. يقع بعض المبتدئين عند بناء مشاريعهم الأولى في خطأ وضع بيانات حساسة مباشرة داخل ملفات ، مثل:
- مفاتيح الخدمات السرية المدفوعة (): مثل المفاتيح السرية لبوابات الدفع الإلكتروني أو خدمات الذكاء الاصطناعي أو إرسال الرسائل النصية؛ فوضعها في الواجهة الأمامية يسمح لأي زائر بنسخها من تبويب واستهلاك رصيدك المالي.
- بيانات الاتصال بقواعد البيانات (): لا تتصل الواجهة الأمامية بقاعدة البيانات مباشرة أبداً، بل تتحدث فقط مع الواجهة الخلفية عبر آمن.
- كلمات المرور أو رموز الإدارة الثابتة في الكود: كتابة شرط فحص كلمة مرور داخل كود المتصفح يفضح كلمة المرور فوراً لأي شخص يقرأ ملف السكربت.
JavaScript
// WRONG: Never put a private secret key in Front-End JavaScript!
// const SECRET_PAYMENT_KEY = "sk_live_987654321_secret";
// CORRECT: Call your own Back-End API; the server holds the secret safely
fetch("/api/checkout/session", { method: "POST" });جرّب المحاكي التفاعلي الآتي لمقارنة الممارسات الخاطئة في الواجهة الأمامية مقابل التصميم الآمن والسريع: