DEV Community: Basim Ghouri

How We Built a Proactive Error Monitoring System (Before Clients Notice Issues)

Basim Ghouri — Fri, 30 Jan 2026 17:16:23 +0000

In our projects, we designed a centralized error-monitoring and alerting architecture to ensure that any system issue is detected and reported to our team instantly—without waiting for client feedback.

Here’s how we implemented it:

1. Global Error Capture Layer
We implemented a global error-handling mechanism at the backend level (Node.js / Laravel) that automatically catches:

Runtime exceptions
API failures
Unhandled promise rejections
Server crashes

Instead of handling errors route-by-route, we created a single centralized error handler.

2. Structured Error Logging

Every captured error is converted into a structured format containing:

Error message
File name
Line number
Stack trace
Timestamp
Environment (Production / Staging)

This ensures the team knows exactly what failed, where it failed, and why.

3. Automated Email Alert System

We integrated SMTP-based email notifications that trigger instantly when an error occurs.

Each alert includes:

Error summary
Code location
Stack trace

Developers can start debugging immediately.

4. Crash-Level Monitoring

Beyond normal errors, we also monitor:

Uncaught exceptions
Unhandled promise rejections

If the server crashes, an alert is sent before shutdown.

5. Environment-Based Rules

Production: Alerts enabled
Development: Console logging
Testing: Silent mode

This prevents noise and keeps alerts meaningful.

6. Fail-Safe Protection

Email sending is wrapped in try/catch to avoid infinite loops if mail service fails. System stability always comes first.

Result

The team knows about issues instantly
Faster root-cause analysis
Reduced downtime
Clients experience fewer disruptions
Higher system reliability

Instead of being reactive, we built a proactive monitoring culture. When something breaks, our team already knows before the client does.

Key Takeaway
Building software is not only about features. It’s about designing systems that observe themselves and maintain reliability.

Why Knowing SSH Commands in Linux is Beneficial for Web Developers

Basim Ghouri — Fri, 16 Aug 2024 11:20:59 +0000

Web developers should learn SSH commands because they simplify essential tasks like moving files within the same server, efficiently handling large database imports/exports, navigating directories quickly, downloading large files from other servers, changing file permissions, finding and searching files, automating tasks with scripts and cron jobs, monitoring system performance, managing user permissions, restarting services, and more. This not only saves time but also enhances productivity and control over web projects.

By mastering SSH, you can handle complex web development tasks smoothly, giving you an edge over others. It’s a great way to improve your workflow and get more done with less hassle.

Here are the SSH commands that I have used in my workflow as a web developer over the years.

Exploring Next.js Middleware

Basim Ghouri — Tue, 25 Jun 2024 11:58:55 +0000

What is Middleware in Next.js?
Imagine that your web app is a nightclub, and middleware is the bouncer at the door. This bouncer decides who gets in based on their IDs. In Next.js, middleware acts as this gatekeeper for your app’s requests, letting you run code before the request completes. It’s perfect for tasks like authentication, logging, modifying requests, and more—all before the user even hits your page.

Why I Love Middleware
You might be wondering why you should bother with middleware. Let me tell you, it’s been a game-changer for me. Here’s why:

Authentication: I can make sure only logged-in users access certain parts of my app, with very little setup.
A/B Testing: I can serve different versions of a page dynamically to see which one performs better.
Logging and Analytics: Middleware helps me log requests, giving me valuable insights for debugging and optimizing my app.
Localization: Redirecting users based on their location or language preference is super straightforward.

Getting Started with Middleware in Next.js
Let’s get our hands dirty with some code.

Setting Up Middleware
Create a middleware.js file in your root directory. Here’s an example that uses an config object to handle different middleware scenarios:

// middleware.js

import { NextResponse } from 'next/server';

export const config = {
  matcher: '/dashboard/:path*',
};

export function middleware(req) {
  const token = req.cookies.token;

  if (!token) {
    return NextResponse.redirect('/login', req.url);
  }

  return NextResponse.next();
}

In this example, the config object uses the matcher property to specify that this middleware should apply to any route under /dashboard. If there’s no token cookie, the middleware redirects the user to the login page. This way, we can protect our dashboard routes efficiently.

More Cool Stuff You Can Do
Here are a few more ways I’ve found middleware to be incredibly handy:

Logging Requests
Logging is crucial for keeping tabs on what’s happening in your app. Here’s how you can log requests:

export const config = {
  matcher: '/api/:path*',
};

export function middleware(req) {
  console.log(`Request to ${req.nextUrl.pathname} at ${new Date().toISOString()}`);
  return NextResponse.next();
}

