20 درصد تخفیف ویژه دوره های جامع آکادمی تکوان24!

فقط 0 روز و 0 ساعت و 0 دقیقه و 0 ثانیه باقی مانده!

مقایسه فرانت اند و بک اند

زمان مطالعه: 6 دقیقه

آنچه در این مقاله می‌خوانید

مقایسه فرانت اند و بک اند:

 در این مقاله قصد داریم تا به مقایسه فرانت اند و بک اند بپردازیم تا آشنایی بیشتری با ساختار وب اپلیکیشن ها داشته باشید و بدانید بک اند و فرانت اند هر کدام شامل چه اجزایی هستند.

ممکن است اصطلاح توسعه وب در فرانت اند یا توسعه وب در بک اند و یا توسعه وب Full Stack را شنیده باشید که به توسعه وب فرانت اند و بک اند اشاره دارد. این اصطلاحات مترادف با توسعه وب اپلیکیشن ها هستند، زیرا اکثر چرخه توسعه وب را تشکیل می دهند. با این حال، این اصطلاحات بسیار متفاوت از یکدیگر هستند، زیرا هر یک به یک سمت از  وب اپلیکیشن  اشاره دارد و هر یک در قسمت های متفاوتی ارتباط دارند.

فرانت اند:

قسمت فرانت اند یک  وب اپلیکیشن شامل اجزای کاربر است که مستقیماً از طریق مرورگر وب آنها (سمت کلاینت) نمایش داده می‌شود. این مؤلفه‌ها کد منبع صفحه وب را تشکیل می‌دهند که هنگام بازدید از یک وب اپلیکیشن مشاهده می‌کنیم و معمولاً شامل CSS، HTML و جاوا اسکریپت می‌شوند که سپس در زمان استفاده توسط مرورگرهای ما تفسیر می‌شود.

front end

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

در  وب اپلیکیشن های مدرن، اجزای فرانت اند باید با هر اندازه صفحه سازگار شوند و در هر مرورگری در هر دستگاهی کار کنند. این در تضاد با اجزای  بک اند است که معمولاً برای یک پلتفرم یا سیستم عامل خاص نوشته می شوند. اگر قسمت فرانت اند یک  وب اپلیکیشن به خوبی بهینه نشده باشد، ممکن است کل  وب اپلیکیشن را کند و پاسخگو نباشد.

در این مورد، برخی از کاربران ممکن است فکر کنند که سرور میزبان یا اینترنت آنها کند است، در حالی که مشکل کاملاً در سمت کلاینت و در مرورگر کاربر است. به همین دلیل است که قسمت فراننت اند یک  وب اپلیکیشن باید برای اکثر پلتفرم ها، دستگاه ها (از جمله موبایل!) و اندازه صفحه نمایش بهینه شود.

به غیر از توسعه کد فرانت اند، موارد زیر برخی از وظایف دیگر مربوط به توسعه فرانت اند وب اپلیکیشن هستند:

  • Visual Concept Web Design
  • User Interface (UI) design
  • User Experience (UX) design

سایت های زیادی برای تمرین برنامه نویسی فرانت اند در دسترس ما هستند. یکی از نمونه ها این سایت  است. در اینجا می‌توانیم با ویرایشگر بازی کنیم، متن را تایپ و قالب‌بندی کنیم و ببینیم که HTML، CSS و جاوا اسکریپت حاصل برای ما تولید می‌شود. این مثال بسیار ساده را در سمت راست ویرایشگر کپی/پیست کنید.

کد HTML

با توجه به خروجی سعی کنید با یادگیری HTML,CSS و جاوا اسکریپت تغییرات ایجاد کرده و بیشتر روی فرانت اند کار کنید.

بک اند:

قسمت بک اند یک  وب اپلیکیشن، تمام عملکردهای اصلی  وب اپلیکیشن را هدایت می کند، که همه آنها در سرور بک اند اجرا می شوند، که همه موارد مورد نیاز برای اجرای صحیح  وب اپلیکیشن را پردازش می کند. این بخشی است که ممکن است هرگز آن را نبینیم یا مستقیماً با آن تعامل داشته باشیم، اما یک وب سایت بدون بک اند فقط مجموعه ای از صفحات وب استاتیک  است.

