CORS vs CSP

1. CORS (Cross-Origin Resource Sharing)

1.1 What is CORS?

CORS is a security mechanism that allows web applications running on one domain to request and access resources from another domain. By default, web browsers restrict cross-origin HTTP requests initiated from scripts for security reasons. However, CORS provides a way to relax this restriction by defining a set of rules for allowing or denying cross-origin requests.

1.2 How does CORS work?

CORS is implemented through the use of HTTP headers. When a web application makes a cross-origin request, the browser sends an initial "preflight" request with an HTTP OPTIONS method to check if the server allows the actual request. The server responds with specific CORS headers indicating whether the request is allowed or denied. If the preflight request is successful, the actual request is made.

1.3 CORS Headers

Here are some common CORS headers:

• Access-Control-Allow-Origin: Specifies which origins are allowed to access the resource. It can be a specific origin or a wildcard * to allow any origin.
• Access-Control-Allow-Methods: Specifies the HTTP methods allowed for the cross-origin request.
• Access-Control-Allow-Headers: Specifies the headers allowed for the cross-origin request.
• Access-Control-Allow-Credentials: Indicates whether cookies and authorization headers should be included in the cross-origin request.
• Access-Control-Max-Age: Specifies the maximum time (in seconds) the preflight request can be cached.

1.4 CORS Example

Here is an example of a CORS response header that allows all origins to access the resource:

Access-Control-Allow-Origin: *

2. CSP (Content Security Policy)

2.1 What is CSP?

CSP is a security feature that helps prevent certain types of attacks, such as cross-site scripting (XSS) and data injection by allowing the server to define the trusted sources of content for a website. It allows web administrators to specify which sources (domains, URLs, etc.) are allowed to load specific types of content.

2.2 How does CSP work?

CSP is implemented through the use of HTTP headers. The web server sends a Content-Security-Policy header with a policy specifying the allowed sources for various types of content, such as scripts, stylesheets, and images. The browser then enforces this policy and blocks any content that does not comply with the specified sources.

2.3 CSP Directives

Here are some common CSP directives:

• default-src: Specifies the default sources for all content types if not explicitly overridden by other directives.
• script-src: Specifies the sources for JavaScript code.
• style-src: Specifies the sources for stylesheets.
• img-src: Specifies the sources for images.
• font-src: Specifies the sources for fonts.
• connect-src: Specifies the sources for making network requests.
• frame-src: Specifies the sources for embedding frames.
• media-src: Specifies the sources for media elements (audio, video).

2.4 CSP Example

Here is an example of a CSP header that only allows content to be loaded from the same origin:

Content-Security-Policy: default-src 'self'

Conclusion

CORS and CSP are both important security mechanisms that help protect web applications from cross-origin attacks and unauthorized content. While CORS deals with cross-origin resource sharing, CSP focuses on specifying the trusted sources of content for a website. It is important for programmers to understand and correctly configure both mechanisms to ensure the security and integrity of their applications.