How To Dev

Introduction imgproxy is an efficient image processing and optimization service, featuring fast processing speeds, high security and low memory footprints because it is written in Go. The prominent advantages of imgproxy include the ability to resize, crop, compress and flexibly convert image formats (such as to WebP, AVIF) via URL. Notably, this service supports secure URL signing using HMAC encryption, which prevents DDoS attacks or unauthorized modifications of image size parameters from the client side. Although the NextJS Image component already supports automatic image resizing, it presents several limitations if you choose it for large-scale deployment Resized images stored in the cache of the .next folder only exist within a single NextJS server instance, making it difficult to share the cache when scaling up to multiple instances After building the project, the cache data is lost, or if you find a way to persist these resized images, a large dataset will still consume too much...

Introduction Cross-Site Scripting (XSS) is a security vulnerability that allows attackers to inject malicious scripts, typically JavaScript, into web pages viewed by other users. When a user's browser executes this code, attackers can steal cookies, session tokens and alter the website interface. To prevent XSS, the following primary methods are used: Validation: Accepting only desired data formats. This simple approach only addresses surface-level issues, so we focus on the methods below for better effectiveness. Sanitization: Removing or disabling dangerous HTML tags and attributes such as <script> , onerror and onclick from user input before storage or display. Using Framework Automations: React and NextJS automatically escape data in text strings by default. When rendering HTML directly via dangerouslySetInnerHTML , using a library like DOMPurify is mandatory to ensure safety. Content Security Policy (CSP): Configuring browser policies to restrict script execution s...