درود دوستان! یکی از مباحث مهم توی بحث امنیت برنامههای فرانتاندی، نحوهٔ تعامل با اسکریپتهای خارجی یا بهقول معروف Third-party scripts هست. این اسکریپتها وقتی به صفحه اضافه میشن، کنترل کاملی روی همه اطلاعات صفحه دارن. همین موضوع میتونه باعث ایجاد مشکلات امنیتی جدی توی برنامه بشه، که یکی از اونها رو توی این قسمت بررسی میکنیم.
مشکل کجاست؟
خیلی اوقات اسکریپتهای ما از یک CDN لود میشن. مثلاً میخوایم یک اسکریپت خارجی مثل یک پکیج جاوااسکریپتی که خیلی هم معروف هست رو به برنامه اضافه کنیم. به خودمون میگیم این پکیج خیلی معروفه پس چشمبسته اون رو به صفحه اضافه میکنیم:
<script src="https://unpkg.com/vue@3.2.1"></script>
اما اگه این وبسایتی که از اون داریم پکیج رو فراخونی میکنیم هک بشه چطور؟ و هکر کدهای دلخواه خودش رو توی اون اسکریپت قرار بده و اون توی برنامهٔ ما لود بشه چطور؟ چطوری میتونیم از اون جلوگیری کنیم؟ جواب، استفاده از یک تکنیک به اسم Subresource Integrity هست 💪
Subresouce Integrity چیه؟
Subresouce Integrity که بهطور خلاصه به اون میگیم SRI، یک قابلیت امنیتی که توی مرورگرهاست و اجازهٔ لود شدن یک ریسورس رو زمانی میده اون ریسورس هیچ تغییری نکرده باشه. توی این تکنیک، از ریسورس مد نظر یک Hash (رشته منحصر به فرد) ساخته میشه و ما باید اون رو به این شکل موقع فراخونی ریسورس (تگهای <script> یا <link>) ازش استفاده کنیم:
<script src="..." integrity="sha256-abc123..."></script>
توی اتریبیوت integrity هش مربوط به فایل رو قرار میدیم. وقتی مرورگر فایل رو از آدرس مد نظر دریافت میکنه، ابتدا خودش محاسباتی رو انجام میده تا هش فایل رو بدست بیاره، و بعد اون رو با مقدار integrity ارائهداده شده روی اسکریپت مقایسه میکنه. حتی اگه یک بایت از ریسورس تغییر کنه، مقدار هش اون فایل هم تغییر میکنه. بنابراین اگه این هشها با هم برابر باشن، مرورگر اجازهٔ لود اون اسکریپت رو میده. در غیر این صورت مرورگر خطایی میده که به دلیل عدم تطابق مقادیر هش، اسکریپت بلاک شد:
Failed to find a valid digest in the 'integrity' attribute for resource 'https://example.com/script.js' with computed SHA-256 integrity. The resource has been blocked.
برای مثال اگه به برید، میبینید که برای همه ریسورسها اتریبیوت integrity وجود داره.