Building a Full-Stack Web Application with React and Laravel (SAST and DAST tests with Eslint, PHPStan and OWASP ZAP)

In this project, I developed a full-stack web application using React for the frontend and Laravel for the backend. The application demonstrates how modern web development technologies can be combined to create a robust and scalable solution. To ensure the security and reliability of the application, I conducted Static Application Security Testing (SAST) and Dynamic Application Security Testing (DAST). These tests helped in identifying vulnerabilities and ensuring that the application is secure.

Project Overview
The application I built is a user management space. It features user authentication, CRUD operations, and a responsive design to ensure a smooth user experience across different devices.

Frontend: React
For the frontend, I used React, a powerful JavaScript library for building user interfaces. React’s component-based architecture allowed me to create reusable UI components and manage the application state efficiently.

Key Features of the React Frontend:
- User Authentication: Secure login and registration forms with validation.

- Dynamic Content: I used Vite to ensure real-time updates and dynamic rendering of content.
- Responsive Design: Mobile-friendly design using CSS Flexbox and Grid.
- Form Handling: User-friendly forms with validation and error handling.

• User dashboard : for user management, the admin has the possibility to edit user infos, delete user.

To ensure code quality and consistency, I integrated ESLint for static code analysis. This helped in identifying potential issues and maintaining a clean codebase.

Eslint integration in my react project:

• Installation in the react project and initialisation:

• Eslint syntax and error check scan:

As you can notice there is a lot of errors related to react syntax probably because i didn’t specified the react version.

• Conclusion of eslint scan:

I had many errors due to not specifying the react version and errors where in majority related to this “error ‘React’ must be in scope when using JSX react/react-in-jsx-scope” so there is no big issue.

Backend: Laravel
On the backend, I chose Laravel, a PHP framework known for its elegant syntax and powerful features.

Key Features of the Laravel Backend:

• RESTful API: Endpoints for managing users, login, and registration.
• Database Management: Efficient data handling with Eloquent ORM
• Security: Middleware for authentication and authorization.
• Validation: Robust input validation to ensure data integrity.

To maintain high code standards, I used PHPStan for static analysis. This tool helped in identifying potential bugs and improving the overall quality of the code.

SAST Analysis with PHPStan on Laravel:

• PHPStan intallation:

I created a PHPStan configuration file (phpstan.neon) and edited it like this:

phpstan scan execution and results:

As previously with eslin i noticed that phpStan as a SAST tool also focused on the syntax in general.

So many times i heard about the differencies between DAST and SAST analysis so i wanted to test it and see how different the results would be from the SAST analysis.

DAST (Dynamic Application Security Testing) analysis:

Although I chose not to use Docker for DAST, I explored alternative tools and methods to test the application in a dynamic environment.

I though of using Burpsuite or OWASP ZAP for the DAST test but i decide to focus on OWASP ZAP for today as it is :

• Open Source and Free
• Active Community Support
• Extensive Feature Set ( automated scanners, spidering, AJAX spider, and a proxy for intercepting and modifying HTTP requests. It supports various authentication mechanisms and can integrate with CI/CD pipelines).
• Customization and Extensibility
• Compliance and Standards( ZAP supports various compliance requirements and standards, e.g., OWASP Top Ten vulnerabilities).
• Integration with Toolchains

Overall, choosing OWASP ZAP for DAST aligns with principles of accessibility, community support, feature richness, and adaptability to different security needs. It’s a versatile tool that continues to evolve with the changing landscape of web application security.

• OWASP ZAP installation:

• owasp zap execution

I decide to focused on the automated scan for today and first scanned my laravel server:

Scan:

results:

At the end of the scan i had the list potential vulnerability, their risk level and some recommendations to mitigate them:

Based on the type of vulnerability identified i can clearly say that though my server functions verywell it is not really protected and some measure shall be implemented. I will not dive into each vulnerability correction for today but it will be done in another post. I also proceed with a scan on my react client side:

Owasp zap DAST scan implementation:

On my client side i found many flaws from High risk level to low risk level

I will not dive into each vulnerability correction for today but it will be done in another post.

Notes:

Through the completion of both Dynamic Application Security Testing (DAST) and Static Application Security Testing (SAST), I’ve gained invaluable insights into the critical role these assessments play in securing our applications. Despite robust token implementations on both client and server sides, the tests uncovered a spectrum of vulnerabilities ranging from high-level risks to more nuanced issues. This experience underscores the importance of integrating comprehensive security testing into our development pipelines. DAST highlighted vulnerabilities that can only be identified in a running application environment, emphasizing the necessity of real-world testing. Meanwhile, SAST provided insights into code-level vulnerabilities, ensuring that even seemingly secure implementations are rigorously scrutinized.

Moving forward, I recognize that beyond automated testing, collaboration with dedicated security teams is essential. Their expertise in risk management and threat mitigation is crucial for effectively addressing vulnerabilities and fortifying our applications against evolving security threats.

Conclusion

In conclusion, integrating DAST and SAST into our development lifecycle isn’t just about meeting compliance or ticking boxes — it’s about proactively safeguarding our users’ data and ensuring the resilience of our systems. By embracing these practices alongside collaborative security efforts, we can confidently navigate the complexities of application security and deliver safer, more resilient software solutions.

You can check out the project on my [GitHub repository](react: https://github.com/catelle/catelle-react-usermgt.git ; laravel: https://github.com/catelle/catelle-laravel-usermgt.git) and connect with me on [linkedIn ](https://www.linkedin.com/in/catelle-ningha-1474a620a/).

Thank you for reading! Feel free to reach out with any questions or feedback.