JavaScript Day 37 — Mastering JavaScript Basics: A Comprehensive Guide for Interview Preparation
100 Days of JavaScript Interview Prep: A Beginner’s Journey

Understanding the CSP (Content Security Policy)
Welcome to Day 37–100 Days of JavaScript Interview Prep: A Beginner’s Journey with understanding the CSP
What do you understand by Content Security Policy (CSP)?
Answer —
Imagine we are hosting a big concert.
And we want to make sure to apply below following policies and rules with our invitation.
STEP 1 Invitation Card Rules
- Name Matching on the List :
Each invitation card has the name of the invited person.
Only people whose names match the names on the cards are allowed entry.
2. One-Time Use:
Each invitation card is valid for a single entry. Once used, it cannot be used again.
3. Guest Limit:
Some invitation cards might allow the holder to bring guests. In such cases, the number of allowed guests is clearly stated on the card.
STEP 2 Concert Policies
- Entry Code Generation (Unique Code Generation) :
Each invitation card has a unique entry code generated specifically for that card. This code is like a secret password that grants access to the concert.
2. Code Verification:
When someone presents their invitation card at the concert entrance, the organizers check the entry code against a database to ensure it’s valid and hasn’t been used before.
3. Time Restrictions:
The entry code might also have a time restriction. For example, it’s only valid for entry during a specific time window corresponding to the concert’s duration.
STEP 3 Concert Hall Rules:
- No smoking and no outside food -
Like No smoking indoors, no bringing in outside food, etc.
2. Monitoring and Check-in
We need to keep an eye on things with camera motoring, security guards and other check-in with ID’s etc
3. No entry for kids without Parents
Kids are not allowed without parents and parents are responsible for their all protection.
If someone starts causing trouble, we need to ask them to leave or some fines etc.
So imagine these are few steps we have created for arranging the concert successfully.
Similar way if we consider our website or digital world about CSP
CSP is like those rules for your Concert :)
CSP helps keep the website safe from sneaky attacks and protects visitors from harm.
Content Security Policy (CSP) is an added layer of security (additional layer) or is a security standard for web application that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks.
It works by allowing website administrators to declare the trusted sources from which content can be loaded, thus reducing the risk of unauthorized code execution.
CSP provides several directives that can be used to specify allowed content sources
Please find details as below
default-src:
Sets the default source for all content types.script-src:
Specifies the allowed sources for JavaScript.style-src:
Specifies the allowed sources for stylesheets.img-src:
Specifies the allowed sources for images.font-src:
Specifies the allowed sources for fonts.connect-src:
Specifies the allowed sources for AJAX requests and web sockets.frame-src:
Specifies the allowed sources for frames and iframes.media-src:
Specifies the allowed sources for audio and video content.Conclusion :
By implementing a strong Content Security Policy, web developers can significantly improve the security of their applications and protect their users from various types of attacks.
Tomorrow we will learn more about CSP how to use directive with some code example.
Happy Coding and Stay Tuned :)
Kind is always cool !!!
Share knowledge to gain knowledge !!!!
Be kind and treat people with respect !
If you find my blog helpful, then please subscribe, claps and follow to support :)

