Posts

Showing posts with the label web development

Preventing XSS in NextJS with CSP and Nonce

Image
Introduction Content Security Policy (CSP) is an additional security layer that helps detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. By defining the content sources (scripts, styles and images) allowed to execute, CSP prevents the browser from loading malicious resources from unknown sources, thereby protecting user data proactively. Nonce (Number used once) is a random string generated for each request and attached to the script tag. When CSP is configured with this nonce value, the browser only executes script blocks with a nonce attribute matching the value in the CSP header. The greatest advantage of Nonce is allowing the safe execution of inline scripts without opening the browser to all malicious scripts, balancing convenience and high security. When using Nonce, a random value must be generated and attached to the header to distinguish between our website's scripts and hacker scripts, which introduces a major dr...

Handling CORS and Rate Limit with Reverse Proxy in NextJS

Image
Introduction In the previous article, I guided you on using rewrites and proxy in NextJS. Now, we will go into a specific case to set up rate limit directly from the NextJS server to reduce the actual number of requests sent to the core service. Also in this article, I will guide you on how to configure NextJS as a reversed proxy to avoid CORS errors on the browser effectively. CORS (Cross-Origin Resource Sharing) is an HTTP-based security mechanism enforced by browsers to prevent websites from sending requests to a domain different from the current website domain (except when the target domain explicitly permits it via response HTTP headers). When the browser makes an API request to a cross origin target and the server has not configured allowance for that domain, the following error occurs: Solutions Browser-side handling (exercise caution, not recommended): you can use certain extensions or disable this feature on the browser to bypass it, but the risk is extremely high because thi...

Process of applying TDD to a NextJS project

Image
Introduction Test-Driven Development (TDD) is an advanced software development methodology where tests are written before the actual source code is implemented. This process operates in a repetitive cycle: Red (Write a failing test) -> Green (Write the minimum source code to make the test pass) -> Refactor (Optimize the code structure). Advantages : Improve source code quality: Minimize potential bugs right from the initial development phase. Better system design: Thinking about testing first helps you build highly modular, loosely coupled and easy-to-maintain modules. Confident Refactoring: You can comfortably improve and optimize code without fear of breaking existing features, thanks to the automated test system protection. Living documentation: Test cases act as precise specification documentation, helping team members clearly understand how the system operates. Reduce Debugging Time : TDD helps detect errors right at the moment "just finished typing". The c...