أدوات المطور · URL التشفير وفك التشفير
encodeURI vs encodeURIComponent: ما هي الأحرف التي يتركها كل واحد بمفرده
· كيف يعمل
ترميز URL جافا سكريبت سير عمل المطور
تختلف الدالتان JavaScript بأحد عشر حرفًا بالضبط، واختيار الوظيفة الخاطئة إما أن يكسر URL أو يفشل في الهروب من القيمة. يوضح هذا المنشور المجموعات ويعطي قاعدة يمكنك تذكرها.
البحث الذي أعاد كل شيء لأن & في "البحث والتطوير" قسم الاستعلام - خطأ ملموس من الوظيفة الخاطئة
يمكن أن يؤدي البحث عن البحث والتطوير عن طريق الخطأ إلى ظهور نتائج لـ R إذا تم إنشاء الكود ?q=R&D يدويًا. علامة الضم هي فاصل بين معلمات الاستعلام؛ ولا يتم حفظه كجزء من q إلا إذا قمت بتشفير القيمة. اختيار encodeURI لتلك القطعة الصغيرة هو الخطأ، وليس خطأ في الخادم. غالبًا ما يكون الخيار الأكثر أمانًا في كود التطبيق هو URLSearchParams، لكن فهم البادئتين JavaScript يجعل تصحيح الأخطاء في التعليمات البرمجية الموجودة أسهل بكثير.
ما تشترك فيه كلتا الدالتين - المجموعة غير المحجوزة التي لا تلمسها أبدًا وترميز النسبة المئوية UTF-8 الذي تطبقه كلتاهما
تترك كلتا الطريقتين ASCII أحرفًا وأرقامًا وعلامات الترقيم غير المحفوظة - _ . ! ~ * ' ( ) لم يتم المساس بها بموجب قواعد التشفير JavaScript. يقومون بتحويل الأحرف غير ASCII إلى UTF-8 بايت قبل كتابة النسبة المئوية الثلاثية: é تصبح %C3%A9، وليست لاتينية واحدة - 1 byte. كما يقومون أيضًا بتشفير مسافة كـ %20. الترميز المئوي يتعلق بالحفاظ على بنية URI؛ إنه ليس HTML هروبًا أو التحقق من صحة الإدخال أو الحماية من البرامج النصية الضارة على الصفحة المتلقية.
الأحرف الأحد عشر فقط التي يتم حفظها بواسطة encodeURI — ; ، / ؟ : @ & = + $ # ولماذا لكل منها معنى هيكلي في URL
بالإضافة إلى ذلك، يحتفظ encodeURI بأحد عشر حرفًا هيكليًا يقوم بتشفير encodeURIComponent: ؛ ، / ؟ : @ & = + $ #. للحصول على عنوان كامل، يؤدي ترك الشرطة المائلة وعلامة الاستفهام وحدها إلى الحفاظ على مساره وبناء جملة الاستعلام. بالنسبة لقيمة استعلام، فإن السماح بـ & أو = من خلال سيؤدي إلى تغيير قائمة المعلمات، في حين أن # الذي لم يتم إلغاؤه يمكنه بدء جزء. تختلف الوظائف على وجه التحديد لأن إحداهما مخصصة لعنوان كامل والأخرى لمكون داخل هذا العنوان.
القاعدة التي تنص على: الحصول على القيم encodeURIComponent، وعناوين URL الكاملة الحصول على encodeURI - ولماذا يكون "إكمال URL" نادرًا أكثر مما يبدو
يتم الحصول على القيم دائمًا تقريبًا encodeURIComponent؛ العناوين الكاملة والمُنظمة بالفعل هي الحالة الأقل شيوعًا لـ encodeURI. بالنسبة إلى URL الذي تقوم بإنشائه برمجيًا، استخدم URL API للتعامل مع معلمات المسار والبحث بدلاً من تسلسل مزيج من القطع المشفرة والخامة. لا تقم بتشفير URL بالكامل باستخدام encodeURIComponent ثم تتوقع أن تستمر الخطوط المائلة والنقطات في العمل كفواصل. وعلى العكس من ذلك، لا تغذي مصطلح استعلام المستخدم من خلال encodeURI واترك علامة الضم الخاصة به نشطة.
مثال عملي: نفس السلسلة من خلال كلتا الدالتين - جدول مخرجات لقيمة بمسافات و& و/ وعلامة التشكيل
خذ البحث والتطوير / المقهى كقيمة استعلام واحدة. يقوم encodeURIComponent بإرجاع R%26D%20%2F%20caf%C3%A9، مما يحمي علامة الضم والشرطة المائلة. تقوم encodeURI بإرجاع R&D%20/%20caf%C3%A9, مع الحفاظ على علامات الترقيم الهيكلية؛ من شأن البادئة الساذجة ?q= الآن إنشاء محدد غير مقصود. كلاهما يقوم بتشفير المسافة واللكنة، لذا فإن الاختبار الذي يستخدم "hello World" فقط يفتقد التمييز المهم. قارن السلاسل التي تم إنشاؤها في ToolAcre، ثم الصقها في المحلل اللغوي URL وتحقق من عدد معلمات الاستعلام التي تظهر.
الأخطاء الشائعة - تشفير URL بالكامل باستخدام encodeURIComponent، وفك التشفير باستخدام النظير الخاطئ
يؤدي تشفير URL كمكون واحد إلى إنتاج %3A%2F%2F حيث يتوقع المستهلك ://. يمكن أن يؤدي فك تشفير العنوان بالكامل قبل التحقق من صحته إلى إعادة تقديم الفواصل المحجوزة بمعاني جديدة. تجنب أيضًا التشفير المزدوج لقيمة تحتوي بالفعل على %26: يمكن أن تصبح علامة النسبة المئوية نفسها %25، لذلك قد تغير طبقة فك التشفير الثانية المعنى مرة أخرى. قم بإقران encodeURIComponent مع decodeURIComponent لأحد المكونات وتعامل مع نسبة الهروب المشوهة على أنها أخطاء إدخال.
ما لا يغطيه هذا هو تشفير النماذج باستخدام +، وإنشاء عناوين URL باستخدام URLSearchParams
يستخدم ترميز استعلام النموذج HTML علامة الجمع لمسافة في التطبيق/x-www-form-urlencoded, والتي تختلف عن إخراج %20 لهاتين الوظيفتين. يعالج URLSearchParams قواعد النموذج هذه نيابةً عنك. لا تتناول هذه المقالة تسوية المسار أو تحويل اسم مضيف Unicode أو تحديد ما إذا كان URL الذي تم فك تشفيره آمنًا عند الطلب؛ يعد ترميز URL بمثابة خطوة تمثيل، وليس سياسة ترخيص.
الخلاصة: قم بتشفير الأجزاء، وليس الكل - كيف يعرض جهاز التشفير ووحدة فك التشفير URL كلا الوضعين حتى تتمكن من رؤية الفرق في مدخلاتك الخاصة
الحد الذي لا يُنسى هو الأجزاء مقابل الكل: قيمة المعلمة هي جزء، لذا استخدم encodeURIComponent أو URLSearchParams. يعرض برنامج التشفير ووحدة فك التشفير URL وظيفتي المتصفح لنفس السلسلة ويحافظ على التجربة محلية. اختبر الإدخال الذي يحتوي على & و= و# وشرطة مائلة وعلامة تمييز قبل أن تقرر أن جهازي التشفير قابلان للتبديل.