مواظب باشید؟! CSS های شخص ثالث امن نیستند!

- visibility ۰ mode_comment

چند وقت پیش یک کد با استفاده از CSS بنام CSS-Keylogging نوشته شده بود که میشد با استفاده از اون به رمز عبوری که کاربر وارد میکنه دسترسی پیدا کرد و اون رو فهمید. این مورد یکی از CSS های شخص ثالث نا امن محسوب میشه.مواظب باشید؟! CSS های شخص ثالث امن نیستند!

خیلی از کاربران با دیدن چنین کدی از مرورگرها درخواست کردند که این اجازه رو به CSS نده. بعضی دیگه از کاربران متوجه شدن که این کد فقط در سایتهایی که با فریم ورک های مثل React ساخته شده است به خوبی کار میکنه و انگشت اتهام رو به سمت React و ... دراز کردند. اما مشکل اساسی که در پشت پرده وجود داره اینه که پیش خودمون فکر کنیم CSS های شخص ثالث یا کدهای CSS که توسط افراد دیگه نوشته شده اند، امن و قابل استفاده هستند.

تصاویر سایتهای دیگر

آدرس تصویر زیر را در نظر بگیرید:

اگر تصویر نمونه بالا رو در سایت خودمون قرار بدیم، به این معنی هست که به سایت example.com اعتماد داریم. سایت example.com میتونه این تصویر رو بدون اجازه ما حذف کنه و با اینکار به ظاهر سایت ما ضربه بزنه و شاید کلا اون تصویر رو تعویض کنه و یک چیزی که مورد پسند ما نباشه رو قرار بده.

ولی خوبی که تصویر داره اینه که محدود به باکس خودش میشه و مشکل خاص دیگه ای رو به همراه نداره. شما میتونین به سادگی یک متن زیر تصویر قرار بدین و بگید که تصویر رو از سایت example.com دریافت کردید و با اینکار اگر مشکلی برای تصویر پیش بیاد کاربران متوجه میشن که مشکل از سایت example.com هست و نه سایت شما. پس همونطور که میبینید تصاویر سایتهای دیگر نمیتونن مشکل امنیتی رو برای سایت شما به وجود بیارن.

اسکریپت های سایتهای دیگر

کد زیر رو در نظر بگیرید که یک اسکریپت رو از سایت دیگه لود میکنه:

در مقایسه با تصاویر، کدهای Javascript کنترل بیشتری بر روی سایت شما دارند. اگر کد بالا رو در سایت خودم قرار بدم، به سایت example.com اجازه میدم که بر روی سایت من کنترل کاملی داشته باشه. سایت example.com با این اسکریپت میتونه کارهای زیر رو انجام بده:

  • محتوای صفحه رو بخونه یا تغییر بده
  • رفتار کاربران رو بررسی کنه و اونا رو تحت نظر داشته باشه
  • میتونه به سرور شما با استفاده از کوکی سایت شما، درخواست ارسال کنه و جواب دریافت کنه
  • ....

تقریبا example.com هر کاری که بخواد میتونه انجام بده. پس اگر قصد دارید که از سایت دیگه ای اسکریپتی رو در سایت خودتون قرار بدین، تا 100% به اون سایت و کدهای اون اطمینان حاصل نکردید، اون رو قرار ندین.

کدهای CSS سایتهای دیگر

با استفاده از کد زیر میتونیم کدهای CSS مربوط به سایت دیگه ای رو در وبسایت خودمون قرار بدیم:

CSS از لحاظ قدرت به Javascript نزدیکتر هست تا یک تصویر ساده. همانند اسکریپت، کدهای CSS هم میتونن به کل صفحه اعمال بشن. اونا میتونن کارهای زیر رو انجام بدن:

  • میتونن محتوای صفحه رو حذف کنن یا تغییر بدن و یا چیزی رو به اون اضافه کنند
  • درخواستهایی رو متناسب با محتوای صفحه به سرور ارسال کنند
  • و ...

کارهایی که CSS میتونه بکنه در مقابل Javascript خیلی ناچیزه ولی باز هم نباید اون رو دست کم بگیرید. به عقیده من چون پیش خودمون فکر میکنیم که کدهای CSS بی خطر هستند، میتونن خیلی خطرناک تر از Javascript باشند و به سایت و اعتماد ما ضربه بزنند. در ادامه نمونه هایی از کارهای مخربی که CSS میتونه انجام بده رو براتون توضیح میدم.

Keylogger یا دسترسی به کلیدهای فشرده شده

به چیزی Keylogger گفته میشه که کلیدهای فشرده شده توسط کاربر رو ذخیره سازی میکنه و در اختیار افراد دیگه قرار میده. در اینجا در مورد روشی که در ابزار CSS-Keylogging مورد استفاده قرار گرفته است، توضیحاتی رو قرار میدیم.

همونطور که در کد بالا میبینید، اگر حرف آخری که درون input از نوع password قرار داره برابر با p باشه، یک درخواست به آدرس /password?p فرستاده میشه. این ابزار این کار رو برای همه کاراکترها انجام داده و با اینکار به همه داده ها دسترسی داره.

مرورگرها بصورت پیش فرض اطلاعاتی که در input وارد میشه رو درون ویژگی value قرار نمیدن و نمیتونیم به اونا دسترسی داشته باشیم. ولی زمانی که از ابزارهایی مثل React استفاده میکنیم، اطلاعات وارد شده در ویژگی value قرار داده میشن و میتونین از روش بالا استفاده کنید. بخاطر همین هست که در بالا گفتیم سایتهای React و ... در مقابل این روش آسیب پذیر هستند.

مخفی کردن محتوا

کد زیر رو ببینید:

با استفاده از کد ساده بالا، کل محتوای صفحه مخفی شده و یک متن سرور ارور با کد HTTP 500 به کاربر نمایش داده میشه.

اضافه کردن محتوا

کد زیر رو ببینید:

همونطور که مشاهده میکنید با این کد عدد 1 به اول قیمت محصول شما اضافه میشه و قیمت متفاوت و غیر واقعی رو در اختیار کاربران قرار میده.

جابجا کردن محتوا

با استفاده از این کد میتونیم یک قسمت از صفحه رو جابجا کنیم و اون رو مخفی کنیم و ...

پایش و مانیتورینگ رفتار کاربران

کد زیر رو ببینید:

همونطور که میبینید هر زمان که کاربر بر روی دکمه ورود هاور کنه و یا بر روی اون کلیک کنه و نگه داره، درخواستهایی به آدرسهای متفاوت فرستاده میشه و شما میتونین بفهمید که کاربران چند بار و چگونه وارد سایت شما شده اند.

CSS های شخص ثالث امن نیستند!

این مواردی که بیان شد تعداد کمی از مثالهای مخرب برای CSS هست و مطمئنا موارد دیگه ای هم وجود داره.

پس باید با دقت از کدهای CSS نوشته شده توسط افراد دیگه در سایت خودتون استفاده کنید. برای مطالعه بیشتر در این زمینه میتونین به این لینک مراجعه کنید.

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.