CSP — Content Security Policy
Hit like if you learn something new
CSP — Content Security Policy
Hit like if you learn something new
A Content Security Policy (CSP) can be defined using a <meta> tag inside the <head> section, although in production it is generally better to set it via HTTP response headers.
Basic Example
<head>
<meta
http-equiv="Content-Security-Policy"
content="
default-src 'self';
script-src 'self';
style-src 'self' 'unsafe-inline';
img-src 'self' https: data:;
font-src 'self' https:;
connect-src 'self' https://api.mycompany.com;
frame-ancestors 'none';
object-src 'none';
"
/>
</head>What each directive means
DirectivePurposedefault-src 'self'Allow resources only from the same domain by defaultscript-src 'self'Allow JavaScript only from your own serverstyle-src 'self' 'unsafe-inline'Allow local CSS and inline styles (often needed for some UI libraries)img-src 'self' https: data:Allow images from your site, HTTPS URLs, and Base64 imagesfont-src 'self' https:Allow fonts from your domain and trusted CDNsconnect-srcRestrict API/WebSocket calls to approved endpointsframe-ancestors 'none'Prevent clickjacking by disallowing embedding in iframesobject-src 'none'Block plugins like Flash and Java applets
React Application Example
Suppose your React app:
- Loads APIs from
[https://api.company.com](https://api.company.com) - Uses Google Fonts
- Uses Google Analytics
You might have:
<head>
<meta
http-equiv="Content-Security-Policy"
content="
default-src 'self';
script-src 'self' https://www.googletagmanager.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
font-src 'self' https://fonts.gstatic.com;
img-src 'self' data: https:;
connect-src 'self' https://api.company.com;
object-src 'none';
frame-ancestors 'none';
"
/>
</head>Better Practice: HTTP Header
In enterprise applications, we usually configure CSP through server headers instead of a meta tag:
Content-Security-Policy:
default-src 'self';
script-src 'self';
connect-src 'self' https://api.company.com;
object-src 'none';
frame-ancestors 'none';Reasons:
- Applied before the page starts loading.
- More secure than meta tags.
- Easier to manage centrally.
- Supports additional directives that meta tags cannot.
Senior-Level Interview Answer
If an interviewer asks for an example, you can say:
“For example, we used a Content Security Policy like
default-src 'self'; script-src 'self'; connect-src https://api.company.com; object-src 'none'; frame-ancestors 'none';to restrict where scripts, APIs, and other resources could be loaded from. This significantly reduces the attack surface for XSS and clickjacking attacks. In production, we configured it through HTTP headers rather than meta tags."
If the backend (or web server like Nginx, Netlify, CloudFront, etc.) sends the Content-Security-Policy HTTP header, you should NOT also define it in a <meta> tag.
Preferred approach (Production)
Backend/server sends:
Content-Security-Policy:
default-src 'self';
script-src 'self';
connect-src https://api.mycompany.com;
object-src 'none';
frame-ancestors 'none';And your index.html contains nothing related to CSP:
<head>
<title>My React App</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>This is the recommended enterprise setup.
Why not use both?
Because:
- HTTP headers are applied earlier
- The browser receives them before parsing any HTML.
- This provides stronger protection.
- Two policies can become confusing
- If the header says:
script-src 'self'
- but the meta tag says:
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://cdn.com" />
- the effective behavior may not match what developers expect.
- Centralized management
- Security teams and DevOps can manage policies in one place without changing frontend code.
When do we use the <meta> tag?
Only in special cases, such as:
- Pure static websites with no server control.
- Local prototypes or demos.
- GitHub Pages or similar hosting where custom headers are difficult to configure.
Example:
<head>
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self';"
/>
</head>But this is a fallback, not the preferred solution.
Interview answer
If asked, you can say:
“No, if the backend or hosting infrastructure already sends the Content-Security-Policy HTTP header, we don’t add a CSP meta tag in the HTML. HTTP headers are the preferred approach because they are enforced before the browser parses the page, provide stronger security, and allow centralized management by backend or DevOps teams. Meta tags are typically used only for static sites where configuring server headers isn’t possible.”
That answer demonstrates both practical experience and an understanding of web security architecture.
메타데이터
- post_id
- 3e76fa296291
- slug
- csp-content-security-policy-3e76fa296291
- url
- https://medium.com/@contactmanoharbatra/csp-content-security-policy-3e76fa296291
- canonical_url
- https://medium.com/@contactmanoharbatra/csp-content-security-policy-3e76fa296291
- author_url
- https://medium.com/@contactmanoharbatra
- status
- ok
- fetched_at
- 2026-07-22 19:41:37
