avatarKirti K

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

3271

Abstract

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.</p><p id="2e79">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.</p><h1 id="55cf">CSP provides several directives that can be used to specify allowed content sources</h1><p id="2486">Please find details as below</p><p id="8fdb"><b>default-src:</b></p><div id="e338"><pre>Sets the default source for <span class="hljs-attribute">all</span> <span class="hljs-attribute">content</span> types.</pre></div><p id="4388"><b>script-src:</b></p><div id="bf74"><pre>Specifies the allowed sources <span class="hljs-keyword">for</span> <span class="hljs-title class_">JavaScript</span>.</pre></div><p id="792c"><b>style-src:</b></p><div id="5896"><pre>Specifies the allowed sources <span class="hljs-keyword">for</span> <span class="hljs-title class_">stylesheets</span>.</pre></div><p id="7480"><b>img-src:</b></p><div id="73f0"><pre>Specifies the allowed sources <span class="hljs-keyword">for</span> <span class="hljs-title class_">images</span>.</pre></div><p id="fb84"><b>font-src:</b></p><div id="74a2"><pre>Specifies the allowed sources <span class="hljs-keyword">for</span> <span class="hljs-title class_">fonts</span>.</pre></div><p id="7749"><b>connect-src:</b></p><div id="a9e3"><pre>Specifies the allowed sources <span class="hljs-keyword">for</span> <span class="hljs-title class_">AJAX</span> requests and web sockets.</pre></div><p id="f767"><b>frame-src:</b></p><div id="bd81"><pre>Specifies the allowed sources <span class="hljs-keyword">for</span> <span class="hljs-title class_">frames</span> and iframes.</pre></div><p id="0559"><b>media-src:</b></p><div id="96d0"><pre>Specifies the allowed sources for <span class="hljs-selector-tag">audio</span> and <span class="hljs-selector-tag">video</span> <span class="hljs-attribute">content</span>.</pre></div><h1 id="410e">Conclusion :</h1><p id="8ab4" type="7">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.</p><p id="b9fa">Tomorrow we will learn more about CSP how to use directive with some code example.</p><h1 id="dc2c">Happy Coding and Stay Tuned :)</h1><p id="f004" type="7">Kind is always cool !!!</p><p id="1a54" type="7">Share knowledge to gain knowledge !!!!</p><p id="ee49" type="7">Be kind and treat people with respect !</p><h1 id="80c5">If you find my blog helpful, then please subscribe, claps and follow to support :)</h1><figure id="4be0"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*NGrlClFjFv_qmuuGgrVhLw.jpeg"><figcaption></figcaption></figure><div id="7de2" class="link-block"> <a href="https://kirtikau.medium.com/javascript-day-34-mastering-javascript-basics-a-comprehensive-guide-for-interview-preparation-96181febaa0a"> <div> <div> <h2>JavaScript Day 34 — Mastering JavaScript Basics: A Comprehensive Guide for Interview Preparation</h2> <div><h3>100 Day

Options

s of JavaScript Interview Prep: A Beginner’s Journey</h3></div> <div><p>kirtikau.medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*8aLCtBeTmiwar2o11vM3Eg.png)"></div> </div> </div> </a> </div><div id="efbb" class="link-block"> <a href="https://kirtikau.medium.com/list/6d895127c989"> <div> <div> <h2>100 Days of JavaScript Interview Prep: A Beginner’s Journey</h2> <div><h3>Mastering JavaScript Basics: A Comprehensive Guide for Interview Preparation (00 Days of JavaScript Interview Prep: A…</h3></div> <div><p>kirtikau.medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*d8b12a16b592235c56284cb5a2933b01f08a9ecf.jpeg)"></div> </div> </div> </a> </div><div id="376d" class="link-block"> <a href="https://rohitsportsphysiorehabclinic.co.in/?source=post_page-----e3f648a7ad7a--------------------------------"> <div> <div> <h2>Home - Krishna Sports Injuries Physiotherapy & Rehab Clinic</h2> <div><h3>Krishna Sports Injuries Physiotherapy & Rehab Clinic There are plenty ways how to make an appointment. You can call us…</h3></div> <div><p>rohitsportsphysiorehabclinic.co.in</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*KPhCTuKHwujndpKc)"></div> </div> </div> </a> </div><div id="db6a" class="link-block"> <a href="https://kirtikau.medium.com/list/953da44e71ce"> <div> <div> <h2>Explore OpenAI, ChatGPT , Next.js, the React framework</h2> <div><h3>Explore OpenAI, ChatGPT , Next.js, the React framework that empowers developers with server-side rendering, static site…</h3></div> <div><p>kirtikau.medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*2ad63dbb6593f826f599de4c13654700cb4eb24e.jpeg)"></div> </div> </div> </a> </div><div id="c7c3" class="link-block"> <a href="https://kirtikau.medium.com/javascript-day-36-mastering-javascript-basics-a-comprehensive-guide-for-interview-preparation-f576100b0ae2"> <div> <div> <h2>JavaScript Day 36 — Mastering JavaScript Basics: A Comprehensive Guide for Interview Preparation</h2> <div><h3>100 Days of JavaScript Interview Prep: A Beginner’s Journey</h3></div> <div><p>kirtikau.medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*RxrBad4p0qBR_79x7ZI83Q.png)"></div> </div> </div> </a> </div></article></body>

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

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

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

  1. 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 :)

Coding Interviews
Javascript Tips
Front End Development
Front End Web Development
Programming
Recommended from ReadMedium