Every request to any route under /api logs the pathname and timestamp. This simple addition has helped me a lot in debugging and understanding user behavior.

A/B Testing
A/B testing can be a powerful tool to improve your user experience. Here’s how you can set it up with middleware:

export const config = {
  matcher: '/',
};

export function middleware(req) {
  const url = req.nextUrl.clone();
  const variant = Math.random() < 0.5 ? 'A' : 'B';

  if (url.pathname === '/') {
    url.pathname = `/home-${variant}`;
    return NextResponse.rewrite(url);
  }

  return NextResponse.next();
}

With this setup, users visiting the homepage are randomly redirected to either /home-A or /home-B, letting you gather data on which version works better.

Personal Tips for Using Middleware
From my experience, keeping middleware simple is key. Middleware runs on every request, so you want to ensure it’s efficient and doesn’t slow things down. Here are a few tips:

Keep It Lightweight: Avoid complex logic in your middleware to keep performance high.
Use Caching: When appropriate, cache responses to improve performance.
Test Thoroughly: Middleware affects every request, so thorough testing is crucial to avoid unexpected issues.

My Takeaway
Playing around with middleware in Next.js has been a revelation. It’s given me a cleaner, more efficient way to handle common tasks like authentication and logging. I love how it centralizes control logic, making my codebase cleaner and more maintainable.

I encourage you to try it out in your next project. Middleware can help you handle requests more gracefully and make your web apps more robust. Plus, it’s a lot of fun to see just how much you can do before your users even reach a page!

Happy coding, and let me know in the comments how you’re using middleware in your projects. I’d love to hear your stories and tips! 🚀

What Is Next Js And Why Should You Use It In 2024?

Basim Ghouri — Wed, 05 Jun 2024 23:45:08 +0000

INTRODUCTION
One of the top benefits of learning what is Next.js, is the knowledge of how flexible you can become in building, and adapting to online reality.

As seasoned Next.js developers, we recognize the immense value in mastering this framework. One of its most compelling advantages lies in its unparalleled flexibility, empowering us to craft and seamlessly adapt to the dynamic landscape of the online realm.

Within our realm as providers of Next.js development services, we view this flexibility as a cornerstone in navigating the swiftly evolving digital sphere. It affords us the agility to swiftly iterate and experiment with our concepts, enabling us to promptly respond to market demands and technological advancements. In essence, it allows us to stay ahead of the curve and maintain a competitive edge.

Moreover, the current landscape of consumer behavior has undergone a seismic shift, presenting new challenges and opportunities. With the rise of e-commerce and changing consumer habits, the need for adaptable and innovative solutions has become more pressing than ever before.

We became much more demanding when it comes to page loading speed (in milliseconds!) and the user experience from using websites or web shops.

Our expectations regarding page loading speed, measured in milliseconds, and the overall user experience while navigating websites or online stores have significantly heightened.

It allows you to build both simple and complex web applications much faster, and easier, and thanks to many great frameworks that have grown upon it, you can now build blazingly fast websites to achieve a much better UX and SEO efficiency.

Let’s have a look at one of those frameworks — Next.js, which enjoys growing popularity and quickly became the first choice for many big names and companies.

# WHAT IS NEXT.JS?
Next.js is a JavaScript framework that enables you to build superfast and extremely user-friendly static websites, as well as web applications using React.

In fact, thanks to Automatic Static Optimization, “static” and “dynamic” become one now.

This feature allows Next.js to build hybrid applications that contain both server-side rendered and statically generated pages.

In other words,

Statically generated pages are still reactive: Next.js will hydrate your application client-side to give it full interactivity.

This opens us many advantages like:

Rich User Experience (easier and faster)
Great performance (also easier and faster)
Rapid feature development

Next.js is widely used by the biggest and most popular companies all over the world like Netflix, Uber, Starbucks, or Twitch. It’s also considered as one of the fastest-growing React frameworks, perfect to work with static sites — which was the hottest topic in the web development world lately.

What is Next.js — A 2024 Perspective
In recent years, Next.js has witnessed a huge rise in popularity.

According to the Stack Overflow survey of 2023, it ascended from the 11th to the 6th most popular framework among web developers. This rapid growth underscores its increasing acceptance and effectiveness in the developer community.

Over the years, Next.js has continually evolved, introducing features that address the ever-changing environment of web development. Its updates have consistently focused on imrpoving performance, developer experience, and providing robust SEO capabilities.

Next.js 14 — A Leap Forward

Next.js 14, introduced by Lee Robinson and Tim Neutkens, marked a significant advancement in the framework’s capabilities, building upon the foundations laid by Next.js 13:

