درود و عرض ادب
توی این مقالک ( مقاله کوچک ) میخوایم که این موضوع رو با هم بررسی کنیم.
علت نوشتن این مقاله هم این هست که من توی سورس کدی که روی اون مشغول به فعالیت هستم ، داشتم بالا و پایین میکردم که یک تیکه کد دیدم ، اون تیکه کد ، کد زیر بود :
پس برای من سوال پیش اومد که این تیکه کد رو چرا اینجوری ننوشتن ؟
در نتیجه تصمیم گرفتم که توی این نیمچه مقاله ، بیام و این موضوع رو با شما هم به اشتراک بذارم ، خوشحال میشم که نظراتتون و یا توضحیات تکمیلی خودتون رو زیر این پست یا توی کامنت های پست لینکدین مربوط به این مقاله ( این لینک ) با من و اونایی که این مقاله رو در آینده میخونن به اشتراک بذارید :)
قبل از اینکه بریم سراغ موضوع احتیاج داریم که با یک مفهومی آشنا باشیم ، این مفهوم چیزی نیست جز نوشتن اسکریپت Cross Site یا XSS Attack !
اگه که بخوایم از گوگل بپرسیم این پاسخ رو به ما میده :
در واقع به طور خلاصه خدمتتون عرض کنم که اینجوریه که فرض کنید که ما یک صفحه داریم که نام کتاب ها و مشخصات اونا رو میگیره که توی اون یک اینپوت داریم و بجای اینکه صرفا یک متن ( نام کتاب ) به عنوان ورودی به اون بدیم ، یک تیکه کد HTML با تگ مثلا به اون پاس میدیم 😉 ، یعنی :
بعد ما value این input رو ذخیره میکنیم و برای بکند ارسال میکنیم ، تا اینجا قضیه هیچ اتفاقی رخ نمیده ! اما وقتی که این دیتا هایی که توی مثلا صفحه Register Books گرفتیم رو میخوایم توی صفحه Books لود کنیم ، اونجا دیگه صرفا متن نیست که لود میشه بلکه یک متن به همراه یک script قابل execute هست که لود میشه و این باعث میشه که مثلا در ساده ترین حالت Lifecycle یا State اپ مارو به هم بریزه و یا وابسته به این که توی اون اسکریپت چی هست و چه کاری رو انجام میده ، روی صفحه ما Side Effect بذاره !
یعنی وقتی که صفحه Books لود میشه به ازای تمامی کتاب هایی که رجیستر شده اند متن Evil Code میاد و alert میشه :)
خب راه حل ما برای جلوگیری از این کار چیه ؟ 🤔
یادآوری : ما این داستان رو توی جاواسکریپت وانیلا هم داشتیم ، مثلا میگفتیم که بهتره که بجای اینکه content یک تگ رو با selectedTag تغییر بدیم بیایم و اونو با selectedTag.innerText تغییر بدیم تا اگه اسکریپتی هم میخاد اینجکت بشه صرفا فرمت Text باشه و Executable نباشه !
اما الان موضوع مورد بحث ما انجام ایمن سازی محتوای تگ ها و جلوگیری از XSS توی Angular هست ! پس بریم با هم برای این کار یک پایپ بنویسیم که این داستان رو برای ما کنترل و مدیریت کنه !
برای این کار از کتابخونه ای که خدمتتون عرض خواهم کرد توی پایپ مد نظرمون استفاده میکنیم ، کتابخونه ی DOMPurify و خود DomSanitizer انگولار که توی مسیر 'angular/platform-browser@' قابل دسترسی هست .
برای نوشتن پایپ مدنظر ، اول یک فایل با اسم مثلا sanitizeHtml.pipe.ts ایجاد میکنیم و بعد از اون چیزایی که لازم داریم رو import میکنیم :
بعد از اون پایپ مد نظرمون رو به اینصورت ( سینتکس خود Angular ) مینویسیم :
حالا تنها نکته ای که میمونه طبق قرارداد و سینتکس استفاده از پایپ در انگولار ، این هست که برای اینکه بتونیم از این پایپ استفاده کنیم ، این پایپ رو توی فایل app.module.ts و در ارایه declaration جایی که میخوایم از اون استفاده کنیم ، import کنیم و مثل اولین مثالی که توی این صفحه آورده شد از اون استفاده کنیم :)
خیلی خیلی ممنونم از اینکه وقتتون رو در اختیار من قرار دادید ، بشخصه از اینکه نظرات ، انتقادات و پیشنهاداتتون رو چه زیر این مقاله و چه زیر پست مربوط به این مقاله توی صفحه لینکدین من ( این لینک ) با من به اشتراک بگذارید خوشحال میشم و از شما یاد میگیرم .
ارادتمند ، احمدرضا مظفری
