csr-rsc-ssg-isr-ssr-ssrf

يمكن استخدام هذا المستودع كدعم لتقديم لقاء أو أكثر. المسار هو كما يلي...

• "CSR" Client Side Rendering: React كمكتبة SPA قياسية
• "RSC" React Server Components: تنفيذ مكونات React فقط على الخادم
• "SSG" Static Site Generation: تنفيذ مكونات React أثناء البناء
• "ISR" Incremental Static Regeneration: إعادة توليد المكونات حسب الطلب
• "SSR" Server Side Rendering: تقديم مسبق على الخادم ثم تنفيذ (hydration) على العميل
• "SSRF" Server Side Request Forgery: ثغرة أمنية تم إصلاحها مؤخرًا في Next.JS

يعتمد هذا العمل بشكل أساسي على مصدرين:

• https://demystifying-rsc.vercel.app/
• https://www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps

---

CSR Client Side Rendering

1-csr-load-data vanilla react SPA loading data

[!IMPORTANT] CSR (Client-Side Rendering): يتم تسليم كود React إلى المتصفح، الذي يقوم بإنشاء المحتوى الذي يتم إدراجه في DOM.

عرض توضيحي

cd 1-csr-load-data
npm start

2-csr-router vanilla react SPA routing

[!IMPORTANT] بعد تحميل الصفحة لأول مرة، يستخدم التنقل إلى صفحات أخرى على نفس موقع الويب JavaScript لإعادة عرض أجزاء من الصفحة دون الحاجة إلى تحديث كامل للصفحة.

عرض توضيحي

cd 2-csr-router
npm start

RSC React Server Components

3-rsc-load-data React Server Components (Next.js impl) loading data

[!IMPORTANT] مكونات React التي تمت كتابتها ليتم تشغيلها فقط على الخادم، وليس في المتصفح.

عرض توضيحي

cd 3-rsc-load-data
npm run build
npm run start

4-rsc-router React Server Components (Next.js impl) routing

[!IMPORTANT] يتم تنفيذ المكونات فقط على الخادم. السلوك الافتراضي هو التقديم الثابت: يتم تنفيذ المكونات في وقت البناء.

عرض توضيحي

cd 4-rsc-router
npm run build
npm run start

5-SSR SSR Server Side Rendering

[!IMPORTANT] يعني SSR تقديم مكونات العميل مسبقًا على الخادم. يتم تشغيل كود React في الوقت الذي يتم طلبه. قد يتم تخزين النتيجة مؤقتًا للطلبات المستقبلية.

أفضل ممارسة: تعريف مكونات 'use client'; في أدنى مستوى ممكن في شجرة المكونات.

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#moving-client-components-down-the-tree

Hydration

[!IMPORTANT] "في React، "hydration" هي كيفية "ربط" React بـ HTML الموجود الذي تم تقديمه بالفعل بواسطة React في بيئة خادم. أثناء hydration، سيحاول React إرفاق مستمعي الأحداث بالعلامات الموجودة وتولي تقديم التطبيق على العميل. في التطبيقات المبنية بالكامل مع React، عادةً ما تقوم بـ "hydration" لجذر واحد فقط، مرة واحدة عند بدء التشغيل للتطبيق بأكمله."

https://react.dev/reference/react-dom/client/hydrateRoot

https://www.gatsbyjs.com/docs/conceptual/partial-hydration/

عرض توضيحي

cd 5-ssr
npm run build
npm run start

6-pages-router-ssg (Next.js impl)

[!IMPORTANT] SSG (Static Site Generation) باستخدام موجه الصفحات: يتم تشغيل كود React عند بناء تطبيقك، ويكون الناتج المُنشأ ثابتًا.

عرض توضيحي

cd 6-pages-router-ssg
npm run build
npm run start

7-pages-router-isr (Next.js impl)

[!IMPORTANT] ISR (باستخدام موجه الصفحات): "يسمح لك Next.js بإنشاء أو تحديث صفحات ثابتة بعد بناء موقعك. يمكنك Incremental Static Regeneration (ISR) من استخدام التوليد الثابت على أساس كل صفحة، دون الحاجة إلى إعادة بناء الموقع بأكمله. مع ISR، يمكنك الاحتفاظ بفوائد الثبات مع التوسع إلى ملايين الصفحات."

عرض توضيحي

cd 7-pages-router-isr
npm run build
npm run start

لماذا ISR؟

"قد تصبح البيانات قديمة عند وقت الطلب"

https://vercel.com/blog/nextjs-server-side-rendering-vs-static-generation

Server actions

https://react.dev/reference/rsc/server-actions

SSRF (تم إصلاحها في NextJS v14.1.1)

تعريف SSRF

...

لماذا؟

• إذا كان لدينا إمكانية الوصول إلى خادم ضعيف ولكن ليس إلى الخادم المستهدف مباشرة (DMZ، جدار حماية...)
• إذا أردنا تنفيذ طلبات مع إخفاء مصدرنا الخاص
• ...

عرض توضيحي 8-ssrf-14.1.0

السياق

https://www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps

الهدف

شروط استغلال CVE-2024-34351

• تطبيق مبني على Next.JS بإصدار أقل من 14.1.1
• استخدام دالة redirect، مع مسار مطلق. في العرض التوضيحي، في addTodo.js: redirect(/blog/${inputValue});

طريقة عمل دالة redirect

المصدر: https://www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps

• دالة Next.JS redirect لا ترسل استجابة HTTP 302 إلى المتصفح.