چهار جزء اصلی برای  وب اپلیکیشن ها وجود دارد:

Back end Servers:

سخت افزار و سیستم عاملی که میزبان همه اجزای دیگر است و معمولاً روی سیستم عامل هایی مانند لینوکس، ویندوز یا با استفاده از Containers اجرا می شود.

Web Servers:

وب سرورها درخواست ها و کانکشن های HTTP را مدیریت می کنند. برخی از نمونه های آن Apache، NGINX و IIS هستند.

Databases:

پایگاه های داده (DB) داده های  وب اپلیکیشن را ذخیره و بازیابی می کنند. برخی از نمونه‌های پایگاه داده رابطه‌ای عبارتند از MySQL، MSSQL، Oracle، PostgreSQL، در حالی که نمونه‌هایی از پایگاه‌های داده غیررابطه‌ای شامل NoSQL و MongoDB هستند.

Development Frameworks:

Development Frameworks برای توسعه هسته وب اپلیکیشن استفاده می شود. برخی از فریمورک های معروف عبارتند از PHP، C#، Java، Python و NodeJS JavaScript.

back end

همچنین می‌توان با استفاده از سرویس‌هایی مانند Docker، هر جزء از بک‌ اند را بر روی سرور ایزوله خود یا در کانتینرهای ایزوله میزبانی کرد. برخی از بخش‌های  وب اپلایکیشن، مانند پایگاه داده، را می‌توان در یک کانتینر داکر نصب کرد و هسته وب اپلیکیشن در کانتینر دیگر داکر نصب می‌شود تا هر کدام به طور منطقی از هم جدا باشند با این امید که آسیب‌پذیری‌هایی که ممکن است بر روی یکی تأثیر بگذارد (یعنی یک آسیب پذیری روی وب اپلیکیشن) تا کانتینر(های) دیگر. همچنین می توان هر کدام را با سرور اختصاصی خود جدا کرد که نگهداری آن به منابع قوی تر و زمان برتر نیاز داشته باشد. با این حال، این بستگی به مورد تجاری و طراحی/کارکرد  وب اپلیکیشن مورد نظر دارد.

برخی از کارهای اصلی انجام شده توسط اجزای back end عبارتند از:

  • توسعه دادن منطق اصلی و خدمات قسمت بک اند  وب اپلیکیشن.
  • توسعه کدهای اصلی و عملکردهای  وب اپلیکیشن.
  • توسعه و نگهداری پایگاه داده پشتیبان.
  • توسعه و پیاده سازی کتابخانه هایی برای استفاده توسط  وب اپلیکیشن.
  • پیاده سازی نیازهای فنی/تجاری برای وب اپلیکیشن.
  • پیاده سازی API های اصلی را برای ارتباطات اجزای فرانت اند.
  • ادغام کردن سرورهای راه دور و خدمات ابری را در  وب اپلیکیشن.

امنیت فراند و بک اند:

 برای تجزیه و تحلیل عملکردها و ساختار کد به کد های بک اند  دسترسی نخواهیم داشت، اما این  اپلیکیشن را آسیب ناپذیر نمی کند. برای مثال، هنوز هم می‌توان از آن توسط حملات injection مختلف استفاده کرد.

فرض کنید یک باکس جستجو در یک وب اپلیکیشن داریم که به اشتباه کوئری های جستجوی ما را به درستی پردازش نمی کند. در آن صورت، ما می‌توانیم از تکنیک‌های خاصی برای دستکاری کوئری‌ها استفاده کنیم، به گونه‌ای که دسترسی غیرمجاز به داده‌های پایگاه‌داده خاص داشته باشیم مانند SQL Injection یا حتی دستورات سیستم عامل را از طریق  وب اپلیکیشن، که به نام Command Injections نیز شناخته می‌شود، اجرا کنیم.

