في هذا الدرس 5تصفّح المواضيع
يتوفر الكائن Location عبر window.location (أو document.location)، ويتولى تفكيك عنوان الصفحة الحالي تلقائياً إلى خصائص منظمة جاهزة للقراءة تغنيك تماماً عن التقطيع النصي اليدوي المعرض للأخطاء.
فعند وجود رابط كامل مثل https://www.closetag.com/tutorials/js?level=2#quiz، يقابل كل جزء من البروتوكول واسم النطاق والمسار ومعاملات الاستعلام والمرساة خاصيةً مستقلةً وواضحة على الكائن location.
يوضح الجدول التالي أهم خصائص قراءة أجزاء الرابط على الكائن window.location لعنوان مثل https://app.example.com:8443/shop/items?sort=price#top:
| الخاصية | القيمة الراجعة | ملاحظة دقيقة |
|---|---|---|
location.href | سلسلة الرابط الكاملة | إسناد رابط جديد إليها يوجّه الصفحة فوراً |
location.origin | "https://app.example.com:8443" | للقراءة فقط (البروتوكول + المضيف + المنفذ) |
location.protocol | "https:" | ينتهي دائماً بنقطتين رأسيتين : |
hostname مقابل host | بدون المنفذ مقابل شامل المنفذ | host يشمل رقم المنفذ بينما hostname يقتصر على الاسم |
location.pathname | "/shop/items" | المسار الداخلي بدون الاستعلام أو المرساة |
search وhash | "?sort=price" و"#top" | تُرجع نصاً فارغاً "" عند غيابها من الرابط |
const out = document.getElementById('loc-out');
const parts = [
'protocol: ' + window.location.protocol,
'origin: ' + window.location.origin,
'pathname: ' + window.location.pathname,
'href length: ' + window.location.href.length
];
out.textContent = parts.join('\n');تجنب تقسيم نص location.search يدوياً عبر split("&")؛ فالتقسيم اليدوي يفشل مع المسافات المرمّزة (%20 أو +) وكلمات البحث العربية وتكرار المفاتيح. بدلاً من ذلك، مرر النص مباشرةً إلى الباني القياسي new URLSearchParams(window.location.search):
params.get("q"): تقرأ القيمة وتفك ترميزها تلقائياً (أو تُرجعnullعند غيابها).params.has("featured"): تتحقق منطقياً من وجود المعامل في الرابط.params.set("page", "2")معparams.toString(): تبني نص استعلام مرمّز ونظيف بأمان تام.
const sampleQuery = '?topic=bom+location&page=3&lang=ar';
const params = new URLSearchParams(sampleQuery);
params.set('page', '4');
document.getElementById('qp-out').textContent =
'topic: ' + params.get('topic') + '\n' +
'has lang: ' + params.has('lang') + '\n' +
'next query: ?' + params.toString();يُعيد استدعاء window.location.reload() تحميل الصفحة الحالية من جديد (وتُستدعى قياسياً بلا أي معاملات لأن المتصفحات الحديثة أهملت المعامل القديم true).
قاعدة أمنية حاسمة (الوقاية من التوجيه المفتوح وDOM XSS): تقرأ كثير من المواقع معامل عودة بعد تسجيل الدخول مثل ?returnTo=/profile لتوجيه المستخدم إليه؛ فإذا زوّر مهاجم الرابط ليصبح ?returnTo=https://phish.example (ثغرة Open Redirect) أو ?returnTo=javascript:alert(1) (ثغرة DOM XSS)، فإن التوجيه الأعمى يوقع الضحية في الفخ فوراً! حلّل المسار دائماً عبر new URL(target, window.location.origin) واشترط تطابق الأصل parsed.origin === window.location.origin.
function safeReturnPath(rawTarget) {
try {
const base = 'https://closetag.com';
const u = new URL(rawTarget, base);
return u.origin === base ? u.pathname : '/home';
} catch (err) {
return '/home';
}
}
document.getElementById('val-out').textContent =
'Valid: ' + safeReturnPath('/courses') + '\n' +
'Blocked: ' + safeReturnPath('https://evil.test/login');ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
فككت في هذا الدرس أجزاء العنوان عبر خصائص window.location، وحللت معاملات البحث بأمان عبر URLSearchParams، وقارنت بين assign() وreplace()، وحصّنت التوجيه ضد ثغرتي Open Redirect وروابط javascript: عبر فحص origin. الخطوة التالية: انتقل الآن إلى درس «كائن سجل التصفح window history في JavaScript» للتنقل عبر خطوات الجلسة بدوال back() وforward() وgo().
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 window.location.origin خاصية الأصل الأمني location.origin
- نص للقراءة فقط يجمع البروتوكول واسم المضيف ورقم المنفذ للرابط الحالي.
- للمراجعة
- 02 URLSearchParams واجهة تحليل معاملات الاستعلام URLSearchParams
- واجهة قياسية تفكك وتقرأ وتُرمّز معاملات البحث في الرابط بأمان تام دون تقسيم نصي يدوي.
- للمراجعة
- 03 location.replace() دالة الاستبدال بدون رجوع location.replace
- توجه المتصفح إلى رابط جديد مع استبدال الصفحة الحالية في السجل لمنع الرجوع إليها بزر الخلف.
- للمراجعة
- 04 Open Redirect Vulnerability ثغرة التوجيه المفتوح Open Redirect
- ثغرة أمنية تنشأ عند تمرير رابط من مدخلات الزائر دون فحص أصله مما يوجه الضحية لموقع خارجي خبيث.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 URI URI
- Uniform Resource Identifier
- المعرف القياسي الموحد للموارد الذي ينظم صيغة الروابط والمسارات ومعاملات الاستعلام.
- للمراجعة
- 02 HTTPS HTTPS
- Hypertext Transfer Protocol Secure
- بروتوكول نقل النص الفائق المشفر ويظهر بالقيمة "https:" داخل خاصية location.protocol.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
في مثال URLSearchParams، أضف السطر params.set("sort", "newest") وتحقق من ظهور المعامل المضاف في نص المخرجات.
-
مرّر النص "//evil.test/phish" للدالة resolveSafeReturnPath() في محرر التجربة وتأكد من إحباطه وإرجاع المسار الآمن "/home".
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.