WebSafeCompiler (WSC)

WebSafeCompiler (WSC) هي أداة متقدمة (مُجمِّع للمواقع الإلكترونية) مصممة لتحسين وتصغير وتعتيم (إذا كنت بحاجة إلى ذلك) تطبيقات الويب والمواقع الإلكترونية باستخدام Node.js. تعمل على تحسين أصول الويب الخاصة بك عن طريق تقليل أحجام الملفات أو توفير حماية متينة ضد الهندسة العكسية، مما يضمن أن يكون الكود الخاص بك جاهزًا للنشر وآمنًا.

[!NOTE]
مناسب لمواقع *.github.io

المُجمِّع أحادي البنية: جميع التنفيذ موجود في source/wsc.js. توجد اختبارات الانحدار بشكل منفصل في tests/.

🚀 نبذة مختصرة

للاستفادة من الإمكانات الكاملة لـ WebSafeCompiler، نفّذ الأمر التالي في الطرفية الخاصة بك:

node wsc.js <input_dir> <output_dir> [--map] [--smart] [--drm]

الوسائط والخيارات:

• <input_dir>: الدليل الذي يحتوي على الملفات المصدرية المراد معالجتها.
• <output_dir>: الدليل الذي سيتم إخراج الملفات المحسّنة والمشوّشة فيه.
• -m, --map: ينشئ sitemap.xml في دليل الإخراج لتحسين SEO
• -s, --smart: يكتشف الملفات المضغوطة (minified) تلقائيًا ويتخطاها. يشمل ذلك ملفات JS و CSS.
• -d, --drm: يفعّل تشويش الكود (حماية DRM) لتأمين الكود المصدري الخاص بك ضد التحليل غير المصرح به.
  • 🚫 معطّل: تركز الأداة على تحسين ملفات موقعك الإلكتروني، مما يضمن أن تكون خفيفة وفعّالة.
  • ✅ مفعّل: تركز الأداة على حماية ملكيتك الفكرية من خلال تطبيق تقنيات تشويش صارمة على الكود الخاص بك.
    • تشويش HTML: يضيف فئات عشوائية غير مستخدمة وسمات عشوائية إلى وسوم HTML المؤهلة، بالإضافة إلى ترميز قيم class و id و title الموجودة. يتم الاحتفاظ بأسماء الفئات والسمات الموجودة. تعمل التبعيات المكتشفة للمحددات وفحص DOM على تقييد الضوضاء مع تحذير في وحدة التحكم.
    • تشويش JavaScript: تمر الملفات التي تستخدم JavaScript عبر عدة مراحل من التشويش، بما في ذلك إضافة كود غير مستخدم وتشفير النصوص.
• -h, --help: يعرض رسالة المساعدة مع تعليمات الاستخدام التفصيلية.
• -v, --version: يُخرج الإصدار الحالي من WebSafeCompiler.

👨🏼‍💻 مثال على الاستخدام:

node wsc.js "/path/to/source" "/path/to/output" --drm --smart

سيقوم هذا الأمر بمعالجة جميع الملفات داخل دليل المصدر المحدد، وتحسينها، وإذا كانت علامة التشويش مفعّلة، فسيحمي الكود من الوصول غير المصرح به أو التلاعب. ستكون ملفات الإخراج جاهزة للنشر في بيئة الويب الخاصة بك.

📚 المكتبات المستخدمة

يستخدم WebSafeCompiler المكتبات التالية للتعامل مع أكواد JavaScript:

• uglify-js: يوفر معالجة مسبقة وتصغيرًا متطورًا لـ JavaScript، مما يضغط الكود الخاص بك دون التضحية بالوظائف.
• javascript-obfuscator: يطبق تقنيات متقدمة لحماية كود JavaScript الخاص بك عن طريق تشويشه، مما يجعل من الصعب بشكل كبير على المهاجمين إجراء هندسة عكسية.

🛠️ كيف يتم التثبيت؟

للبدء مع WebSafeCompiler، ستحتاج إلى تثبيت Node.js على نظامك. اتبع هذه الخطوات لتثبيت الحزم المطلوبة:

1. تثبيت Node.js: قم بتنزيل وتثبيت Node.js من موقع Node.js الرسمي. اتبع تعليمات التثبيت الخاصة بنظام التشغيل الخاص بك.

2. استنساخ المستودع: إذا لم تكن قد فعلت ذلك بالفعل، قم باستنساخ المستودع إلى جهازك المحلي:

   git clone <repository-url>
   cd <repository-directory>/source
   

3. تثبيت التبعيات: انتقل إلى دليل المشروع وقم بتثبيت حزم npm اللازمة:

   npm install
   

4. تم! يمكنك استخدام WSC.

التوافق واختبارات الانحدار المحلية

يقوم WSC بتصغير المسافات في وسوم/سمات HTML وإزالة تعليقات HTML العادية، مع الحفاظ على القيم المقتبسة، والمسافات البيضاء في النص، وأجسام script/style الخام، والتعليقات الشرطية، وعلامات الأطر. يؤدي اكتشاف فحص المصدر/التعليقات إلى تعطيل تعديلات الترميز هذه مع تحذير. يستخدم JavaScript تشويش الأسماء المحلية وخمس تمريرات ضغط مع الاحتفاظ بالمتغيرات العامة وأسماء الدوال. يحتفظ DRM بتسطيح تدفق التحكم، وحقن الكود الميت، وتغطية كاملة لمصفوفة النصوص مع ترميز base64. يتم تحليل CSS وتصغيره؛ يتم الاحتفاظ بـ JS و CSS غير المدعومين مع تحذيرات المحلل دون تغيير مع تحذير. يتم نسخ الأصول غير UTF-8 دون تحويل. تتم معالجة أصول SRI المحلية قبل HTML، ثم يتم إعادة حساب بيانات SHA-256/384/512 الوصفية من البايتات النهائية في مراجع script و stylesheet و preload و template. يتم أيضًا تحديث تجزئات السكريبتات الخارجية المطابقة في سياسات CSP التي يمكن الوصول إليها. يتم الاحتفاظ بالأصول المشتركة دون تغيير مع تحذير DRM إذا كانت أي صفحة مرجعية لديها CSP غير متاح أو لا يمكن إعادة كتابتها بأمان كـ UTF-8. تظل بيانات SRI الوصفية غير الصالحة محظورة؛ لا تتم إعادة كتابة الأصول المستضافة خارجيًا.