command injectionما در مقالات بعدی در مورد نحوه امن کردن هر یک از اجزای مورد استفاده در قسمت های فرانت اند و اند صحبت خواهیم کرد. هنگامی که ما به کد منبع اجزای فرانت اند دسترسی کامل داریم، می‌توانیم یک بررسی کد برای یافتن آسیب‌پذیری‌ها انجام دهیم، که بخشی از چیزی است که به آن Whitebox Pentesting گفته می‌شود.

از سوی دیگر، کد منبع اجزای ی بک‌اند در سرور بک‌اند ذخیره می‌شود، بنابراین ما به‌طور پیش‌فرض به آن دسترسی نداریم، که ما را مجبور می‌کند تنها کاری را انجام دهیم که به عنوان Blackbox Pentesting شناخته می‌شود. با این حال، همانطور که خواهیم دید، برخی از وب اپلیکیشن هاب اوپن سورس هستند، به این معنی که ما احتمالا به کد منبع آنها دسترسی داریم. علاوه بر این، برخی از آسیب‌پذیری‌ها مانند Local File Inclusion می‌توانند به ما اجازه دهند کد منبع را از سرور بک‌اند به دست آوریم. با در دست داشتن این کد منبع، سپس می‌توانیم یک بازبینی کد روی اجزای پشتیبان انجام دهیم تا بیشتر بدانیم که  اپلیکیشن چگونه  کار می‌کند، احتمالاً داده‌های حساس را در کد منبع (مانند رمزهای عبور) را پیدا می‌کنیم، و حتی آسیب‌پذیری‌هایی را پیدا کنیم که دشوار یا غیرممکن است که بدون دسترسی به کد منبع پیدا کنید.

 

چند اشتباه رایج که توسعه دهندگان وب مرتکب می شوند و برای pen tester ها ضروری است عبارتند از:

  1. اجازه ورود داده های نامعتبر به پایگاه داده.
  2.  ایجاد روش های امنیتی توسعه یافته شخصی.
  3.  در نظر گرفتن امنیت به عنوان آخرین قدم.
  4.  توسعه ذخیره سازی رمز عبور به صورت clear text
  5.  ایجاد رمزهای عبور ضعیف.
  6.  ذخیره داده های رمزگذاری نشده در پایگاه داده.
  7.  وابستگی بیش از حد به سمت کلاینت.
  8.  اجازه دادن به انتقال  متغیرها از طریق URL.
  9.  اعتماد به کد های third party.
  10.  SQL Injection های تایید نشده.
  11. Remote file inclusions
  12.  مدیریت ناامن داده ها
  13. رمز گذاری نشدن صحیح داده ها
  14.  عدم استفاده از سیستم رمزنگاری امن
  15.  مرور کردن اکشن های کاربر.
  16.  تنظیمات نادرست فایروال وب اپلیکیشن ها.

این اشتباهات منجر به  آسیب پذیری  OWASP Top 10 برای  وب اپلیکیشن ها می شود که در زیر مشاهده می‌کنید:

  1. Injection
  2. Broken Authentication
  3. Sensitive Data Exposure
  4. XML External Entities (XXE)
  5. Broken Access Control
  6. Security Misconfiguration
  7. Cross-Site Scripting (XSS)
  8. Insecure Deserialization
  9. Using Components with Known Vulnerabilities
  10. Insufficient Logging & Monitoring

مهم است که شروع به آشنایی با این نقص ها و آسیب پذیری ها کنیم، زیرا آنها اساس بسیاری از مسائلی را تشکیل می دهند که برای آشنایی با این آسیب پذیری ها و آموزش تست نفوذ وب به دوره پکیج جامع تست نفوذ وب  سایت مراجعه کنید.

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

20 درصد تخفیف ویژه دوره های جامع آکادمی تکوان24!

فقط 0 روز و 0 ساعت و 0 دقیقه و 0 ثانیه باقی مانده!