Mauricio Junior
What exactly is a content security policy, and how can I incorporate it into my website
Try to understand and follow
What is Content Security Policy (CSP)?
Content Security Policy (CSP) is a browser security feature that helps protect your website against:
- Cross-Site Scripting (XSS)
- Data injection attacks
- Malicious third-party scripts
- Clickjacking (with proper configuration)
It works by telling the browser:
“Only load scripts, styles, images, and other resources from these trusted sources.”
If something tries to load from an untrusted source, the browser blocks it automatically.
Why CSP Is Important (Especially for Your SaaS / Websites)
Since you run websites like easy2invest.org and ecode10.com, CSP helps you:
- Protect users from injected malicious JavaScript
- Prevent ad/script supply-chain attacks
- Improve trust and security posture
- Reduce risk if a dependency gets compromised
How CSP Works
You define a policy like this:
Content-Security-Policy: default-src 'self';
This means:
- Only allow content from your own domain
- Block everything else
How To Add CSP To Your Website
You can add CSP in two ways:
Option 1 — Add CSP via HTTP Headers (Recommended)
This is the best and most secure method.
Apache (.htaccess)
Header set Content-Security-Policy "default-src 'self';"
Nginx
add_header Content-Security-Policy "default-src 'self';";
Node.js (Express)
app.use((req, res, next) => {
res.setHeader(
"Content-Security-Policy",
"default-src 'self';"
);
next();
});
Option 2 — Add CSP in HTML (Less Secure)
Inside <head>:
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">
Not recommended for production if you can control server headers.
Realistic Example for a Modern Website
If you use:
- Google Analytics
- External fonts
- CDN scripts
- Images
- APIs
Example:
Content-Security-Policy:
default-src 'self';
script-src 'self' https://www.googletagmanager.com;
style-src 'self' https://fonts.googleapis.com;
font-src https://fonts.gstatic.com;
img-src 'self' data:;
connect-src 'self';
Understanding Directives
| Directive | Controls | | ------------- | ---------------------- |
| default-src | Fallback rule |
| script-src | JavaScript |
| style-src | CSS |
| img-src | Images |
| font-src | Fonts |
| connect-src | API calls / AJAX |
| frame-src | iFrames |
| object-src | Flash/Plugins |
| base-uri | Base URL |
| form-action | Where forms can submit |
Start in "Report Only" Mode (Very Important)
Before enforcing, test it:
Header set Content-Security-Policy-Report-Only "default-src 'self';"
This lets you:
- See what would be blocked
- Avoid breaking your site
- Adjust safely
Check browser console ? you'll see violations.
Common Mistakes
- Using
'unsafe-inline'(reduces protection) - Forgetting external APIs
- Blocking CDN scripts accidentally
- Not testing first
Best Practice for You (Developer Perspective)
Since you build and manage your own projects:
-
Start strict:
default-src 'self'; -
Open only what you truly need
-
Avoid inline JavaScript
-
Use nonces if necessary
-
Monitor CSP violations
Extra Security Upgrade
Combine CSP with:
X-Content-Type-Options: nosniffX-Frame-Options: DENYStrict-Transport-Security- Proper API version upgrades (like we discussed with jQuery before)
Related articles
Phishing Campaign Targets WhatsApp Accounts
Researchers at Gen Digital Inc. (a global cybersec
Be careful - Scam using big company
With Text Message