Turbopack: Replaces Webpack for faster builds, offering significantly quicker server start-up and refresh rates. These changes lead to higher developer productivity and faster iteration cycles, crucial for large-scale applications.
Server Actions (Stable): Streamlines server-side logic, allowing functions to run securely on the server. This simplifies data mutation workflows and strenghten application security, particularly vital for handling sensitive data and complex state management scenarios.
Partial Prerendering (Preview): Merges the benefits of SSR, SSG, and ISR, enabling rapid initial static loading with dynamic content streaming. This is key for applications requiring both fast loading times and dynamic content rendering.
Metadata Improvements: Automates the inclusion of essential metadata in the initial page load, ensuring a seamless user experience across devices and themes. It’s especially important for responsive design and accessibility.

Next.js 14 brought some game-changing features. Turbopack, for instance, has significantly sped up server startup and code refresh times. Then there’s Server Actions, making mutations more efficient and integrated. And let’s not forget Partial Prerendering, which is still in preview but looks promising for dynamic content handling.

The features introduced in Next.js 14 represent significant advancements in the capabilities of the framework, catering to various aspects of web development and addressing key challenges faced by developers. Let’s delve into each of these features and explore their benefits in more detail:

React Server Components (RSC):

Performance Optimization: By rendering components server-side and accessing the backend directly, RSC reduces the client-side bundle size and enhances performance.

Improved Initial Load Times: With reduced initial load times, RSC contributes to a smoother user experience, especially for applications with extensive client-side rendering requirements.
SEO Benefits: Server-side rendering improves SEO capabilities by providing search engine crawlers with pre-rendered HTML content, enhancing discoverability and search ranking.

Middleware:

Granular Control: Middleware empowers developers with fine-grained control over the request-response lifecycle, facilitating advanced server-side logic such as A/B testing and request manipulation.

Customized User Experience: With the ability to manipulate requests and responses at various stages, developers can tailor the user experience based on specific criteria, enhancing personalization and engagement.
Efficient Implementation of Complex Logic: Middleware streamlines the implementation of complex server-side logic, enabling developers to manage application behavior more efficiently and effectively.

Edge Functions:

Minimized Latency: By executing server-side code at the network’s edge, Edge Functions minimize latency and offer a serverless experience, ensuring optimal performance for users across diverse geographical locations.
High Performance: Applications requiring high performance and low response times benefit significantly from Edge Functions, delivering faster and more responsive user experiences.
Global Scalability: Edge Functions enable global scalability by distributing server-side logic closer to end-users, reducing the impact of geographical distance on application performance.

App Router:

Advanced Routing Features: The revamped routing system in Next.js, including support for nested routes and layouts, offers developers more flexibility and power in structuring applications.
Scalability and Maintainability: For large-scale and complex web projects, App Router provides a structured approach to managing routing logic, enhancing scalability and maintainability.
Improved Developer Productivity: With a more intuitive and feature-rich routing system, developers can streamline development workflows and accelerate the implementation of routing-related features.

Overall, the features introduced in Next.js 14 represent a significant leap forward in empowering developers to build high-performance, scalable, and feature-rich web applications. Whether it’s optimizing performance, customizing user experiences, reducing latency, or enhancing routing capabilities, Next.js 14 offers a comprehensive toolkit for tackling the challenges of modern web development effectively.

NEXT.JS AND JAMSTACK

Next.js is now one of the most popular React frameworks for building superfast, and super SEO-friendly Jamstack websites.It can be perfectly combined with headless CMSes, or eCommerce platforms to drive extraordinary performance and SEO results.

WHAT CAN YOU BUILD WITH NEXT.JS?

With Next.js you can build a number of digital products and interfaces such as:

Web Platform
Jamstack websites
MVP (Minimum Viable Product)
Static websites
Single web pages
SaaS products
eCommerce and retail websites
Dashboards
Complex and demanding web applications
Interactive user interfaces

And we love to use it in various projects since it gives us so many possibilities. Check out how it influenced the e-learning platform we were recently launching for our customer — Learn Squared:

Our Choice: Why We Chose Next.js for Our Website

At the heart of our decision to use Next.js for our website lies a combination of strategic factors and practical benefits.

SEO Optimization stands out as a primary reason — we work on SEO improvements daily, as organic is our main source of traffic. Next.js’s powerful SEO capabilities significantly boost organic traffic, a key metric for online visibility and success.

Equally crucial is Page Speed for us. This framework’s efficiency in loading times elevates the user experience and also, again, fortifies our SEO efforts.

In the realm of** Content Management**, using the Jamstack architecture with Next.js has afforded us exceptional flexibility, allowing our marketing team to harness tools like Storybook for dynamic content management.

