When building and securing websites, two important concepts often come up: CSP (Content Security Policy) and CORS (Cross-Origin Resource Sharing). Let’s break down what they mean and how they work in simple language.
In simple language.
- CSP: I will not ask you.
- CORS: I will not give you.
CSP (Content Security Policy)
Content Security Policy (CSP) is like a set of rules that a website follows about where it can get resources (like scripts, images, or styles) from. Imagine you are a website. With CSP, you tell the browser, “I will only load content from certain trusted sources.” If a source isn’t on your approved list, you won’t ask it for anything, even if it has the information you need.
How CSP Works
When you visit a website, the browser checks the site’s CSP to see which external resources it is allowed to load. If a resource is not listed, the browser blocks the request.
Example of CSP in Action
If you visit facebook.com and its CSP is set to only allow resources from facebook.com, it won’t load anything from twitter.com or other websites.
Content-Security-Policy: default-src facebook.comThis policy can also be set directly in the HTML meta tag:
<meta
http-equiv="Content-Security-Policy"
content="default-src https://facebook.com"/>If this policy is in place and you try to load content from an unapproved source, the browser will block it and show a blocked:csp error.
CORS (Cross-Origin Resource Sharing)
Cross-Origin Resource Sharing (CORS) is about controlling who can access your resources. Think of it as you being a website that receives requests from other sites. With CORS, you decide who you will respond to. If a site isn’t on your list of approved requesters, you won’t give them any data, even if they ask nicely.
How CORS Works
When a website tries to fetch data from another site, the browser first checks if the other site allows this request through its CORS policy. If the requesting site is not on the approved list, the browser blocks the response.
Example of CORS in Action
If you visit facebook.com (with no CSP set) and it tries to fetch data from twitter.com, twitter.com will only respond if its CORS policy allows it.
Access-Control-Allow-Origin: https://twitter.comIf twitter.com’s CORS policy doesn’t allow responses to facebook.com, then even if facebook.com makes a request, the browser will block the response and show a CORS error.
Enforced at the Browser Level
Both CSP and CORS are enforced by the browser. This means while you can bypass these policies using tools like cURL, any standard browser will block requests and responses based on the rules set by CSP and CORS.
CSP Information Source
The browser gets CSP details from the server hosting the website or from an HTML meta tag. If an external resource is not on the CSP list, the browser blocks the call.
CORS Preflight Requests
The browser makes a preflight request to check if the site it wants to access has the necessary CORS settings. If the requesting site is not on the allowed list, the browser blocks the request.
Conclusion
Understanding CSP and CORS is crucial for web security. CSP helps prevent loading malicious content by restricting resource sources, while CORS controls data sharing with other sites. Both mechanisms enhance security by defining strict rules on what a website can load and share, ensuring that only trusted interactions occur. By implementing CSP and CORS correctly, you can protect your website from a variety of security threats.
For more detailed guides and best practices on web security, keep following our blog!
See more:
