ایمن سازی HTML در Angular با استفاده از Sanitizer Pipe

درود و عرض ادبتوی این مقالک ( مقاله کوچک ) میخوایم که این موضوع رو با هم بررسی کنیم.علت نوشتن این مقاله هم این هست که من توی سورس کدی که روی اون مشغول به فعالیت هستم ، داشتم بالا و پایین میکردم که یک تیکه کد دیدم ، اون تیکه کد ، کد زیر بود :استفاده از Angular Pipe برای Sanitize کردنپس برای من سوال پیش اومد که این تیکه کد رو چرا اینجوری ننوشتن ؟استفاده از String Interpolation برای تغییر Content تگ مربوطهدر نتیجه تصمیم گرفتم که توی این نیمچه مقاله ، بیام و این موضوع رو با شما هم به اشتراک بذارم ، خوشحال میشم که نظراتتون و یا توضحیات تکمیلی خودتون رو زیر این پست یا توی کامنت های پست لینکدین مربوط به این مقاله (‌ این لینک ) با من و اونایی که این مقاله رو در آینده میخونن به اشتراک بذارید :) htmlSanitizer pipe by Ahmadreza Mozaffaryقبل از اینکه بریم سراغ موضوع احتیاج داریم که با یک مفهومی آشنا باشیم ، این مفهوم چیزی نیست جز نوشتن اسکریپت 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 کنیم و مثل اولین مثالی که توی این صفحه آورده شد از اون استفاده کنیم :) خیلی خیلی ممنونم از اینکه وقتتون رو در اختیار من قرار دادید ، بشخصه از اینکه نظرات ، انتقادات و پیشنهاداتتون رو چه زیر این مقاله و چه زیر پست مربوط به این مقاله توی صفحه لینکدین من ( این لینک ) با من به اشتراک بگذارید خوشحال میشم و از شما یاد میگیرم .ارادتمند ، احمدرضا مظفری