This aligns perfectly with our approach to content strategy, ensuring that we can adapt and respond swiftly to market trends and user feedback.

Lastly, the Developer Affinity for Next.js within our team is noteworthy. Our developers prize its efficiency and scalability, making it a pleasure to work with, while the robust support community around Next.js provides an added layer of assurance and continuous learning.

By adopting Next.js for our own website, we provided final proof of its effectiveness and adaptability in the ever-evolving digital world. (Yes, we love it very much!)

NEXT.JS AND USER EXPERIENCE

User experience plays a key role in the success (or failure) of digital businesses.

For example, if you have an online shop and you don’t take care of UX properly, it will result in:

Losing customers
Abandoned carts
High bounce rate

The design is also important — if you are using themes or templates, the chances are someone out there has a similar-looking layout. It also means that you can’t build a unique customer experience and change it over time. Even if this means changing one simple thing like adding a button to the product page or deleting one.

Luckily — thanks to Next.js — you can build a fully customized user experience. Let’s see what it really means.

UX Freedom: Next.js allows developers to bypass the constraints of plugins, templates, or other limitations typically imposed by CMS platforms. Technically, this is facilitated by Next.js’s flexible file-system routing and its support for various CSS-in-JS libraries, enabling a high degree of customization in the frontend design.
Adaptability and Responsiveness: The framework’s built-in features such as automatic image optimization and responsive loading contribute significantly to creating web applications that are adaptable to any screen size or resolution. This adaptability is bolstered by the framework’s seamless integration with modern CSS frameworks,boosting the responsive design capabilities.
Short Page Load Time: Next.js’s capability for static site generation (SSG) and incremental static regeneration (ISR) plays a crucial role in achieving faster page load times. They enable serving pre-rendered pages to users, significantly reducing the time to first byte (TTFB) and repairing the overall site speed.
Data Security: In the context of static websites built with Next.js, the absence of a direct database connection reinforce security. This architectural choice minimizes the exposure of sensitive data and dependencies, making these sites inherently more secure against common web vulnerabilities.

All of these things mentioned above make the user experience as great as it can possibly be.

But the benefits of using Next.js don’t end there.

NEXT.JS AND SEO

Another big reason to choose Next.js is its SEO efficiency, and here’s why:

Server-Side Rendering (SSR): One of the most influential benefits of Next.js is its use of SSR. It ensures that the full content of your page is rendered on the server before it reaches the user’s browser. For search engines, this means they can crawl and index your site content more effectively, boosting your visibility in search results.
Static Site Generation (SSG): Next.js excels in generating static sites, which are faster and more reliable. Static sites load quicker, offering a better user experience, a factor that search engines, particularly Google, prioritize highly. This directly contributes to better SEO rankings.
Speed and Performance: Next.js websites are known for their impressive speed, a direct result of static generation and optimized code. Fast-loading sites reduce bounce rates, keep users engaged longer, and are favoured by search engines, all contributing to higher SEO rankings.
Organic Traffic and High-Intent Keywords: By optimizing for speed and user experience, Next.js helps in growing organic traffic faster. Its ability to rank high-intent keywords higher than competitors makes it a preferred choice for businesses aiming to be more visible to potential customers.
Competitive Edge: The SEO efficiency of Next.js gives websites a significant advantage over competitors. Its capabilities in speed, performance, and content visibility help sites outperform others in search engine results.

In both cases, it will help you a lot with:

**- Growing organic traffic faster

Ranking your high-intent keywords higher
Outperforming competitors easier
Be more visible to potential customers**

Next.js websites are super-fast, easy to scan, and provide a great user experience and that’s why Google will favour them above others and rank them higher.

PROS AND CONS OF NEXT.JS
As with any other framework, some great options come with a price. Let’s have a look at the most popular pros and cons of using Next.js.

Main Advantages of Next.js for CTOs

Rich Ecosystem: Next.js benefits from the widespread adoption of JavaScript and strong backing from industry giants like Vercel and Meta. This robust ecosystem offers a rich talent pool and ease of learning, making Next.js a strategic, future-proof choice for tech leaders.

Future-Proof Technology: With regular updates and support from a vibrant community and industry leaders, Next.js represents a future-proof solution in web development. Additionally, its alignment with the latest web standards makes it a strategic asset for long-term business goals and technology roadmaps.

Easy Scalability: Next.js supports scalability through features like automatic code splitting, flexible rendering options, and optimized image handling. These features ensure efficient resource utilization and performance under high traffic, crucial for rapidly growing businesses.

High Security: Offering robust tools for building secure web applications, Next.js addresses critical areas like authentication and data validation. This focus on security is vital for maintaining user trust and data integrity in the face of growing number of cyber threats.

Performance Optimization: Key features like lazy loading, image optimization, code splitting, and route prefetching in Next.js positively influence site performance. And these are essential for high user engagement and efficient resource utilization, impacting the success and growth of web applications.

SEO Optimization: As we mentioned a few times above, Next.js boosts SEO through server-side rendering, static generation, and incremental static regeneration. It ensures that content is fully accessible to search engine crawlers, supporting site visibility and user traffic.

Benefits of Next.js for online businesses

How Next.js can positively impact your business results and help you push your ideas further?

Faster time to market: many ready-to-use components and compatibility that come with it make building MVP much faster. Thanks to it, you can get feedback from real users quickly and make proper changes without wasting time and budget.

Better User Experience: you have total freedom to create a front-end that fully aligns with your business goals and design vision. Thanks to it, the user experience is great and unique.

Increased organic traffic: Google loves static sites as they are fast, light, and easy to scan. This translates into higher positions of these websites in search results.

Fully omnichannel: Next.js websites and web apps work on any device, so they are accessible to everyone.

Support on demand: since Next.js is a React-based framework, it won’t be difficult to find another frontend developer without a need to build everything from scratch once again.

Increased conversion rate: fast loading speed, better user experience and high accessibility convert into a higher conversion. If the users are happy with the customer experience they got, they are more likely to buy and come back later for more.

Community support: as Next.js is becoming a number one framework for many big brands, it’s becoming more famous, and naturally, so the number of its contributors. That means, even if you face any issue, there will be probably a solution for that already.

Pros of Next.js for developers

Regardless of whether you are looking for benefits from a business perspective or a technical one, you will find some reasons to seriously consider choosing Next.js.

If you want to build a complex and demanding application, React development nature of Next.js allows for saving a lot of time. Developers especially favour features like:

Zero Config — Next allows you to focus on the business logic of your application instead of the application logic. And to help you, it provides automatic compilation and bundling. In other words, Next is optimized for production right from the start.
Incremental Static Regeneration — it allows you to update the pages by re-rendering them in the background as traffic comes in. So in other words, static content can become dynamic.
A hybrid of server-side rendering SSR and static site generation SSG — prerender pages at build time or request time in a single project.
TypeScript support — automatic TypeScript configuration and compilation.
Fast Refresh — fast, live-editing experience — edits made on React components are live within seconds. It works analogically to Hot Module Replacement (HMR).
CSS parsers — the possibility to import CSS files from a JavaScript file. New parses improved the handling of CSS.
Built-in Image Component and Automatic Image Optimization — this feature automatically optimizes images.
Automatic code splitting — automatically reduces the size of the page by splitting the code and serving components only when needed. Modules can be automatically imported too, thanks to the dynamic import option.
Data fetching — this option allows rendering the content in different ways, accordingly to the app’s use case. It can be done by pre-rendering with server-side rendering SSR or static site generation and by updating or creating content with ISR.

Release of Next.js 14: even more promising future

The list of Next.js benefits is growing with every release. In October 2023, Next.js 14 was introduced, together with a bunch of new features. The most important among them are:

Improved Image Component: Next.js 14 introduces enhancements to the Image component, making it even more efficient and versatile for handling images in web applications. With optimizations for performance and accessibility, developers can seamlessly integrate high-quality images while maintaining a fast and responsive user experience.
Incremental Static Regeneration (ISR) Enhancements: Building upon the ISR feature introduced in previous versions, Next.js 14 further refines and expands its capabilities. With improved support for dynamic data fetching and caching strategies, developers can leverage ISR to generate and update static pages with minimal effort, ensuring up-to-date content delivery while maximizing performance.
Enhanced TypeScript Support: Next.js continues to prioritize TypeScript support, with version 14 delivering even more robust typings and tooling for TypeScript users. This includes better integration with popular TypeScript libraries and improved error handling, enabling developers to write safer and more maintainable code with confidence.
Streamlined API Routes: Next.js 14 introduces optimizations to API routes, simplifying the process of building backend functionality within Next.js applications. With enhanced routing capabilities and improved middleware support, developers can create powerful APIs more efficiently, facilitating seamless communication between client-side and server-side logic.
Advanced Internationalization (i18n) Support: Next.js 14 expands its i18n capabilities with new features and enhancements tailored for building multilingual applications. With built-in support for locale-specific routing, content translation, and date formatting, developers can easily create immersive user experiences for global audiences while maintaining code simplicity and clarity.
Optimized Build Performance: Building upon previous optimizations, Next.js 14 introduces further improvements to build performance, reducing build times and enhancing developer productivity. Through enhancements to the build pipeline and caching mechanisms, developers can iterate more quickly and deploy changes with confidence, ensuring a smooth development experience from start to finish.
Enhanced Developer Experience: Next.js 14 focuses on enhancing the overall developer experience with improvements to tooling, documentation, and community resources. With updated documentation, interactive examples, and comprehensive guides, developers can onboard quickly and leverage Next.js effectively for their projects, regardless of experience level.
Expanded Ecosystem Integrations: Next.js 14 strengthens its integration with popular frameworks, libraries, and services within the JavaScript ecosystem. From seamless integration with React Suspense to enhanced compatibility with GraphQL APIs and headless CMS platforms, developers have access to a rich ecosystem of tools and resources to streamline development workflows and build cutting-edge web applications.
Improved Accessibility: Next.js 14 prioritizes accessibility by providing developers with tools and best practices to ensure that their applications are inclusive and usable by all users. With enhanced accessibility auditing tools, automatic aria-label generation, and built-in support for keyboard navigation, developers can create accessible web experiences with ease, meeting the highest standards of accessibility compliance.
Future-ready Architecture: Next.js 14 lays the foundation for future innovations in web development with a forward-thinking architecture and design principles. By embracing emerging technologies, standards, and best practices, Next.js empowers developers to build modern, scalable, and resilient web applications that are ready for the challenges of tomorrow.

