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

توکن دزدی یا token theft روشیه که هکر میاد توکن کاربر و بعد از اینکه کاربر وارد سیستم شد و لاگین کرد میدزده و هرکاری که میخواد با اون توکن میکنه!
تو این ویدیو ما بررسی میکنیم که چه طوری با XSS هکر میتونی یه تیکه اسکریپت به سیستم ما اضافه کنه، بعد میایم یه راه حلی ارائه میدیم که اگر ۱درصد یه روزی تونستن به سیستم ما دسترسی و یه اسکریپت اضافه کنن به سیستم توکن و ندزدن و به اون دسترسی نداشته باشن
تو این ویدیو یاد میگیریم که با استفاده از HTTP-Only کوکی جلوی این مدل اتک رو بگیریم و سرعت یه لایه امنیتی برای جلوگیری از توکن دزدی بزاریم
داخل ویدیو به چندتا مسئله دیگه اشاره میکنم که لینک ویدیو های مربوط به اون قسمتارو اینجا براتون میزارم
ویدیو مربوط به دیپلوی کردن بک و فرانت اند کنار هم:
• هزینه سرور و هاست و کم...
ویدیو مربوط به CORS و Origin:
• خطای CORS چیه و چه طور...
00:00 - مقدمه
0:35 - حمله XSS چیه و چه طوری کار میکنه!
2:09 - حمله Supply Chain Attack!
3:13 - راه حل منطقی و اصولی برای جلوگیری از این مدل اتک
4:25 - کوکی ها تو مرورگر چه طوری کار میکنند
5:15 - کوکی httpOnly چیه و چیکار میکنه!
6:25 - بک‌اند امن و درست باید چه جوری پیاده شده باشه
8:21 - پیاده سازی سیستم signin و ذخیره توکن به صورت httpOnly
9:22 - کد بک‌اند برای ذخیره کوکی httpOnly
11:13 - کوکی خودش ارسال میشه به بک‌اند
11-47 - ذخیره فلگ برای چک کردن وضعیت لاگین
12:22 - پیاده سازی Protected Route
14:08 - تشخیص لاگین بودن کاربر بدون فلگ
14:45 - جمع بندی و پایان
Website: react.ir
Twitter: / react_ir
Instagerm: / react_ir
Telegram: t.me/react_ir
Personal Twitter: / nima_arf
Personal Instagram: / nima_arf
Personal Github: github.com/nimaa77

[@user-xr3fi1ld1p]

فوق العاده بود , حتما از این دست ویدیو های کاربردی وتخصصی بازم بسازید ممنون 😍

[@sadeghakbari7116]

خیلی مفید بود
💥

[@JTSCODE]

خسته نباشید ، مثل همیشه عالی و مفید بود 👏🙏❤️

[@nima_arf]

خواهش میکنم، امیدوارم به کار بیاد و کمکتون کرده باشه

[@benyamin4634]

مرسی خسته نباشی

[@nima_arf]

خواهش میکنم، سلامت باشید

[@pouyasadeqi7260]

dadash awli bod khudaie kheili fane bayanet awliye

[@nima_arf]

عشق عشق چاکریم ❤️😍

[@illustrayking3243]

عالی بود آقا نیما همینطوری ادامه بده

[@nima_arf]

😍🔥 فکر نمیکردم اینقدر طرفدار پیدا کنه این ویدیو

[@amirhosein-hr7zp]

مثل همیشه عالی بود نیما جان 🎉🎉🎉🎉

[@nima_arf]

😍😍🔥🫡

[@sheyda_arf]

عالی🔥👌🏼

[@nima_arf]

❤️

[@alirezadnia]

عالی بوئ نیما جان

[@nima_arf]

چاکریم 😍🔥

[@abba3261]

nice

[@nima_arf]

Thanks

[@ghazaleniazi5855]

عالی بود🔥

[@tahmasbtabar]

مثل همیشه عالی و کاربردی🔥🔥

[@nima_arf]

ایول، خوشحالم که مفید بوده

[@pouriyababaali7040]

عالی 🎉

[@nima_arf]

😍❤️ ایول که خوب و خوشتون اومد

[@yousef-pd3ou]

ندید میگم مثل همیشه عالی ❤

[@nima_arf]

عشق عشق 🔥❤️

[@amirmohamadbashiri]

🔥 🔥 🔥

[@nima_arf]

😍❤️ ایول که خوب و خوشتون اومد

[@rpgzan2028]

خیلی خوب بود ویدیو. فقط توی اینترو صدای موزیک خیلی بالا بود. میتونی sidechain بزنی که وقتی داری صحبت میکنی صدای موزیک بیاد پایین.

[@nima_arf]

حتما درستش میکنم تو ویدیوهای بعدی

[@Ehsan.5G]

بسیار عالی نیما جان
اگه یه دوره پروژه محور هم بسازید که دیگه خیلی مدیون میشیم 😂❤🎉

[@nima_arf]

ایول 😍
دوره پروژه محور نکست یا ری‌اکت؟

