يُعد ترميز عنوان URL، المعروف أيضًا باسم الترميز النسبي، أمرًا ضروريًا لنقل البيانات بأمان داخل عناوين URL. تقوم هذه العملية بتحويل الأحرف غير المسموح بها في عناوين URL القياسية (مثل المسافات، والرموز الخاصة، والحروف المُشددة) إلى تنسيق يمكن لخوادم الويب فهمه. توفر جافا سكريبت دالتين قويتين، هما encodeURI() و encodeURIComponent()، للتعامل مع هذا الأمر بكفاءة. إن فهم الاختلافات بينهما هو المفتاح لبناء تطبيقات ويب قوية وآمنة.
جدول المحتويات
- ما هو الفرق بين URI و URL؟
- ترميز عنوان URL باستخدام طريقة
encodeURI()في جافا سكريبت - ترميز عنوان URL باستخدام طريقة
encodeURIComponent()في جافا سكريبت - اختيار طريقة الترميز المناسبة
ما هو الفرق بين URI و URL؟
على الرغم من استخدام المصطلحين URI (معرف المورد الموحد) و URL (محدد موقع المورد) بالتبادل في كثير من الأحيان، إلا أنهما مختلفان. يُعد URI مصطلحًا عامًا يُحدد موردًا، بينما URL هو نوع محدد من URI يُحدد موقع مورد من خلال تحديد آلية الوصول إليه (مثل HTTP). فكر في URI على أنه العنوان و URL على أنه الاتجاهات إلى هذا العنوان. لأغراض عملية في ترميز جافا سكريبت، يكون الفرق ضئيلاً؛ كلاهما يتطلب ترميزًا صحيحًا للتعامل مع الأحرف الخاصة.
ترميز عنوان URL باستخدام طريقة encodeURI() في جافا سكريبت
تقوم طريقة encodeURI() بترميز URI أو URL كامل. تستهدف الأحرف الخاصة التي ليست مسموحًا بها في مسارات URL، أو معلمات الاستعلام، أو مُعرفات الأجزاء، تاركة الأحرف التي تعتبر آمنة بشكل عام (مثل الشرطة المائلة /، وعلامات الاستفهام ?، وعلامات ampersand &) دون تغيير.
let url = "https://www.example.com/search?q=hello world";
let encodedUrl = encodeURI(url);
console.log(encodedUrl); // الإخراج: https://www.example.com/search?q=hello%20world
تستبدل encodeURI() المسافات بـ %20 (الت تمثيل النسبي المئوي لمسافة). وهي مناسبة لترميز عناوين URL الكاملة، ولكن ليس المكونات الفردية التي قد تحتوي على أحرف محجوزة.
ترميز عنوان URL باستخدام طريقة encodeURIComponent() في جافا سكريبت
encodeURIComponent() أكثر قوة، حيث تقوم بترميز جميع الأحرف الخاصة، بما في ذلك تلك التي تعتبر آمنة بشكل عام داخل عناوين URL. هذا يجعلها مثالية لترميز مكونات URL الفردية (معلمات الاستعلام أو مُعرفات الأجزاء). سيؤدي ترميز عنوان URL بالكامل باستخدام هذه الطريقة إلى عنوان URL غير صحيح.
let urlBase = "https://www.example.com/search?q=";
let query = "hello world & special characters";
let encodedQuery = encodeURIComponent(query);
let completeUrl = urlBase + encodedQuery;
console.log(completeUrl); // الإخراج: https://www.example.com/search?q=hello%20world%26%20special%20characters
لاحظ كيف قامت encodeURIComponent() بترميز جميع المسافات وعلامة ampersand. هذا يمنع السلوك غير المتوقع وثغرات الأمان عند إنشاء عناوين URL ديناميكيًا.
اختيار طريقة الترميز المناسبة
استخدم encodeURI() لعناوين URL الكاملة و encodeURIComponent() للمكونات الفردية (معلمات الاستعلام، مُعرفات الأجزاء). يمكن أن يؤدي إساءة استخدام هاتين الوظيفتين إلى عناوين URL معطلة وأخطاء على جانب الخادم. قم دائمًا بفك ترميز عنوان URL على جانب الخادم لاسترداد البيانات الأصلية.