JavaScript Day 38 — 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.
How to Add Content Security Policy (CSP) and provide some example?
Answer
Here’s an example of how we can implement CSP in HTML
1) default-src:
This directive sets the default policy for all resource types (scripts, stylesheets, images, etc.)
if a more specific directive is not defined for that resource type.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSP Default-Src Example</title>
<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
</head>
</html>It allows resources to be loaded only from the same origin ('self').
2) script-src:
This directive specifies which sources are allowed to load JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSP Script-Src Example</title>
<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://cdnjs.cloudflare.com">
</head>
</html>
In this example, scripts are allowed to be loaded from the same origin ('self') and from https://cdnjs.cloudflare.com.
So, <script src="script.js"></script> (if hosted on the same origin) and <script src="https://cdnjs.cloudflare.com/xxx.js"></script> will be allowed.
3) style-src:
This directive specifies which sources are allowed to load CSS stylesheets.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSP Style-Src Example</title>
<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://fonts.googleapis.com">
</head>
</html>
Here, stylesheets are allowed to be loaded from the same origin ('self') and from https://fonts.googleapis.com.
For example, <link rel="stylesheet" href="styles.css"> (if hosted on the same origin) and <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> will be allowed.
4) font-src:
This directive specifies which sources are allowed to load fonts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSP Font-Src Example</title>
<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy" content="font-src 'self' https://fonts.gstatic.com">
</head>
</html>Fonts are allowed to be loaded from the same origin ('self') and from https://fonts.gstatic.com.
For instance, <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> will be allowed because it loads fonts from https://fonts.gstatic.com
5) img-src:
This directive specifies which sources are allowed to load images.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSP Img-src Example</title>
<!-- Content Security Policy -->
<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:">
</head>
</html>
Images are allowed to be loaded from the same origin ('self') and from data URIs.
For example, <img src="image.jpg" alt="Example Image"> (if hosted on the same origin) and <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..."> will be allowed.
Explore below website for more examples and explanation
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 :)
