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 Zustand is an extremely lightweight, fast, and easy-to-use state management library for React applications. Highlighted advantages of Zustand include: No need for a Provider to wrap the application Extremely concise syntax that reduces boilerplate code Excellent support for TypeScript High performance thanks to a mechanism that only re-renders necessary components. Detail First, install it into your project as follows: yarn add zustand Let's start with a simple Counter app example for you to easily understand how to use it. Create file useCounterStore.ts import {create} from 'zustand' interface CounterState { count : number increment : () => void decrement : () => void reset : () => void } const useCounterStore = create < CounterState >( set => ({ count: 0 , increment : () => set ( state => ({ count: state.count + 1 })) , decrement : () => set ( state => ({ count: state.count - 1 })) , res...