Skip to content
KitploitKITPLOIT
أدواتالمدونة
إرسال
أدواتالمدونة
إرسال

أدوات الاختراق واختبار الاختراق والأمن السيبراني لترسانتك الأمنية!

Kitploit هو دليل لأدوات الاختراق والأمن السيبراني واختبار الاختراق. اكتشف آخر تحديثات المشاريع للعثور على الثغرات وتحليل الأنظمة وأتمتة الاختبارات وتعزيز أمنك.

··الخلاصات·اتصال·الخصوصية·© 2026 Kitploit

دليل الأدوات

الفئات

عرض جميع الفئات
Loading categories
أدوات/GitHubGitHub/avergnaud/next.js_exploit_cve-2024-34351
تحليل الثغرات الأمنيةاستغلال تطبيقات الويبأمن الويبالتعلم والتعليممختبرات وتدريب عملي
GitHubavergnaud/next.js_exploit_cve-2024-34351

Next.js_exploit_CVE-2024-34351

مستودع تعليمي يوضح أنماط العرض في Next.js (CSR, RSC, SSG, ISR, SSR) ومختبر عملي لاستغلال SSRF لـ CVE-2024-34351 مع خطوات التخفيف.

عرض المستودع

الأكثر شعبية

عرض الكل →

اكتشف الأدوات الأكثر استخدامًا من قبل مجتمعنا.

استكشف جميع الأدوات

تصفح مجموعتنا من الأدوات

عرض جميع الأدوات →
مشاركة
1منذ 2 سنواتلم تتم المراجعة بعد

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

mind map

CSR Client Side Rendering

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

mind map CSR

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

client side rendering loading data

عرض توضيحي

root@kitploit:~
cd 1-csr-load-data
npm start

CSR load data gif

2-csr-router vanilla react SPA routing

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

عرض توضيحي

root@kitploit:~
cd 2-csr-router
npm start

client side rendering routing

RSC React Server Components

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

mind map CSR

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

React Server Components loading data

عرض توضيحي

root@kitploit:~
cd 3-rsc-load-data
npm run build
npm run start

client side rendering routing

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

mind map CSR

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

عرض توضيحي

root@kitploit:~
cd 4-rsc-router
npm run build
npm run start

React server components routing

5-SSR SSR Server Side Rendering

mind map SSR

[!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/

عرض توضيحي

root@kitploit:~
cd 5-ssr
npm run build
npm run start

SSR

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

mind map page router SSG

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

عرض توضيحي

root@kitploit:~
cd 6-pages-router-ssg
npm run build
npm run start

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

mind map page router ISR

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

عرض توضيحي

root@kitploit:~
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

السياق

SSRF A

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

الهدف

SSRF B, الهدف

شروط استغلال 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 إلى المتصفح.

Next.JS ينفذ الطلب من جانب الخادم، ثم يعيد النتيجة إلى المتصفح:

  • لتنفيذ الطلب، يجب على Next.JS بناء URL الذي سيتم استدعاؤه. في العرض التوضيحي، في addTodo.js: دالة redirect('/blog/123'); تبني URL http://207.154.209.99/blog/123. لبناء هذا URL، يحصل Next.JS على host 207.154.209.99 من header HTTP للطلب الأصلي.
  • يبدأ Next.JS باستعلام URL باستخدام HTTP HEAD.
  • إذا أعادت الاستجابة header Content-Type: text/x-component، فإن Next.JS يستعلم URL باستخدام HTTP GET.

SSRF C, مقدمة

الاستغلال

للوصول إلى SSRF على الخادم المستهدف، يجب تنفيذ خادم آخر:

  • يستمع على جميع المسارات (query path)
  • يعيد HTTP 200 مع header Content-Type: text/x-component، لأي طلب HEAD
  • يعيد HTTP 302 إلى الخادم المستهدف، لأي طلب GET

SSRF D, استغلال

CSR load data gif

إصلاح الثغرة في 8-ssrf-14.1.0

الحل 1 (غير دائم): تكوين nginx لفرض host

في /etc/nginx/sites-available/nextjs

قبل:

root@kitploit:~
server {
  listen 80 default_server;
  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

بعد:

root@kitploit:~
server {
  listen 80;
  server_name 207.154.209.99;
  location / {
    proxy_pass http://localhost:3000;
    proxy_set_header Host 207.154.209.99;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

خطر وجود تأثيرات جانبية...

https://nginxtutorials.com/nginx-proxy_set_header-directive/

الحل 2: تحديث Next.js

https://github.com/vercel/next.js/security/advisories/GHSA-fr5h-rqp8-mj6g

ملاحظات

"Extra attributes from the server"

https://stackoverflow.com/questions/75337953/what-causes-nextjs-warning-extra-attributes-from-the-server-data-new-gr-c-s-c

"getStaticProps" is not supported in app/. Read more: https://nextjs.org/docs/app/building-your-application/data-fetching

https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#static-site-generation-getstaticprops

create-next-app

https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-4-migrating-pages

الصفحات في دليل app هي Server Components بشكل افتراضي. هذا يختلف عن دليل pages حيث تكون الصفحات Client Components.

الترقية إلى Next.js 13 لا تتطلب استخدام App Router الجديد. يمكنك الاستمرار في استخدام pages مع ميزات جديدة تعمل في كلا الدليلين.

الأداء

إذا أردنا مقارنة أداء التحميل للحلول المختلفة، يمكننا إضافة metrics web core vital في console.log.

https://web.dev/articles/fcp?hl=fr

مصادر / مراجع أخرى

https://rsc-parser.vercel.app/

https://stackoverflow.com/questions/76325862/what-is-the-difference-between-react-server-components-rsc-and-server-side-ren

https://github.com/reactjs/server-components-demo?tab=readme-ov-file#should-i-use-this-demo-for-benchmarks

https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#does-this-replace-ssr

https://www.youtube.com/watch?v=jEJEFAc8tSI

ISR باستخدام App router؟

https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration

في Next.js App Router، جميع البيانات التي تم جلبها تصبح الآن ثابتة بشكل افتراضي، وتُقدَّم في وقت البناء. ومع ذلك، يمكن تغيير ذلك بسهولة: يوسع Next.js كائن خيارات fetch لتوفير مرونة في قواعد التخزين المؤقت وإعادة التحقق. يمكنك استخدام الخيار {next: {revalidate: number}} لتحديث البيانات الثابتة على فترات زمنية محددة أو عند حدوث تغييرات في الخلفية (Incremental Static Regeneration)، بينما يمكن تمرير الخيار {cache: 'no-store'} في طلب fetch للبيانات الديناميكية (server-side rendering).

https://www.telerik.com/blogs/current-state-react-server-components-guide-perplexed

https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components

https://github.com/reactjs/server-components-demo

https://dev.to/vteacher/let-s-make-a-web-application-with-react-server-components-5dmg

https://react.dev/blog/2024/04/25/react-19

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

https://www.youtube.com/watch?v=ePAPd9qzGyM

https://www.joshwcomeau.com/react/server-components/

https://nextjs.org/docs/app/building-your-application/rendering/server-components#server-rendering-strategies

https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props

https://react.dev/reference/rsc/server-components#server-components-without-a-server

تنزيل الأداة