Content Security Policy (CSP)

CONTENT
SECURITY
POLICY
PRESENTATION
Arunkumar

© 2020 techrev.us All rights reserved. P A G E 2
It’s an added layer of Security for our site to protect it from
- Cross site scripting (XSS)
- Data injection attacks and packet sniffing attacks
Content Security Policy
C r o s s s i t e S c r i p t i n g D e f e n s e
- To enable CSP, you need to configure your web server to return content-security-policy HTTP header.
- Alternatively we can use <meta> element to configure a policy
eg : <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

1) Specify your policy
- use Content-Security-Policy: Policy HTTP header
2) Writing a Policy
- it’s a series of policy directives described with respect to its resource type or policy area
- policy must include default-src policy directive. This is the fallback if other source type is not specified
- in order to prevent inline scripts we have to use script-src, similarly for style it has to be style-src
Using CSP
Configuring Content Security Policy

1) A web site administrator wants all content to come from the site's own origin (this excludes subdomains.)
Content-Security-Policy: default-src 'self‘
2) A web site administrator wants to allow content from a trusted domain and all its subdomains (it doesn't have to be the same
domain that the CSP is set on.)
Content-Security-Policy: default-src 'self' *.trusted.com
3) A web site administrator wants to allow users of a web application to include images from any origin in their own content, but
to restrict audio or video media to trusted providers, and all scripts only to a specific server that hosts trusted code
Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com
4) A web site administrator for an online banking site wants to ensure that all its content is loaded using TLS, in order to prevent
attackers from eavesdropping on requests.
Content-Security-Policy: default-src https://onlinebanking.jumbobank.com
5) A web site administrator of a web mail site wants to allow HTML in email, as well as images loaded from anywhere, but not
JavaScript or other potentially dangerous content.
Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *
Use cases
Configuring Content Security Policy

By default, violation reports aren't sent. To enable violation
reporting, you need to specify the report-uri policy directive,
providing at least one URI to which to deliver the reports
Content-Security-Policy: default-src 'self'; report-uri
http://reportcollector.example.com/collector
Reporting
Enabling reporting
Here this URL should act as web hook to store incoming errors of CSP. The
response may contain the following data:
blocked-uri, disposition, document-uri, effective-directive, original-policy,
referrer, script-sample, status-code, violated-directive

Sample :
Let's consider a page located at http://example.com/signup.html. It uses the
following policy, disallowing everything but style sheets from
cdn.example.com.
Content-Security-Policy: default-src 'none'; style-src cdn.example.com;
report-uri /_/csp-reports
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body> ... Content ... </body>
</html>
Reporting
Enabling reporting
Resulting report:
{
"csp-report":
{
"document-uri": "http://example.com/signup.html",
"referrer": "",
"blocked-uri": "http://example.com/css/style.css",
"violated-directive": "style-src cdn.example.com",
"original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports"
}
}

1) In express you can specify in generic way by
2) Using HELMET
3) Using express-csp-header
Using NodeJS
Configuring on server side with CSP
app.use(function(req, res, next)
{ res.setHeader("content-security-policy-report-only", "default-src 'self'; script-src 'self' 'report-
sample'; style-src 'self' 'report-sample'; base-uri 'none'; object-src 'none'; report-uri
https://5e52f4c893efcda6a7d40460.endpoint.csper.io")
next();
});
app.use(helmet.contentSecurityPolicy({ directives:{ defaultSrc:["'self'"],
scriptSrc:["'self'",'code.jquery.com','maxcdn.bootstrapcdn.com'],
styleSrc:["'self'",'maxcdn.bootstrapcdn.com'], fontSrc:["'self'",'maxcdn.bootstrapcdn.com']}}));
const { expressCspHeader, INLINE, NONE, SELF } = require('express-csp-header');
app.use(expressCspHeader({ directives: { 'default-src': [SELF], 'script-src': [SELF, INLINE,
'somehost.com'], 'style-src': [SELF, 'mystyles.net'], 'img-src': ['data:', 'images.com'], 'worker-src':
[NONE], 'block-all-mixed-content': true } }));

Final Verdict
CSP is an optional added layer of security.
This comes at the cost of possibly breaking things and
making debugging more difficult
It’s a great fit for:
- Bank, government, institution sites
- Larger Organization where security is top priority
- Organizations at highest risk of targeted attacks
- Already hacked websites
Reference:
- 1. https://blog.jscrambler.com/an-introduction-to-csp/
2. https://github.com/frux/express-csp-header

Content Security Policy (CSP)

More Related Content

What's hot

Similar to Content Security Policy (CSP)

Recently uploaded

Content Security Policy (CSP)