How To Dev

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...

Introduction GraphQL is a powerful query language for APIs which optimizes performance by allowing the client side to accurately define the required data structure, completely overcoming the over-fetching and under-fetching disadvantages of traditional REST APIs. In this article we will set up the connection environment as follows: Client connects to NextJS server which acts as a middleware to forward the GraphQL payload to NestJS. You will see that most of the implementation on NestJS will be quite simple and most of the content is auto-generated code via prisma-nestjs-graphql. It is suitable for projects that have complex processing requirements concentrated on the frontend and applying GraphQL will bring high flexibility in querying data so that the team can focus on building features for the frontend effectively. Prerequisites Please take a look at this article where I have specific instructions on setting up GraphQL for NextJS, here on the FE side we will use @tanstack/react-query...