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

Introduction React Fiber is the core reconciliation engine of React supported since version 16, helping to change the rendering mechanism from synchronous to asynchronous. Advantages: Ability to pause and resume work: Allows React to break the rendering process into small units of work (fibers) so as not to block the main thread. Task prioritization: Prioritizes direct user interactions (keystrokes, clicks) over background data processing tasks. UX Improvement: Minimizes lag (jank) when the application has to handle complex UI components or large data lists. Detailed Workflow React Rendering Pipeline Trigger Phase When you call setState() or dispatchAction, React marks the changed nodes as dirty and uses the lane mechanism to mark upwards to the corresponding parent Fiber Nodes. Fiber: Acts as a "unit of work." Each component is a Fiber node containing information about state, props and links to parent/child/sibling nodes. Render Phase - Calculation This is where Reconciliati...