[@Ehsan.5G]

@@nima_arf اگه امکانش هست next 😍🌹

[@hoseinheydari7220]

💥💥

[@nima_arf]

🔥🔥🔥

[@javidwilldesignn]

favorite apple user of us !!

[@nima_arf]

😂😂😂 چیکار کنم دیگه
لامصب خوبه

[@hersheldeveloper]

راهکار دومی که دادید بهتر بود به نظرم چون مدیریت کردنش خیلی راحت تر و دقیقتره

[@nima_arf]

راهکار برای اینکه بدونیم کاربر لاگین هستش یا نه؟
اره منم خودم اونو بیشتر از فلگ گذاشتن دوست دارم

[@aminda6862]

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

[@nima_arf]

بله حتما فردا انجامش میدم

[@erfungraph2575]

Thank you Nima for your practical and super educative tutorial videos. I really appreciate your efforts.
may I ask you giving me the link of that community you said? "which you said that you talk with others and they talk about complicated solutions for simple things like this...".

[@nima_arf]

سلام
خوشحالم که از ویدیو خوشت اومده
۳ تا گروه تو تلگرام هستند که من اونجا ارتباط دارم با بچه ها، اگر امکانش هست داخل تلگرام به من یه پیام بده که لینکشونو بفرستم با از کانال تلگرام خودم ادرس اون گروه هارو بردار
@nima_arf
@react_ir

[@saeedkefayati]

Hata mishe ba encryption to local storage zakhire kard ya hata ba interceptor handle kard 👌👌

[@nima_arf]

سلام
اگر تو مرورگر توکن و encrypt کنید، کلیدی که باهاش رمزنگاری و انجام داد تو کدای پروژه شما هستش و با یه نگاه کردن ساده به کدای js میتونن کلید رمز نگاری و پیدا کنن
درسته که در نگاه اول همینطوری توکن و بردارن به دردشون نمیخوره ولی خب یه کوچولو کنجکاوی کنن راحت میتونن دورش بزنن

[@ghazaleniazi5855]

🔥🔥

[@iliyalb]

arc 😱

[@nima_arf]

زیباست
هرچی فیچر داره رو edge داره کپی میکنه 😂

[@mbking7854]

محتوا عالی
فقط گین میکروفون رو یکم کم کن
صدات میکوبه
صدای فن داره میاره
نفس هم میکشی میاد
اینارو نباید بگیری و صداش خودش شفاف تر میشه

[@nima_arf]

صدای میکروفون و کارت صدا کم بود (مناسب بود)
من تو نرم افزار زیادی، زیادش کردم
بعد که اپلود کردم متوجه شدم چه خراب کاری کردم
ولی خب اینکه چه طوری میشه صدای نفس کشیدن و ردیف کرد و نمیدونم، حالا این دفعه صدای کارت صدارو کم میکنم، یه کمپرسور میزارم بعدش زیادش میکنم
ببینن چی میشع

[@Happyday-nn6rh]

در مورد اینکه برای مدیریت کاربر سمت کلایت اومدید از localstorage استفاده کردید نمیشه از کوکی استفاده کرد ؟ و اینکه مثلا authjs اینو چطوری هندل میکنه که هم سمت کلایته هم سمت سرور ؟

[@nima_arf]

چرا میشه، اونجا به جای دخیره flag تو localStorage اون فلگ رو داخل کوکی ست کنید
اگر از next auth استفاده میکنید اون خودش کوکی و به صورت httpOnly ذخیره میکنه و شما از session بهش دسترسی دارید
بعد این سشن رو کلاینت و سرور در اخیتار شما هستش، خودتون میاید
SessionProvider و رندر میکنید و session و بهش پاس میدید (یا وقتی useSession و صدا میکنید رو کلاینت، میاد یه fetch میزنه به یه اندپوینتی تو سایت خودتون و اطلاعات یوزر و میگیره - که خب اینجا کوکی میره رو سرور و ...)

[@alishaker4112]

سلام
نمیشه درباره طراحی لاگین و رجیستر امن با Express بسازی برامون؟

[@nima_arf]

سلام
همین مثال این ویدیو با اکسپرس بود، اگر میخواید میتونم بزارمش تو گیت هاب و لینکشو ارسال کنم

[@alishaker4112]

ممنون میشم بزارید

[@azad01_]

آقا اون
credentials include
رو متوجه نشدم

[@nima_arf]

حقیقتش اون لازم نیست
بدون اون هم درست کار میکنه
من بعد از ضبط ویدیو متوجه شدم
ولی اگر خواستی درباره‌ش بدونی اینجارو بخون
developer.mozilla.org/en-US/docs/Web/API/Request/credentials

[@mohammadreza5714]

همه چیز واسه دوره گذاشتن مهیاست ، چرا اقدام نمیکنی یزید؟

[@nima_arf]

اخه وقت نمیکنم
الان دارم هفته‌ای یدونه ویدیو میزارم پوستم کنده شده 😂
بعد دوره چی بزارم؟