Next.js 14 represents a significant milestone in the evolution of the framework, offering developers a comprehensive toolkit for building modern web applications with speed, efficiency, and confidence. With its rich feature set, robust performance optimizations, and commitment to developer experience, Next.js continues to solidify its position as a leading choice for JavaScript developers worldwide.

To learn more about the new Next.js, visit the Next.js official website.

Cons of using Next.js

The number of Next benefits is huge and clearly outweighs its cons. However, let’s write them down to be as objective as it’s possible.

Development and management — the flexibility, given by Next, has its cost — continuous management. To make all desired changes properly, you will need a dedicated person with proper knowledge. The good news is that this person doesn’t have to be a developer.
Ongoing cost — since Next.js does not provide many built-in front pages, you have to create your own front-end, which will require changes from time to time. It means that you will have to pay a frontend developer to get the job done.
Lack of built-in state manager — so if you need a state manager in your app, you have to add Redux, MobX or something else.
Low on plug-ins — you cannot use much of easy-to-adapt plugins.

EXAMPLES OF NEXT.JS WEBSITES
Here are just three of the great examples of websites build in Next.js.

You can also check out their official showcase for even more inspiration.

https://ferrari.com

https://m.twitch.tv

https://nike.com/help

SUMMARY

It doesn’t matter if you are planning to build a huge and demanding app to serve millions of users, nor if you are a growing web shop on Shopify. In both cases, you can use the advantages of modern web technology to make your business more efficient online.

Uplift your page speed, SEO, and UX, and remember that technologies such as Next.js are making the web a better, cleaner, and more user-centric place. And that will always be favourable, not only to Google but, most importantly, to users.

Moment.js Is Now Legacy Project | Alternatives?

Basim Ghouri — Wed, 22 Nov 2023 01:14:17 +0000

If your project deals with complex date and time then you probably have been use to of moment.js. Be aware, Moment.js has become a legacy project. You can check the project status here,

We now generally consider Moment to be a legacy project in maintenance mode.

Furthermore,

 It is not dead, but it is indeed done.

So, what's next?

Go for these:

dayjs

Fast 2kB alternative to Moment.js with the same modern API. I myself have used this for more than a year and found it really cool, easy and super helpful.

Get started here:
https://day.js.org/docs/en/installation/installation

date-fns

date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js.

Get started here:
https://date-fns.org/docs/Getting-Started

luxon

A powerful, modern, and friendly wrapper for JavaScript dates and times.

Get started here:
https://moment.github.io/luxon/#/?id=luxon

Happy coding! 🚀👨‍💻🌐

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/basimghouri
Github: https://github.com/ghourigeeks

Command Injection Affecting Apache Directory

Basim Ghouri — Wed, 22 Nov 2023 00:46:47 +0000

Apache Directory Studio is a Desktop application which basically is used as an LDAP tooling platform for the LDAP server which was intentionally designed for Apache DS. The basic purpose of the application is to handle LDAP databases of the Apache HTTPD server

As i have openly admitted many times that i am guy who research is based totally on logics, this once again was a command injection vulnerability whose misuse was based on logical thought process.

Main modules of Apache Directory Studio

Basically Apache LDAP studio and Apache Directory studio have several components which include

