العلامات المتعلقة بالبيانات الوصفية
توضح هذه المقالة العلامات المتعلقة بالمعلومات الوصفية۔
تشرح علامة <meta>، بما في ذلك النقاط المتعلقة بتحسين محركات البحث (SEO)، والتصميم المتجاوب، وسياسة أمان المحتوى Content-Security-Policy۔
YouTube Video
العلامات المتعلقة بالبيانات الوصفية
علامة <meta>
1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">- وسم
<meta>يوفر البيانات الوصفية لوثيقة HTML۔ لا تُعرض البيانات الوصفية على الصفحة لكنها تُستخدم بواسطة محركات البحث والمتصفحات۔ يُستخدم وسم<meta>لوصف الصفحات، والكلمات المفتاحية، ومعلومات المؤلف، وإعدادات التصميم التكيفي۔
علامة <meta name="viewport">
1<meta name="viewport" content="width=device-width, initial-scale=1">- وسم
<meta name="viewport">يتحكم في التخطيط وتدرج صفحات الويب على الأجهزة المختلفة۔ يستخدم بشكل شائع في التصميم المتجاوب لضمان العرض المناسب على الأجهزة المحمولة۔
علامة <meta name="description">
1<meta name="description" content="An example webpage">- يستخدم وسم
<meta name="description">لوصف محتوى صفحة الويب بإيجاز۔ تستخدم محركات البحث هذا الوصف لعرض ملخص عن الصفحة في نتائج البحث۔
علامة <meta name="keywords">
1<meta name="keywords" content="HTML, CSS, JavaScript">- يقدم وسم
<meta name="keywords">قائمة بالكلمات الرئيسية المتعلقة بمحتوى الصفحة۔ تستخدم محركات البحث هذه الكلمات الرئيسية لفهم محتوى الصفحة بشكل أفضل۔
علامة <meta name="author">
1<meta name="author" content="John Doe">- يحدد وسم
<meta name="author">مؤلف صفحة الويب۔ تستخدم محركات البحث والأدوات هذه المعلومات بشكل أساسي لتحديد مؤلف الصفحة بدقة۔
علامة <meta http-equiv="refresh">
1<meta http-equiv="refresh" content="5; url=https://example.com">- يستخدم وسم
<meta http-equiv="refresh">لتحديث الصفحة تلقائيًا أو إعادة التوجيه إلى عنوان URL آخر بعد فترة زمنية محددة۔ إنه مفيد لإعادة تحميل الصفحة أو توجيه المستخدم۔
علامة <meta http-equiv="cache-control">
1<meta http-equiv="cache-control" content="no-cache">- يستخدم وسم
<meta http-equiv="cache-control">للتحكم في سلوك التخزين المؤقت لصفحة الويب۔ يمكنه تحديد ما إذا كان سيتم تخزين الصفحة أو التحقق منها عند الوصول اللاحق۔
علامة <meta http-equiv="expires">
1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">- يحدد وسم
<meta http-equiv="expires">تاريخ انتهاء صلاحية لمحتوى الصفحة۔ بمجرد مرور التاريخ المحدد، يصبح المحتوى قديمًا ويتم توجيه المتصفح لاسترجاع نسخة جديدة۔
علامة <meta http-equiv="X-UA-Compatible">
1<meta http-equiv="X-UA-Compatible" content="IE=edge">- يستخدم وسم
<meta http-equiv="X-UA-Compatible">لتحديد وضع التوافق لمتصفح إنترنت إكسبلورر۔ يضمن هذا الوسم أن يستخدم المتصفح النسخة المناسبة من محرك العرض لعرض الصفحة۔
علامة <meta http-equiv="content-security-policy">
سمة http-equiv="content-security-policy" في علامة meta بـ HTML هي وظيفة لتطبيق قواعد أمان محددة في المتصفح لتعزيز أمان صفحة الويب۔ باستخدام هذه السمة، يمكن لمطوري المواقع وضع سياسات فيما يتعلق بتحميل الموارد وتنفيذ النصوص البرمجية لمنع الهجمات مثل XSS (البرمجة النصية عبر المواقع) وحقن البيانات۔
ما هو Content-Security-Policy؟
Content-Security-Policy (CSP) هو نوع من ترويسات HTTP يُستخدم للتحكم في الموارد الخارجية (مثل الصور، النصوص البرمجية، أنماط CSS، إلخ) التي يمكن تحميلها على صفحة الويب وما هي أنواع الشفرات التي يمكن تنفيذها۔ عادةً ما يتم إرسالها كترويسة HTTP ولكن يمكن أيضًا تعريفها داخل HTML باستخدام علامة meta۔ تتيح هذه الطريقة تحديد سياسة أمان المحتوى CSP على جانب العميل بدلاً من تعيين الترويسات على جانب الخادم۔
على سبيل المثال، يمكنك إعداد سياسة أمان المحتوى (CSP) في علامة HTML meta كما يلي:۔
1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">في هذا المثال، يتم تعيين السياسات التالية:
default-src 'self': بشكل أساسي، يتم تحميل جميع الموارد فقط من المصدر نفسه (الذات)۔img-src https://example.com: يتم تحميل الصور فقط منhttps://example.com۔script-src 'self' https://apis.google.com: لا يمكن تنفيذ النصوص البرمجية إلا من المصدر نفسه أو منhttps://apis.google.com۔
الاختلافات بين http-equiv و رؤوس HTTP
عادةً ما يتم إرسال سياسة أمان المحتوى Content-Security-Policy من الخادم إلى العميل كترويسة HTTP۔ ومع ذلك، إذا قمت بإعدادها على جانب العميل باستخدام علامة meta، يمكن كتابتها مباشرةً داخل HTML۔
ومع ذلك، هناك بعض الاختلافات المهمة بين تعيينه كرأس HTTP وتحديده بعلامة meta:
-
الأولوية: تتمتع سياسة أمان المحتوى (CSP) المرسلة عبر ترويسة HTTP بأولوية على تلك المحددة في علامة
meta۔ هذا يعني أنه إذا تم تعيين سياسة CSP على جانب الخادم، فلن يتم تجاوزها بواسطة علامةmetaالمستخدمة على جانب العميل۔ -
توقيت التطبيق: يتم تطبيق سياسة أمان المحتوى (CSP) المحددة عبر ترويسة HTTP قبل تحميل الصفحة۔ من ناحية أخرى، يتم تطبيق سياسة CSP المحددة عبر علامة
metaعند تحليل HTML، لذا قد تكون الموارد محملة بالفعل۔
التوجيهات المتاحة في CSP
في سياسة أمان المحتوى (CSP)، تُستخدم توجيهات متعددة لتحديد السياسات التي تسمح أو تمنع تحميل وتنفيذ أنواع معينة من الموارد۔ تشمل التعليمات الشائعة ما يلي:۔
- default-src: تحدد السياسة الافتراضية للمصدر لجميع الموارد۔ تنطبق على الموارد غير المحددة بواسطة توجيهات أخرى۔
- script-src: تحدد المصدر الخاص بجافا سكريبت۔ لمنع هجمات XSS، يمكنك تقييد تحميل النصوص البرمجية من المواقع الخارجية۔
- style-src: تحدد المصدر الخاص بنمط CSS۔ عن طريق تقييد تحميل أنماط CSS من المصادر الخارجية، يمكنك منع الهجمات على أنماط موقعك۔
- img-src: تحدد المصدر الخاص بالصور۔ يمكنك تقييد تحميل الصور من المصادر الخارجية۔
- connect-src: يحدد عناوين الـ URLs المسموح بها لطلبات XMLHttpRequests واتصالات WebSocket۔ يضمن هذا أمان اتصالات API الخارجية واتصالات WebSocket۔
من خلال الجمع بين هذه التوجيهات، يمكنك إنشاء سياسات مفصلة للموارد على صفحتك الإلكترونية۔
إعدادات CSP عملية لتعزيز الأمان
فيما يلي مثال على إعدادات CSP لتعزيز أمان موقعك الإلكتروني۔ يمكن أن يقلل هذا من خطر هجمات XSS وتسرب البيانات۔
1<meta http-equiv="Content-Security-Policy"
2 content="default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; style-src 'self'; base-uri 'self'; form-action 'self';">تُطبق السياسات التالية مع هذا التكوين:
default-src 'self': يتم تحميل جميع الموارد فقط من نفس المصدر۔script-src 'self' https://trusted-cdn.com: يتم تحميل السكربتات فقط من نفس المصدر أو من شبكة CDN موثوقة۔object-src 'none': لا يتم استخدام وسمobject۔ يهدف هذا إلى منع الهجمات المستندة إلى Flash أو الإضافات۔style-src 'self': يتم تحميل الأنماط فقط من الأصل نفسه.۔base-uri 'self': قاعدة عنوان URL المحددة بعلامة<base>محدودة بالأصل نفسه.۔form-action 'self': وجهة إرسال النموذج محدودة بالأصل نفسه.۔ يقلل ذلك من مخاطر إرسال بيانات النموذج إلى مواقع خارجية.۔
الخاتمة
باستخدام http-equiv="content-security-policy" لتعريف CSP داخل HTML، يمكن تعزيز أمان صفحة الويب.۔ يعد CSP المُعد بشكل صحيح أداة قوية تقلل من مخاطر هجمات XSS وتسرب البيانات وتحمي موقعك على الويب.۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