એક Auth સ્ટોરી
મને સિસ્ટમ ડિઝાઇન ગમે છે. મને એવા નાના નિર્ણયો વિશે વિચારવું ગમે છે જે સોફ્ટવેરને વપરાશકર્તાઓ માટે ઉત્તમ બનાવે છે.
એક એન્જિનિયર તરીકે, મને સુરક્ષાની ચિંતા હોય છે. જો સોફ્ટવેર અસુરક્ષિત હોય અથવા હુમલાઓને કારણે નાણાકીય નુકસાન થાય, તો તે નકામું છે. હું એવા પ્રોડક્ટ્સ બનાવવા માંગુ છું જે દર વખતે યોગ્ય રીતે કામ કરે.
મેં તાજેતરમાં એક AI સ્ટાર્ટઅપ માટે authentication પર કામ કર્યું છે. મેં frontend માટે Next.js નો ઉપયોગ કર્યો હતો. Next.js નાની ટીમો માટે ઉત્તમ છે કારણ કે તે એક જ કોડબેઝમાં frontend અને backend ને જોડે છે.
આ પ્રોજેક્ટ દરમિયાન, મેં બ્રાઉઝરમાં authentication tokens ને કેવી રીતે સ્ટોર કરવા અને સુરક્ષિત કરવા તેના પર ધ્યાન કેન્દ્રિત કર્યું. તેનો ઉકેલ cookies છે, ખાસ કરીને HttpOnly cookies.
Local Storage ને બદલે cookies નો ઉપયોગ શા માટે કરવો?
Local Storage વાપરવામાં સરળ છે, પરંતુ તેમાં જોખમ છે. JavaScript તેને વાંચી શકે છે. આ તેને Cross-Site Scripting (XSS) હુમલાઓ સામે અસુરક્ષિત બનાવે છે. જો તમારી સાઇટ પર કોઈ નુકસાનકારક સ્ક્રિપ્ટ ચાલે, તો તે તમારા વપરાશકર્તાનો ટોકન ચોરી શકે છે.
Cookies આ સમસ્યાનો ઉકેલ આપે છે. તમે cookie માં HttpOnly flag ઉમેરી શકો છો. આ બ્રાઉઝરને જણાવે છે: "આ cookie ને ફક્ત HTTP requests દ્વારા જ મોકલો. JavaScript ને તેને સ્પર્શ કરવા ન દો."
જો કોઈ હુમલાખોર JavaScript નો ઉપયોગ કરીને cookie વાંચવાનો પ્રયાસ કરે, તો તેને કંઈ જ દેખાશે નહીં. cookie તેમના માટે અદ્રશ્ય રહેશે, પરંતુ બ્રાઉઝર હજુ પણ તેને આપમેળે તમારા સર્વર પર મોકલશે.
Cookies ને વધુ સુરક્ષિત બનાવવા માટે, હું અન્ય બે flags નો ઉપયોગ કરું છું:
• Secure: આ સુનિશ્ચિત કરે છે કે cookie ફક્ત HTTPS દ્વારા જ ટ્રાન્સફર થાય. • SameSite=Lax: આ Cross-Site Request Forgery (CSRF) હુમલાઓને રોકવામાં મદદ કરે છે.
મેં Next.js સાથે આ કેવી રીતે અમલમાં મૂક્યું:
હું મારું backend (FastAPI) બ્રાઉઝરથી છુપાવવા માંગતો હતો. મેં server-to-server સેટઅપ બનાવવા માટે Next.js નો ઉપયોગ proxy તરીકે કર્યો.
- વપરાશકર્તા Next.js Server Action દ્વારા લોગિન કરે છે.
- Server Action FastAPI ને credentials મોકલે છે.
- FastAPI Next.js સર્વરને token પરત કરે છે.
- Next.js સર્વર તે token ને HttpOnly cookie માં લખે છે.
- બ્રાઉઝર cookie ને સ્ટોર કરે છે પરંતુ તેને વાંચી શકતું નથી.
જ્યારે વપરાશકર્તાને ડેટાની જરૂર હોય છે, ત્યારે Next.js સર્વર cookie વાંચે છે અને તેમના વતી backend સાથે વાત કરે છે. સંવેદનશીલ token ક્યારેય બ્રાઉઝરના JavaScript એન્વાયરમેન્ટને સ્પર્શ કરતું નથી.
આ સેટઅપ મારા backend ને અલગ રાખે છે અને મારા વપરાશકર્તાઓને વધુ સુરક્ષિત રાખે છે.
તમે તમારા Next.js પ્રોજેક્ટ્સમાં authentication કેવી રીતે હેન્ડલ કરો છો? મને તમારા અભિગમ વિશે જાણવામાં આનંદ થશે.