LDAP Editor
LDAP browser
Schema Editor

Workflow of Apache Directory Studio

The functions of the modules can be interpreted by their names. Since the main modules of the application is LDAP Editor using which one can actively add LDAP queries to the ApacheDS integration, it was obvious to me that the inputs i give would be passed through the Editor and reflected in the Browser. Upon researching more, i came to know that symbols such =,+,-,, are not filtered in the LDAP Editor queries and once can add attributes like =1+1 etc, which can be observed in LDAP browser module.

Researchers who normally test Desktop application are aware of the fact that the malicious input being reflected in a Desktop application has no value unless an active exploit is possible which is contrary to the case in Web applications. So i directed my search to the export features of the LDAP module and came across a CSV export wizard whose function i learned from the link below

https://directory.apache.org/studio/users-guide/ldap_browser/tools_csvexport_wizard.html

Testing Methodology

In my methodology of Business Logic testing. which i am sure would be disagreed by several researchers is that discovering the logical flaw in mere black and white manner is not enough. There should to be two aspects of the flaw that should be worked on which are:

Coming up with a concrete exploit
Possible ways of remote misuse

Payload Generation

The first part was not that difficult as there are several sources on the web that can be used to craft payloads which can be used in excel CSV exploits. So i came up with the exploit payload that could be used to execute a calculator using the CSV which would be

-10+33 cmd| /C calc!A0

Misuse Interpretation

The second part however took sometime, to convert this into a remotely usable exploit it was mandatory to know what users are granted what permissions in the LDAP module which i studied from the link below

http://fideloper.com/user-group-permissions-chmod-apache

I came to know that users with least of the privileges are able to insert comments in the LDAP queries.

Exploit Flow

So here is the exploit flow i devised in the end.

Admin creates an LDAP query using LDAP editor in the Directory studio module
Admin allows malicious user to edit comments
User enters remote execution payload in the comments or the query itself
Admin exports the excel spreadsheet
Admins system gets compromised

I sent this complete report along with the CVE details to Apache team and they timely acted on the issue. However the Internet Bug bounty team considered this an issue but an out of scope as the issue is partially related to Apache Directory Studio not Apache HTTPD server.

The Bugtraq CVE link is where you would find the official CVE writeup and the patch details about the flaw. Apache assigned the CVE on my behalf that is CVE: 2015–5349
http://seclists.org/bugtraq/2016/Jan/5

Credits to Researchers

I believe in giving proper credits to the ones from whom i got bits of knowledge about this flaw.

I would like to thank Appsec for coming up with the initial exploits for this issue targeted for web applications which helped out alot in the research. https://hackerone.com/appsec3
I would also like to thank James Kettle, the author of contextis.com whose article helped me out in devising the proper payloads http://www.contextis.com/resources/blog/comma-separated-vulnerabilities/

And in the end of course all of you lovely people for taking time to read this post. I will soon be doing another posts of my learning break knowledge applied in Cloud testing.

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/basimghouri
Github: https://github.com/ghourigeeks

Security in Laravel: How to Protect Your App Part 4

Basim Ghouri — Sat, 28 May 2022 21:38:49 +0000

Exposed Files

By default, Laravel only exposes the public directory. This is intended to avoid security breaches. Considering that any file that will be exposed can be accessed by anyone, you should avoid adding their sensitive data.

If you want to expose files to download, the best way to do this is by keeping the files on the storage directory and just adding a symbolic link on a public directory. Laravel provides a command to make it easier:

php artisan storage:link

Now, any file that your app stores in the storage directory will be available. Avoid adding manual permissions to any other directory as this could lead to a potential breach.

Security in Laravel: How to Protect Your App Part 3

Basim Ghouri — Fri, 27 May 2022 23:09:48 +0000

Request Origin

In your application, you can get requests from multiple sites. It could be a webhook, a mobile application, requests from a Javascript project, etc.

In these cases, we should take a defensive approach. A lot of antiviruses are great examples that a non-trust list simply does not work as we cannot keep updating different origins and sites all the time. In this case, a trust list can be the best approach to only validate some origins.

In short, a trust list could work if we know the origins that we are going to allow. But what if we do not?

Maybe an unknown origin could try to send unauthenticated requests. In this case, Laravel once again provides a great tool out of the box. We can use the throttles middleware to protect a route or group of routes from malicious requests. This is one of Laravel's security best practices to consider.

Route::get('dashboard', DashboardController::class)    ->middleware('throttle:3,10');

The param:3,10 represents that it allows 3 requests during 10 minutes. At the fourth request, it would throw an error 429 in the browser. If it is a request that has a content-type: application/json and accept: application-json, it would return a response with 429 status and a message with the exception.

