d0rb/wix-kickstartx-challenge-writeupشرح مفصّل لتحدي CTF: هندسة عكسية لتطبيق SPA مبني على React، وتحليل صور SVG، وبناء حلّال آلي باستخدام المطابقة الجشعة، وتحقيق علامة كاملة.
النتيجة: 200/200 (100%) — الرمز: WKX-9245FA70-200 التاريخ: 24 مارس 2026
أعلن منشور على LinkedIn عن تحدٍّ خاص لبرنامج Wix KickstartX — وهو برنامج للمطوّرين المبتدئين. القواعد:
wix-kickstartx-challenge-2026.base44.app/ و wixkickstart.comالموقع الرئيسي wixkickstart.com هو موقع مستضاف على Wix (يُقدَّم من جانب الخادم بواسطة محرك Thunderbolt الخاص بـ Wix). لا يُرجع أمر curl العادي سوى هيكل JavaScript — دون أي محتوى فعلي. استخدمنا متصفح Chromium بدون واجهة رسومية (headless) لعرضه:
chromium --headless --disable-gpu --no-sandbox --virtual-time-budget=10000 \
--dump-dom "https://wixkickstart.com" > /tmp/wix_rendered.html
من DOM المعروض، استخرجنا iframe مضمّنًا:
اتضح أنه رسم متحرك جسيمات p5.js (عنصر جمالي في القسم الرئيسي)، وليس التحدي نفسه. التحدي الفعلي موجود في تطبيق Base44.
يعمل التحدي على Base44 — وهي منصة تطبيقات منخفضة الكود (low-code). التطبيق هو تطبيق React أحادي الصفحة، وكل المنطق في حزمة JS واحدة:
https://wix-kickstartx-challenge-2026.base44.app/assets/index-oTG160r9.js
الحجم: 410,809 بايت (React مُصغَّر + منطق التطبيق + Base44 SDK)
من خلال البحث في حزمة JS، قمنا بتخطيط الـ API بالكامل:
| Function | الغرض |
|---|---|
startGame | ينشئ جلسة لعبة، ويعيد 200 صورة + 200 وصف |
scoreGame | يقبل {matches: {}, sessionId: ""}، ويعيد {correctCount: N} |
generateToken | يأخذ معرّف الجلسة، ويعيد رمز الإكمال |
getLeaderboard | يعيد أعلى الدرجات |
saveNickname | يحفظ الاسم المعروض للوحة المتصدرين |
الكيانات: GameSession، Participant
نمط عنوان API:
POST /api/apps/{appId}/functions/{functionName}
معرّف التطبيق: 69aea07cbcb9a3dd1039a58d
const or = 1800; // Time limit: 1800 seconds (30 minutes)
const rm = 200; // Total items: 200 image-description pairs
اكتشاف بالغ الأهمية — التطبيق يحتوي على وضع إرسال جماعي JSON. من المصدر المُصغَّر:
function Ik({onSubmit:r, onClose:n}) {
// ...
h = JSON.parse(s) // Parse JSON input
// Validation: must be object like { "IMG-001": "DESC-042", ... }
r(h) // Submit all matches at once
}
النص النموذجي داخل النافذة المنبثقة:
{
"IMG-001": "DESC-042",
"IMG-002": "DESC-017",
...
}
هذا يعني أننا لا نحتاج إلى النقر 200 مرة في الواجهة — يمكننا إرسال خريطة JSON لجميع المطابقات الـ200 برمجيًا.
يستخدم SDK الخاص بـ Base44 مصادقة JWT:
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
حمولة JWT تحتوي على:
{
"sub": "[email protected]",
"exp": 1782162460,
"iat": 1774386460
}
الترويسات المطلوبة لجميع استدعاءات API:
Content-Type: application/json
Authorization: Bearer {jwt_token}
X-App-Id: 69aea07cbcb9a3dd1039a58d
Base44-Functions-Version: prod
X-Origin-URL: https://wix-kickstartx-challenge-2026.base44.app/
POST /api/apps/69aea07cbcb9a3dd1039a58d/functions/startGame
Status: 200
Transferred: 62.87 kB compressed (2.20 MB decompressed)
Content-Encoding: br (Brotli)
بنية الاستجابة:
{
"status": "active",
"sessionId": "69c2fd218e5b26f307c941c9",
"startedAt": "2026-03-24T21:07:45.101Z",
"imageOrder": ["IMG-154", "IMG-102", ...], // 200 items (display order)
"descOrder": ["DESC-125", "DESC-109", ...], // 200 items (display order)
"imagesData": { "IMG-001": "data:image/svg+xml;base64,...", ... }, // 200 SVGs
"descriptionsData": { "DESC-105": "milky field, overlaid with...", ... } // 200 texts
}
كل صورة هي SVG بأبعاد 200x200 تحتوي على:
مثال لـ SVG مفكوك الترميز (IMG-001):
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<defs>
<linearGradient id="bg" ...>
<stop offset="0%" stop-color="#f5f0eb"/>
<stop offset="100%" stop-color="#e8e0d5"/>
</linearGradient>
</defs>
<rect width="200" height="200" fill="url(#bg)"/>
<!-- Optional overlay lines/dots/rings here -->
<polygon points="..." fill="#E2725B" transform="translate(128.6,185.7) rotate(90)"
style="opacity:0.5;filter:drop-shadow(...)"/>
<!-- More shapes... -->
</svg>
كل وصف يتبع نمطًا صارمًا:
{background} field[, overlaid with {overlay}]. {N} elements total:
{size} {opacity} {color} {shape} ({rotation}, at {position}) ·
{size} {opacity} {color} {shape} ({rotation}, at {position}) · ...
مثال:
milky field, overlaid with tilted cross-lines. 10 elements total:
minuscule nearly solid dim gray pike (steeply angled, at center inner-left) ·
substantial solid azure pike (diagonal, at top center) · ...
احتجنا إلى ربط خصائص SVG بمفردات الوصف. تطلّب ذلك تحليل جميع الصور الـ200 وجميع الأوصاف الـ200 للعثور على التطابقات الدقيقة.
من خلال عدّ مرات الظهور في الجانبين، أنشأنا تطابقًا 1:1:
| لون بداية تدرج SVG | العدد | كلمة الوصف | العدد |
|---|---|---|---|
#0a1628 | 28 | pitch | 28 |
#eef2f7 | 20 | frosted | 20 |
#0d0d0d | 19 | tenebrous | 19 |
#fef9f0 | 18 | pearlescent | 18 |
#1e0a2e | 18 | nocturnal | 18 |
#0a1a0a | 17 | midnight | 17 |
#1a0a0a | 15 | inky | 15 |
#f5f0eb | 14 | milky | 14 |
#f7f3ee | 14 | ethereal | 14 |
#f0f0f0 | 14 | radiant | 14 |
#f0f7f4 | 13 | glowing | 13 |
#1a1a2e | 10 | somber | 10 |
الطريقة: عدّ ألوان بداية التدرج الفريدة في جميع ملفات SVG الـ200، وعدّ الكلمة الأولى الفريدة في جميع الأوصاف الـ200، ثم المطابقة بناءً على العدد.
تراكبات SVG مُنفَّذة بطرق مختلفة حسب النوع:
| نمط SVG | طريقة الاكتشاف | العدد | اسم الوصف | العدد |
|---|---|---|---|---|
عناصر <line> أفقية (dy=0) | فحص x1,y1,x2,y2 | 35 | striped overlay | 35 |
عناصر <line> عمودية (dx=0) | فحص x1,y1,x2,y2 | 34 | lattice pattern | 34 |
<circle> مع opacity="0.06" (نقاط) | عدّ الدوائر منخفضة الشفافية | 30 | stippled layer | 30 |
| لا توجد عناصر تراكب إطلاقًا | لا خطوط، ولا أشكال خلفية | 28 | (none) | 28 |
عناصر <line> قطرية | فحص اتجاه الميل | 27 | tilted cross-lines | 27 |
<polygon>/<path> صغيرة مع opacity="0.06" | أشكال بسمة شفافية منخفضة | 25 | arrow-band texture | 25 |
<circle> مع fill="none" stroke="#888" | دوائر بحدود فقط | 21 | ringed pattern | 21 |
الملاحظة الأساسية: عناصر نمط الخلفية تستخدم opacity كـ سمة XML (مثل opacity="0.06")، بينما تستخدم الأشكال الأمامية opacity داخل سمة style (مثل style="opacity:0.7"). كان هذا التمييز حاسمًا لفصل أنماط الخلفية عن الأشكال الفعلية.
جميع ملفات SVG الـ200 تستخدم 28 لون تعبئة hex فريدًا بالضبط. وجميع الأوصاف الـ200 تستخدم 28 اسم لون فريدًا بالضبط.