أدوات المطور · URL التشفير وفك التشفير
ما يشفره المُنشئ URL لك: مجموعات التشفير المئوية للمتصفح
· كيف يعمل
ترميز URL جافا سكريبت whatwg واجهة برمجة تطبيقات الويب
يقوم URL API بترميز بعض الأحرف بشكل صامت ويترك البعض الآخر بمفرده، اعتمادًا على أي جزء من URL يصلون إليه. يشرح هذا المنشور مجموعات ترميز WHATWG وكيفية التنبؤ بالمخرجات.
المساحة التي أصبحت %20 و| التي بقيت - حالة ملموسة حيث قام URL() الجديد بتشفير المسار جزئيًا
عند تشغيل URL("https://example.com/hello العالم") الجديد، تصبح المساحة %20 بصمت. لكن الجديد URL("https://example.com/hello|world") يترك الأنبوب دون تغيير. هذا الاختلاف ليس عشوائيًا. يحدد معيار WHATWG URL مجموعات أحرف منفصلة للتشفير لكل مكون URL: المسار والاستعلام والجزء ومعلومات المستخدم لكل منها قواعدها الخاصة. فهم هذه المجموعات يعني توقع ما سيفعله المُنشئ.
تحتاج المساحة إلى ترميز النسبة المئوية لأنها غير آمنة على HTTP وتؤدي إلى انقطاع إمكانية القراءة. الأنبوب مختلف: ليس حرفًا محجوزًا يقسم البنية، لذا يتركه المتصفح بمفرده. يتم رسم الخط الفاصل بين الأمان وسهولة القراءة بواسطة WHATWG، وليس التخمين. يُظهر اختبار "hello World" التشفير؛ يكشف اختبار "hello|world" عن حدود كل جزء URL.
مجموعة واحدة من URL والعديد من مجموعات التشفير - المسار والاستعلام والجزء ومعلومات المستخدم لكل منها قائمة خاصة بها من الأحرف التي يجب الهروب منها
تحتوي إحدى URL على مناطق متعددة، لكل منها قواعد التشفير الخاصة بها. يتبع المسار مجموعة واحدة، ويستعلم عن مجموعة أخرى، ويقسم مجموعة ثالثة، ومعلومات المستخدم مجموعة رابعة. تصبح المسافة %20 في المسار والاستعلام. تظل علامة يساوي في الاستعلام، حيث تفصل المفاتيح والقيم، ولكن encodeURIComponent يحولها إلى %3D. يعرف مُنشئ URL سياقه ويطبق القواعد الصحيحة لكل جزء.
مجموعات التشفير دقيقة وصغيرة. يحتوي المسار على قائمة أحرف خاصة به؛ يحتوي الاستعلام على قائمة مشابهة ولكنها مختلفة. وهذا يعكس الشخصيات التي لها معنى هيكلي. تعمل الشرطة المائلة للأمام على تقسيم أجزاء المسار، لذا يقوم encodeURIComponent بتشفيرها كـ %2F. في الجزء، يمكن أن توجد شرطة مائلة للأمام دون كسر أي شيء. إن فهم قواعد WHATWG يعني التنبؤ بالمخرجات دون تشغيل التعليمات البرمجية.
لماذا يكون التشفير المئوي أحادي الاتجاه: ما يبقى مشفرًا يبقى على هذا النحو
يقوم المُنشئ URL بإجراء تسوية أحادية الاتجاه. قم بتمرير "%20" إلى URL الجديد وسينتج %20 بدون تغيير. يتعرف المنشئ على أنه مشفر بالفعل ويتركه بمفرده. هذا هو السبب وراء أهمية التشفير المزدوج: قم بالتشفير مرة واحدة، والمرور عبر المنشئ، وعصي التشفير. لا يقوم المُنشئ بفك التشفير وإعادة التفسير وإعادة التشفير؛ يقرأ إلى الأمام.
تؤثر هذه الخاصية أحادية الاتجاه على التطبيقات التي تثق في URL.href باعتبارها أساسية. إذا قمت بتسلسل إدخال المستخدم مع المسار الخاص بك، فسيتم تسوية الإدخال ولكن لا يتم فك تشفيره. تظل قيمة مثل "my+file" كما هي، أو تصبح "my%2Bfile" في بعض السياقات. قد تتم قراءة التعليمات البرمجية اللاحقة التي تستخدم decodeURIComponent بالإضافة إلى مسافة إذا كانت من بيانات النموذج. يتم تطبيع المنشئ مرة واحدة؛ وبعد ذلك تكون قيمتك ثابتة.
مثال عملي: تمرير نفس السلسلة الفوضوية عبر URL() الجديدة وقراءة href واسم المسار وsearchParams - ثلاث طرق عرض مختلفة
خذ "hello world&foo=bar|test#anchor" وقم بوضعه في URL الجديد بمكونات مختلفة. تصبح المساحة %20 في كل مكان. يبقى علامة الضم في المسار (لا يوجد أي معنى هيكلي هناك)، ولكن في الاستعلام يبقى أيضًا (يفصل المعلمات، لذا فإن التسوية ستفقد الحدود بين "q =" و"foo = bar"). يتصرف الأنبوب والتجزئة بشكل مختلف حسب الموقع.
تُظهر قراءة href واسم المسار وsearchParams ثلاث طرق عرض مختلفة. يُظهر اسم المسار المسار المشفر بدون مخطط أو مضيف أو استعلام. يوفر searchParams معلمات تم فك تشفيرها، لذا يصبح "hello+world" من بيانات النموذج مسافة. خاصية البحث تحافظ على السلسلة الحرفية. يعرض href URL الذي تم تطبيعه بالكامل. هذه تتعايش على كائن واحد؛ الذي ستستخدمه يعتمد على خطوتك التالية.
URLSearchParams وقاعدة ترميز النموذج - لماذا تنتج + للمسافات بينما ينتج اسم المسار %20
يطبق URLSearchParams ترميز النموذج: تصبح المسافة علامة زائد، وليس %20. URLSearchParams الجديد ({q: "hello World"}) ينتج "q=hello+world"، وليس "q=hello%20world". هذه هي قاعدة التطبيق التاريخية /x-www-form-urlencoded. ولكن إذا قمت بتمرير هذه السلسلة كاستعلام أولي إلى URL الجديد، فستظل علامة الجمع زائدًا؛ فقط URLSearchParams يقوم بفك تشفيرها كمساحة. المنشئ مخلص لما يراه.
يؤدي هذا الاختلاف في علامة الزائد إلى حدوث أخطاء شائعة. يستخدم URL من شريط العناوين %20 للمسافات. تستخدم بيانات النموذج plus. إذا قمت بفك التشفير باستخدام decodeURIComponent (الذي يقرأ علامة الجمع حرفيًا) بدلاً من URLSearchParams.get، فستصبح المسافات أحرفًا زائدًا. يعرض برنامج التشفير ووحدة فك التشفير URL كلاً من: لصق "hello+world" ومقارنة أوضاع المكونات والنماذج لمعرفة مكان ظهور المساحة.
المقارنة مع encodeURI - حيث يتفق الاثنان وأين يختلفان
يعد مُنشئ URL وencodeURIComponent أداتين مختلفتين. يقوم encodeURIComponent بتشفير كل شيء تقريبًا باستثناء الأحرف والأرقام غير المحفوظة و- _ . ! ~ * '( ). لا يفترض أي سياق. يقوم المُنشئ URL بتوزيع URL الفعلي ويطبق قواعد WHATWG لكل مكون. يقوم encodeURIComponent بتحويل "hello/world" إلى "hello%2Fworld"؛ يرى URL الجديد الخطوط المائلة كفواصل للمسار. نفس المدخلات، مخرجات مختلفة.
استخدم encodeURIComponent عند إنشاء URL عن طريق وصل القطع. استخدم URLSearchParams أو المُنشئ URL لعناوين URL الكاملة أو الجزئية. لا تستخدم encodeURIComponent على URL بالكامل؛ سوف تشوه المخطط. قارن النتيجة بالنية. يفرض المتصفح آراء هيكلية URL، ويقوم URL الجديد بتنفيذها. يعرض برنامج التشفير ووحدة فك التشفير URL كلا العرضين جنبًا إلى جنب.
ما لا يغطيه هذا — تحليل المضيف، IDNA والأنظمة الخاصة مقابل غير الخاصة
إن المعيار WHATWG URL هو مصدر الحقيقة، رغم أن قراءته تتطلب الصبر. يتم تعريف مجموعات التشفير في أجزاء الخوارزمية، وليس في قوائم عادية. في الممارسة العملية، فهم المبدأ أكثر أهمية من حفظ المجموعات. يسمح المسار بمزيد من الأحرف (الخطوط المائلة هيكلية)؛ الاستعلام له قواعده الخاصة؛ يحتوي الجزء على أقل عدد من القيود (يتم التعامل معه من جانب العميل، ولا يتم إرساله مطلقًا إلى الخوادم). كل مكون له قواعده الخاصة؛ معرفة هذا يخبرك أين تبحث.
التطبيع والتحقق من الصحة حدود مختلفة. يقوم المنشئ بالتطبيع: ينظف الترميز المئوي، ويطبق قواعد المكونات، ويعطي شكلًا أساسيًا. لا يتم التحقق من صحة: يتم رمي الأحرف غير الصالحة، ولكن يتم قبول المضيفين الفارغين. المنشئ صارم فيما يتعلق بالتنسيق ولكنه متساهل بشأن التفسير. للحصول على الامتثال الدقيق للمواصفات، اقرأ قسم البايتات المشفرة بالنسبة المئوية لـ WHATWG. للبناء اليومي، استخدم URLSearchParams، وURL API، وأمثلة حقيقية.
الوجبات الجاهزة: المحلل اللغوي لديه آراء - كيف يعرض لك برنامج التشفير ووحدة فك التشفير URL الترميز النسبي البسيط لقيمة أو عنوان حتى تتمكن من مقارنته بما أنتجه المتصفح
تتضمن ميزات WHATWG غير المدعومة هنا تحليل المضيف مع تحويل IDNA (أسماء النطاقات الدولية إلى ASCII) والتعامل مع المخطط الخاص مقابل غير الخاص. ملف: تستخدم عناوين URL سلطة الشرطة المائلة المزدوجة؛ البيانات: عناوين URL لا تفعل ذلك. يفرض المنشئ هذه القواعد. تحويل أسماء المضيفين وتحديد الحالة الخاصة ينتمي إلى قراءة المواصفات، وليس إلى ترميز النسبة المئوية. وهذا مهم عند إنشاء عناوين URL عبر مخططات مختلفة.
اختبر بناء URL الخاص بك عن طريق مقارنة تفسير المتصفح مع التوقعات. أنشئ باستخدام URL الجديد، واقرأ الخصائص المهمة: href للحصول على النموذج الكامل، واسم المسار للمسار، والبحث عن الاستعلام الأولي، وsearchParams لفك التشفير. إذا فاجأتك النتيجة، فالصقها في برنامج التشفير ووحدة فك التشفير URL واتبع التحويل خطوة بخطوة. تعرض الأداة مخرجات طبيعية جنبًا إلى جنب مع التشفير الأولي، مما يكشف عن الفرق. إن فهم مجموعات WHATWG يعني فهم اختيارات المتصفح وكيفية التعامل معها.