You can go even further and add a RateLimiter on the app/Providers/RouteServiceProvider.php:

protected function configureRateLimiting() 
{  
    RateLimiter::for('global', function (Request $request) {
        return Limit::perMinute(1000);     
    }); 
}

Then in your route file, you can define a route like this:

Route::get('dashboard', DashboardController::class)->middleware('throttle:global');

If you want to dive deeper into the rate limiter, you can visit this resource. And if you want to get something more robust in terms of a trusts list, here is a great package for adding a white list implementation.

Do Not Trust Sites Without an SSL Certificate

A site that does not have an SSL certificate should not be allowed. No data should be sent without proper encrypted channels as this could lead to a potential man-in-the-middle attack where your data can be exposed.

Lastly, do not share session ids or cookies with insecure connections that do not use the HTTPS protocol. Doing so can also expose sensitive data.

Security in Laravel: How to Protect Your App Part 2

Basim Ghouri — Thu, 26 May 2022 21:32:40 +0000

XSS Attack

This attack could be divided into two sections. The first one restricts special tags on the server and does not return special tags in the views.

Restrict Special Tags in the Server

You could use different approaches. PHP natively has some methods like strip_tags that only protect against HTML and PHP tags. You can even use a regex or use the PHP native method htmlentities() or filter_var both, although it does not protect completely against all the possible tags. In this case, my best recommendation is to use a specific package to solve this, like

HTML Purifier.

Does Not Return Special Tags in the Views
If you are working with the Blade template engine, you should take care about how you are printing your data in your template:

<p>{{ $user->name }}</p>

The double mustaches syntax would protect you against XSS attacks by automatically escaping the tags for you.

<p>{!! $user->name !!}</p>

On the other hand, this syntax is dangerous. If you do not trust the data that could come, do not use it because the bang-bang syntax could interpret PHP.

Using Another PHP Template Engine

Laravel also provides an escape method that we use on any other template engine like Twig:

{{ e($user->name) }}

Using a Javascript Framework

Any modern Javascript framework automatically protects us to inject a script. VueJS, for example, has a v-html directive that already protects us against this type of attack.

Security in Laravel: How to Protect Your App Part 1

Basim Ghouri — Wed, 25 May 2022 20:03:29 +0000

SQL Injections

In plain PHP, we need to bind all the parameters on SQL queries. But in Laravel, we have the query builder and Eloquent ORM that provides automatic protection against SQL injections by adding param binding by default. Even with this, you should watch out for malicious requests, like for example:

User::query()->create($request->all());

This code could lead to a mass assignment. In this case, a user can send a payload like this:

{
    "name": "Basim Ghouri",
    "email": "basim@gmail.com",
    "role_id": "admin" 
}

Another code that could lead to the same issue could be:

$user->fill($request->all());
$user->save();

In this example, we are hydrating an eloquent model with all the data from a request and then saving it.

A malicious user can try with different payloads. Or, they can add extra inputs with different names and try to find a weak implementation like this.

Hopefully, with this example, we can see that we need to take care of mass assignments. We cannot trust any user request, because any user can open the browser inspector and add an input in a monolith or modify the payload from an API.

Laravel provides different ways to handle this:

Set Fillable Property

We can prevent mass assignment by adding explicitly the fields that a model contains by using protected properties, "fillable" or "guarded":

protected $fillable = ['name', 'email', 'password', 'role_id'];

In this case, we are adding explicitly the columns that a model contains. You can use the guarded property as an empty array. Personally, I do not like this approach as many projects have more than one developer and there is no guaranty that other developers would validate the data.

The forceFill() method can skip this protection, so take care when you are using this method.

Validate Request Data

You should validate any type of resource no matter where it came from. The best policy is to not trust the user. Laravel provides FormRequest so we only need to create one with artisan:

php artisan make:request UserRequest

You can define the rules to validate your requests:

public function authorize() 
{
    return $this->user()->check(); 
} 

public function rules() 
{     
    return [
        'name' => ['required', 'string', 'min:5', 'max:255'],
        'email' => ['required', 'email', 'unique:users'],
        'password' =>   ['required', Password::default()]
    ]; 
}

The authorize method must return a boolean. It is a convenient way to return an authorization validation before starting to validate the requested content. This is something to take in mind and it would apply in any route that has the middleware auth for web or sanctum/API if you are using token-based authentication.

The rules method returns an array with the rules that are validating your request. You can use a lot of rules out of the box or create your own custom rules. If you are interested to dive in deeper into this topic, you can find all the rules in the doc: https://laravel.com/docs/8.x/validation#available-validation-rules.