يضيف DRM فئات عشوائية إلى سمات class الموجودة وسمتين خاملتين عشوائيتين حول كل سمة حقيقية لوسوم HTML العادية المؤهلة. يتم التحقق من الأسماء العشوائية مقابل نص مصدر HTML و CSS و JS. تحافظ محددات تساوي/احتواء الفئة على قيم الفئات المتأثرة؛ يحدد تحليل AST نطاق فحص الفئة/السمة للعناصر المحددة بشكل ثابت، والأسماء المستعارة غير القابلة للتغيير وأشجار المراقب الفرعية، باستخدام كل صفحة وتبعيات JS/CSS المحلية الخاصة بها. لا تزال العناصر غير ذات الصلة تتلقى ضوضاء. تستخدم المستقبلات غير المعروفة، والمحددات وقت التشغيل، والتفكيك، والمراقبين غير المحلولين احتياطيًا متحفظًا وتطبع تحذيرات. لا تتلقى وسوم script/style/meta/noscript، والعناصر المخصصة، وعقد SVG/MathML الأجنبية سمات غير مرغوب فيها. تغطي هذه الحمايات التبعيات المعروفة؛ لا يمكن دائمًا استنتاج المحددات المحسوبة ديناميكيًا أو الانعكاس بشكل ثابت.

في وضع DRM، يستخرج WSC تلقائيًا JavaScript المضمّن المؤهل إلى ملفات wsc-inline-*.js مموّهة بجانب كل مستند HTML عند تطبيق تكوين CSP مدعوم: _headers الجذري، أو vercel.json الجذري (قواعد headers)، أو وسم CSP meta في HTML. يضيف 'self' إلى script-src-elem في سياسة الإخراج، مع الحفاظ على أذونات المصادر الأخرى، وقواعد script-src لمعالجات الأحداث، والتوجيهات غير ذات الصلة. يؤدي هذا عمدًا إلى توسيع أذونات السكربت لتشمل الملفات من نفس الأصل. انشر JavaScript المُصدَر وتكوين الترويسات مع HTML معًا. تبقى الـ nonces دون تغيير؛ وتتضمن الملفات المُنشأة تجزئات SRI. المسارات الحرفية وبدائل * مدعومة.

تبقى وسوم السكربت المُنشأة في مواضعها الأصلية. تظل السكربتات الكلاسيكية حاجبة للمحلل؛ وتُزال سمات async/defer المضمّنة المتجاهلة عند إضافة src. تحتفظ الوحدات بسماتها، وتُصدَر الملفات بجانب المستند للحفاظ على دقة حل الاستيراد النسبي. تبقى خرائط الاستيراد، وسكربتات البيانات، والأنماط، ومعالجات الأحداث مضمّنة.

يطبع WSC تحذيرات عندما يكون الاستخراج غير متاح: CSP خارجي/غير معروف، أو مسارات غير مدعومة، أو strict-dynamic، أو <base href>، أو سكربتات غير متزامنة، أو سكربتات القوالب، أو JavaScript غير صالح، أو تبعيات مصدر/URL مكتشفة مثل document.currentScript.src، وimport.meta، وdocument.write. وحيثما أمكن، يقوم بدلًا من ذلك بتمويه الكود المضمّن وتحديث تجزئات SHA-256/384/512 الخاصة به في السياسة المتاحة. يبقى الكود الذي يقرأ مصدر السكربت الأصلي والكود بدون سياسة متاحة دون تغيير. تمنع قراءة document.currentScript.src، وdocument.write/writeln، وimport.meta، وسكربتات القوالب الاستخراج لكنها لا تعطّل التمويه المضمّن عندما يكون CSP متاحًا؛ ويُحافظ على تنفيذ القوالب وعناوين URL المصدر. السكربتات المحظورة بموجب سياسة موجودة لا تُصرَّح بها من جديد. بدون DRM، يتم تصغير JavaScript المضمّن المؤهل وتُحدَّث تجزئاته عندما يكون CSP متاحًا؛ وإلا يُحتفظ بالمصدر الأصلي مع تحذير. تظل معالجة JS الخارجي وترميز سمات HTML مفعّلة في DRM. يجب أن تتوافق سياسات HTTP الإضافية المقدَّمة بشكل مستقل مع سياسات المشروع؛ ولا يمكن استنتاج انعكاس المصادر التعسفي وتبعيات التوقيت عالميًا عبر التحليل الساكن.

يجب ألا تتداخل أدلة الإدخال والإخراج. تُتبَع الروابط الرمزية للإدخال وتُجمَّع محتوياتها تحت المسار النسبي للرابط. تُتخطى دورات الأدلة وروابط الإدخال المؤدية إلى الإخراج مع تحذيرات؛ وتُرفض روابط الإخراج الموجودة مسبقًا لمنع الكتابات غير المقصودة.

شغّل مجموعة اختبارات الانحدار للمتصفح من source (Node.js 18 أو أحدث لمشغّل الاختبارات):

npm install
npx playwright install chromium
npm test