reproducer-okio-cve-2023-3635

ما الذي يعيد إنتاجه هذا المشروع

أداة إعادة إنتاج لـ facebook/react-native#58148: ملف packages/react-native/gradle/libs.versions.toml الخاص بـ React Native يثبّت okhttp = "4.9.2" / okio = "2.9.0"، وokio إصدار 2.9.0 متأثر بـ CVE-2023-3635 / GHSA-w33c-445m-f8w7، وتم إصلاحه في okio 3.4.0.

لم يتم تعديل أي كود تطبيق لإنتاج هذا. ReproducerApp هو الناتج غير المعدّل تماماً من npx @react-native-community/cli init، المُنشأ مقابل [email protected] (إصدار latest الحالي لهذا القالب، المطابق لـ 0.87.0-main في main). التثبيت الثابت الضعيف يأتي من كتالوج الإصدارات الخاص بـ React Native نفسه، وليس من أي شيء يفعله التطبيق المستهلك.

لإعادة الإنتاج، من مجلد ReproducerApp/android:

./gradlew :app:dependencies --configuration releaseRuntimeClasspath | grep -iE "okhttp|okio"

الناتج (التشغيل الكامل محفوظ في gradle-dependencies-output.txt):

com.squareup.okhttp3:okhttp-urlconnection:4.9.2
com.squareup.okhttp3:okhttp:4.9.2 (*)
com.squareup.okio:okio:2.9.0 (*)
com.squareup.okhttp3:okhttp:3.14.9 -> 4.9.2
com.squareup.okio:okio:2.8.0 -> 2.9.0

okhttp/okio يصلان إلى releaseRuntimeClasspath الفعلي المُرسل للتطبيق (وليس فقط أدوات الاختبار)، يتم جذبهما بشكل غير مباشر عبر com.facebook.fresco:imagepipeline-okhttp3 وreact-android الخاص بـ React Native نفسه.

هذا هو مشروع React Native Reproducer الجديد الخاص بك.

قائمة TODO الخاصة بـ Reproducer

• 1. إنشاء مشروع reproducer جديد.
• 2. استنساخ مستودعك محلياً باستخدام Git.
• 3. تعديل المشروع لإعادة إنتاج الفشل الذي تواجهه.
• 4. دفع تغييراتك، حتى يتمكن Github Actions من تشغيل CI.
• 5. التأكد من أن المستودع عام ومشاركة الرابط مع المشكلة التي أبلغت عنها.

كيفية استخدام هذا الـ Reproducer

تم إنشاء هذا المشروع باستخدام npx @react-native-community/cli init وهو تطبيق React Native عادي.

[!IMPORTANT]
تأكد من إكمال React Native - Environment Setup حتى يكون لديك بيئة عمل محلية.

الخطوة 1: تشغيل خادم Metro

أولاً، ستحتاج إلى تشغيل Metro، وهو المجمّع (bundler) الخاص بـ JavaScript والذي يأتي مع React Native.

لتشغيل Metro، نفّذ الأمر التالي من جذر مشروع React Native الخاص بك:

# باستخدام npm
npm start

# أو باستخدام Yarn
yarn start

الخطوة 2: تشغيل تطبيقك

اترك Metro Bundler يعمل في محطة طرفية خاصة به. افتح محطة طرفية جديدة من جذر مشروع React Native الخاص بك. نفّذ الأمر التالي لتشغيل تطبيق Android أو iOS الخاص بك:

لنظام Android

# باستخدام npm
npm run android

# أو باستخدام Yarn
yarn android

لنظام iOS

أولاً، تأكد من تثبيت التبعيات باستخدام:

cd ios && bundle install && bundle exec pod install

ثم يمكنك تشغيل تطبيق iOS باستخدام:

# باستخدام npm
npm run ios

# أو باستخدام Yarn
yarn ios

إذا تم إعداد كل شيء بشكل صحيح، يجب أن ترى تطبيقك الجديد يعمل في محاكي Android أو محاكي iOS الخاص بك بعد فترة وجيزة، بشرط أن تكون قد أعددت المحاكي/المحاكي بشكل صحيح.

هذه طريقة واحدة لتشغيل تطبيقك — يمكنك أيضاً تشغيله مباشرة من داخل Android Studio وXcode على التوالي.

الخطوة 3: تعديل تطبيقك

الآن بعد أن نجحت في تشغيل التطبيق، دعنا نعدّله.

1. افتح App.tsx في محرر النصوص الذي تفضله وعدّل بعض الأسطر.

2. لنظام Android: اضغط على مفتاح R مرتين أو اختر "Reload" من Developer Menu (Ctrl + M (على Windows وLinux) أو Cmd ⌘ + M (على macOS)) لرؤية تغييراتك!

   لنظام iOS: اضغط Cmd ⌘ + R في محاكي iOS لإعادة تحميل التطبيق ورؤية تغييراتك!