المشكلة
تجهيز صورة واحدة لعدة منصات يحتاج إلى عدة أدوات، ورفع الصور الخاصة إلى مواقع مجهولة مخاطرة.
المظهرلون التمييز
متخصص تقنية معلومات وأنظمة · الرياض، السعودية
كل الأعمال
Paste Studio
تغيير مقاس الصور وتحويلها ومعالجتها داخل المتصفح دون أن يغادر الملف الجهاز.
التقنيات
- PHP 8.3
- Vanilla JS
- Canvas API
- Nginx
- PWA
الحل
تحول الصور ويغير مقاسها وتقص وتحسن وتحذف بياناتها الوصفية داخل المتصفح بالكامل. وتفحص روابط التواصل الاجتماعي عبر الواجهات العامة لكل منصة فقط: لا جمع للمحتوى ولا تجاوز لأي حماية.
مساهمتي
كل شيء: ما يبنى وما يرفض، والواجهة، وخدمة الروابط المحمية، والاختبارات، والخادم، والنشر.
أبرز المزايا
- مقاسات جاهزة لكل المنصات الرئيسية
- تحويل PNG وJPEG وWebP وAVIF مع القص وتغيير المقاس
- معالجة دفعات مع تصدير ZIP
- فحص الروابط للبيانات الوصفية والتضمين الرسمي فقط
النتيجة
تجهيز الصور لوسائل التواصل دون رفع الملفات، مع حذف بيانات الموقع افتراضيا.
أداة متاحة للجميع، لا تنزل الفيديو أو الصوت ولا تجمع محتوى بطرق غير مشروعة.
لقطات من المشروع
التفاصيل التقنية ودراسة الحالة كاملةالبنية والأمان والاختبار والقرارات، لمن يريد التفاصيل.
نظرة عامة
يحول Paste Studio صورة من الحافظة إلى ملف جاهز بأقل عدد ممكن من الخطوات، ويقول الحقيقة بشأن ما يمكنه فعله برابط من منصة اجتماعية. تحول الصور وتغير مقاساتها وتقص وتحسن وتجرد من بياناتها الوصفية داخل المتصفح بالكامل. أما الروابط فتفحص عبر الواجهات العامة الرسمية لكل منصة — دون أي استخراج غير مصرح به ودون الالتفاف على أي حماية.
المشكلة
- تغيير مقاس صورة واحدة لأربع شبكات يعني أربع أدوات أو محررا ثقيلا.
- معظم مواقع «التنزيل» فخاخ إعلانية بأزرار تنزيل وهمية.
- رفع لقطة شاشة خاصة إلى خادم مجهول لمجرد قصها صفقة سيئة.
- تحمل الصور بيانات EXIF وإحداثيات GPS ينشرها الناس دون أن يدروا.
- تعد الأدوات بصيغ وجودات لم تكن في المصدر أصلا.
ما الذي يفعله Paste Studio
- مقاسات جاهزة لكل شبكة رئيسية، في مكان واحد.
- لا إعلانات، ولا أزرار وهمية، ولا أنماط خادعة.
- الصور لا تغادر المتصفح — فلا يوجد ما يرفع أصلا.
- تزال البيانات الوصفية افتراضيا، والواجهة تقول ذلك.
- يذكر بوضوح ما هو ممكن وما هو غير ممكن، لكل منصة.
دوري
كل شيء: قرار المنتج بشأن ما يبنى وما يرفض، والهوية والواجهة، والمحتوى العربي والإنجليزي، ومحرك الصور داخل المتصفح، وخدمة الروابط المحصنة ضد SSRF، ومجموعات الاختبار، وإعداد الخادم، والنشر.
القرار الذي شكل المنتج
طلب الوصف الأصلي دعم تنزيل يوتيوب والوسائط الاجتماعية. بناء ذلك يعني استخدام أداة مثل yt-dlp، التي تعمل عبر فك تشفير معاملات التوقيع والخنق لدى يوتيوب. وهذا التفاف على إجراء حماية تقني، ويخالف شروطا تلزم مشغل الخدمة — ولا يمكن لمربع اختيار من الزائر أن يرفعها. operator الخدمة — ولا يمكن لمربع اختيار من الزائر أن يرفعها.
لذلك لا ينزل Paste Studio مقاطع الفيديو أو الصوت. بل يستخدم نقطة oEmbed العامة الرسمية لكل منصة للحصول على البيانات، ويعيد بث الصور المصغرة التي تنشرها المنصات أصلا كصور عادية، ويوفر كود التضمين الرسمي، ويوجه أصحاب المحتوى إلى التنزيل الرسمي من المنصة نفسها. وصفحة «المنصات المدعومة» تذكر ذلك في جدول بدل إخفائه.
تبين أن هذا القيد هو مصدر قوة المنتج. فمع غياب خط معالجة الوسائط، لا توجد قائمة انتظار مهام، ولا ملفات وسائط مؤقتة على القرص، ولا عملية تنظيف قد تفشل، ولا سؤال عن مدة الاحتفاظ يحتاج إلى إجابة حذرة — لأنه لا يحتفظ بشيء.
الرحلة
- الصق أو ارفعالحافظة، أو السحب والإفلات، أو اختيار ملف، أو كاميرا الجوال، أو رابط.
- معاينةالنوع والأبعاد وحجم الملف والشفافية ووجود EXIF — قبل تغيير أي شيء.
- اخترمقاس جاهز، أو الصيغة والحجم وأسلوب الاحتواء والجودة. تبقى الخيارات المتقدمة مطوية.
- نزلملف واحد، أو الدفعة كاملة كملف ZIP يبنى داخل المتصفح.
لا يبدأ أي تنزيل تلقائيا عند اللصق. المعاينة أولا، والقرار للزائر.
استوديو الصور
كل هذا يعمل على canvas داخل متصفح الزائر. لا رفع، ولا قائمة انتظار، ولا رحلة إلى الخادم.
- التحويل بين PNG و JPEG و WebP و AVIF — ويختبر المرمز عند التحميل، فتعطل أي صيغة لا يستطيع المتصفح كتابتها فعلا بدل إنتاج شيء آخر بصمت.
- تغيير المقاس مع تثبيت النسبة، والاحتواء أو الملء أو التمديد.
- التدوير والقلب أفقيا ورأسيا وإعادة التعيين.
- تحكم في الجودة مع مقارنة حية لحجم الملف قبل وبعد ونسبة التوفير.
- لون خلفية للصور الشفافة عند تحويلها إلى JPEG، فلا تتحول الشفافية إلى أسود.
- مقاسات جاهزة لإنستغرام وفيسبوك وإكس ولينكدإن ويوتيوب وتيك توك وواتساب و Open Graph.
- معالجة دفعة حتى ٢٠ صورة، تحتفظ كل واحدة بأبعادها ما لم يختر مقاس.
- تصدير ZIP يجمع بايتا بايت داخل المتصفح، بقيم CRC32 ودليل مركزي صحيحة.
أدوات الروابط، والصدق بشأنها
يتعرف النظام على إحدى عشرة منصة. ولكل منها يعرض جدول القدرات ما هو متاح فعلا: البيانات، والصورة المصغرة، والتضمين الرسمي — وفي كل الحالات، لا فيديو ولا صوت.
بالنسبة ليوتيوب، يستخرج معرف الفيديو محليا وتختبر المقاسات الأربعة المنشورة مباشرة على مضيف الصور الرسمي، فلا تظهر إلا المقاسات الموجودة فعلا بأحجامها الحقيقية. ويتطلب اختيار أي منها تأكيدا صريحا للحقوق غير محدد مسبقا، ثم تفتح الصورة في استوديو الصور كأي صورة أخرى.
الأمان: التعامل مع كل رابط كأنه معاد
خدمة الروابط هي الجزء الوحيد الذي يتصل بالإنترنت، وبالتالي الجزء الوحيد الذي يمكن توجيهه ضد الخادم. والهجوم الذي يجب صده هو تزوير الطلبات من جهة الخادم (SSRF): إقناع هذا الجهاز بجلب شيء لا يستطيع الوصول إليه سواه — المضيف المحلي، أو الشبكة الداخلية، أو نقطة بيانات السحابة التي توزع بيانات الاعتماد.
قائمة المضيفين المسموح بها وحدها لا توقف ذلك. evil.com قد يشير إلى 169.254.169.254، والاسم الذي يحل بأمان أثناء التحقق قد يحل إلى مكان آخر بعد لحظات حين يبحث عنه عميل HTTP مجددا — وهو ما يسمى إعادة ربط DNS. لذلك يفعل الجالب ثلاثة أشياء لا يفعلها الجالب الساذج:
- السماح بالاسمتطابق تام أو نطاق فرعي حقيقي، بعد التوحيد. وعنوان IP صريح ليس مضيفا صالحا أبدا.
- تحليل كل عنوان والحكم عليهسجلات A و AAAA معا. ويجب أن يكون كل عنوان عاما أحادي البث — وإجابة خاصة واحدة تكفي لرفض المضيف.
- تثبيت الاتصاليعطى curl العنوان الذي جرى التحقق منه بالضبط، فلا يمكن للاسم أن يحل إلى مكان آخر بين التحقق والاتصال. وتتابع عمليات إعادة التوجيه يدويا ويعاد التحقق منها من الصفر.
- ترفض نطاقات IPv4 الخاصة والاسترجاعية والمحلية والـ CGNAT ونطاقات القياس والبث المتعدد والمحجوزة كلها.
- ترفض عناوين IPv6 الاسترجاعية والمحلية الفريدة والمحلية للوصلة والبث المتعدد — وتفك صيغ IPv4 المسقطة والمتوافقة و NAT64 ويحكم عليها بوصفها عنوان IPv4 الذي تمثله فعلا.
- HTTPS فقط، والمنفذ القياسي فقط، ولا بيانات اعتماد في الرابط، وثلاث عمليات إعادة توجيه كحد أقصى.
- يقيد البروتوكول على مستوى مقبض curl، فلا تستطيع إعادة توجيه أن تسلمه رابط file:// أو gopher://.
- تقطع الاستجابات أثناء النقل عند تجاوز الحد، وتفحص البايتات بـ libmagic بدل الوثوق بترويسة Content-Type.
- لا وجود لأي صدفة نظام في أي موضع — فلا توجد أداة وسائط تستدعى ولا سطر أوامر يمكن الحقن فيه.
ما تحاوله الاختبارات فعلا
ادعاءات الأمان أعلاه اختبارات في مجموعة، لا صفات. من بين الحالات: نقاط بيانات AWS و GCP، و localhost, 127.0.0.1, [::1]، وكل نطاقات IPv4 الخاصة، و IPv6 المحلية الفريدة والمحلية للوصلة، وصيغ IPv6 المسقطة لعناوين خاصة، والاسترجاعي المغلف بـ NAT64، و file://, gopher://، ومضيف يستغل تشابه اللاحقة (youtube.com.attacker.example)، وبيانات اعتماد مضمنة في الرابط، ومنفذ غير قياسي، ومعرف فيديو غير صالح.
| المجموعة | ما تغطيه | عدد الاختبارات |
|---|---|---|
| وحدات | تصنيف العناوين، وقائمة المضيفين، والتحقق من الروابط، وكشف المنصة، وتحليل معرف يوتيوب، وصدق جدول القدرات، وتطابق اللغتين | 139 |
| HTTP مباشر | شجرتا اللغة، والبيانات الوصفية والأصول، وترويسات الأمان، وكشف المسارات، وواجهة الروابط، ورفض SSRF، وبث الصور المصغرة، وتحديد المعدل، وصدق النصوص | 105 |
جرى التحقق من محرك الصور في متصفح حقيقي: صورة PNG بشفافية فعلية، وتحويل إلى JPEG و WebP بجودات متعددة، وصورة JPEG تحمل كتلة EXIF APP1 مركبة يدويا — تأكد وجودها في المدخل وغيابها من البايتات المصدرة، ومعالجة دفعة من ملفات بأحجام مختلفة، وملف ZIP استخرجت مدخلاته وفك ترميزها إلى صور مجددا.
خصوصية بنيوية، لا وعد
لا تقول صفحة الخصوصية «لا يخزن شيء»، لأن خادم الويب يحتفظ بسجل وصول وهذا سيكون غير صحيح. ما تقوله أضيق وقابل للتحقق: الصور لا تصل إلى الخادم أصلا.
- معالجة الصور تتم داخل المتصفح، فلا رفع ولا ملف مؤقت ولا مهمة تنظيف قد تفشل.
- تستقبل نقطة الروابط رابطا فقط؛ وتعالج الاستجابة في الذاكرة ولا تكتب على القرص أبدا.
- يعاد ترميز الصور المصدرة، ما يزيل EXIF و GPS وبيانات الكاميرا والطوابع الزمنية والتعليقات المضمنة افتراضيا.
- لا حسابات، ولا ملفات ارتباط للتتبع، ولا تحليلات، ولا أي طلبات لأطراف ثالثة من الصفحة.
- تربط عدادات تحديد المعدل بتجزئة لعنوان العميل وتمسح بعد ساعة.
- لا يستطيع الخادم الوصول إلى أي شيء خارج قائمة ثابتة مسموح بها — فهو ليس وسيطا.
إبقاء نسخة عرض عامة ضمن التكلفة
- ٢٥ ميجابايت لكل صورة و٢٠ صورة في المرة، ويطبق الحد قبل فك الترميز.
- سقف ٥٠ ميجابكسل، فترفض «قنبلة الضغط» بدل توسيعها.
- يحدد نوع الملف من توقيع البايتات، لا من الاسم أو النوع المعلن.
- تقيد نقطتا الروابط والصور المصغرة في nginx وفي PHP معا، وتجيبان بـ 429 بصيغة JSON تفهمها الواجهة.
- رفع الملفات في PHP معطل تماما في المجمع — فالتطبيق لا يحتاجه.
- تعمل العمليات بمستخدم غير مميز مخصص محصور بـ open_basedir، مع مهلة صارمة للطلب.
- ولأن العمل المكلف يجري على جهاز الزائر نفسه، لا يزداد الحمل بازدياد الإقبال.
العربية والإنجليزية
لكل لغة رابطها الخاص — /privacy and /ar/privacy — بدل مبدل داخل المتصفح، فتصبح كل نسخة قابلة للفهرسة على حدة ويصبح لـ hreflang معنى. واللغة خاصية للمسار لا لملف ارتباط، ما يبقي الصفحات قابلة للتخزين المؤقت.
- ١٣٠ نصا، تولد من مصدر واحد مشترك فلا يمكن أن يوجد مفتاح في لغة دون الأخرى.
- تنعكس الواجهة بخصائص CSS المنطقية؛ ويفتح الدرج من الحافة التي يقع عليها زر القائمة في الاتجاهين.
- أرقام عربية-هندية في الواجهة العربية، بما فيها أحجام الملفات.
- تعرض أسماء الملفات بعزل اتجاهي، فلا يقتطع اسم لاتيني داخل صفحة عربية من الطرف الخطأ.
الجوال وإمكانية الوصول
- جرى التحقق عند ٣٢٠ و٣٦٠ و٣٩٠ و٤٣٠ و٧٤٠ و٧٦٨ و١٠٢٤ و١٤٤٠ و١٩٢٠ بكسل عبر اثنتي عشرة صفحة باللغتين: ١٠٨ تركيبة، دون أي تمرير أفقي ودون أي هدف لمس أصغر من المطلوب.
- تحت ٣٨٠ بكسل يتقلص الشعار إلى رمزه لتتسع عناصر الترويسة — وبالعربية يقرأ زر اللغة «English» وهو أعرض، وكان أول ما انكسر.
- درج الجوال حوار حقيقي: ينتقل التركيز إليه ويحصر فيه، ويغلق بمفتاح Escape وبالنقر على الخلفية، ويعود التركيز إلى زر القائمة، ويتوقف تمرير الخلفية.
- عنوان h1 واحد لكل صفحة، ومناطق معالم، وعناصر معنونة، ورابط تخط، ومنطقة حية لرسائل الحالة.
- الحالة لا تنقل باللون وحده، وخيار تقليل الحركة يوقف كل الانتقالات.
البنية التقنية
PHP 8.3 يعرض شجرتي اللغة، وواجهة JSON صغيرة، وJavaScript خالصة تتولى معالجة الصور. دون إطار عمل، ودون خطوة بناء، ودون مدير حزم، ودون أي اعتماديات وقت التشغيل.
- SafeFetch — حارس الاتصالات الصادرة: قائمة السماح، والتحقق من العناوين، وتثبيت الاتصال، ومعالجة إعادة التوجيه يدويا.
- Sources — جدول المنصات، وهو ما يقود الواجهة وصفحة القدرات العامة معا، فلا يمكن للتوثيق أن ينفصل عن السلوك.
- Rate — تحديد معدل لكل عميل مدعوم بالملفات، لا يثق بترويسة الوسيط إلا حين يكون الطرف المتصل هو الوسيط المحلي فعلا.
- app.js — فك الترميز، وخط معالجة canvas، واختبار المرمز، وكشف EXIF، والدفعات، وكاتب ZIP.
- مستخدم نظام خاص به، ومجمع PHP-FPM، و open_basedir؛ ويقدم nginx المجلد العام فقط ويمنع كل ما فوقه.
- يخزن عامل الخدمة الهيكل الثابت للعمل دون اتصال، ولا يخزن أي شيء تحت /api/ أبدا.
خلل يستحق التسجيل: كان العامل يطابق الأصول المخزنة بـ ignoreSearch: true، ما أبطل بهدوء إبطال الذاكرة المؤقتة المعتمد على زمن التعديل — إذ ينتج البناء الجديد رابطا جديدا ويقدم العامل المحتوى القديم رغم ذلك. وحل ذلك بمطابقة الرابط الكامل.
ما تم قياسه
أرقام من البناء نفسه. لا توجد هنا أعداد مستخدمين ولا عدد تنزيلات، لأن هذه نسخة عرض لمعرض أعمال وليست لديها أي منها.
- 244اختبار آلي ناجح
- 51حالة SSRF وتحقق من الروابط مرفوضة
- 108فحص صفحة × عرض دون تمرير أفقي
- 0بايت من صور الزوار تصل إلى الخادم
- 130نصا، مكتملة باللغتين
- 11منصة، كل واحدة مذكورة بصدق
التقنيات
- PHP 8.3
- Vanilla JavaScript
- Canvas API
- createImageBitmap
- nginx
- PHP-FPM
- No framework
- خصائص CSS المنطقية
- تطبيق ويب تقدمي
- Service worker
- oEmbed
- Bilingual AR / EN