ما هو ال CORS و كيف يعمل؟ What is CORS - CSRF Attacks - SOP - Preflight Request

Introduction

This tutorial explores Cross-Origin Resource Sharing (CORS), a critical web security feature that helps protect your applications from Cross-Site Request Forgery (CSRF) attacks. Understanding CORS is essential for securing web applications, as it governs how resources can be requested from different origins. This guide will walk you through key concepts, how CORS works, and best practices for implementing it.

Step 1: Understand the Same-Origin Policy

• The Same-Origin Policy (SOP) is a security measure that restricts web pages from making requests to a different domain than the one that served the web page.
• This policy helps mitigate attacks by ensuring that malicious scripts on one site cannot access sensitive data on another.
• Familiarize yourself with the structure of URLs to understand what constitutes a different origin:
  • Protocol (http vs. https)
  • Domain (example.com vs. another-example.com)
  • Port (80 vs. 443)

Step 2: Learn About CORS

• CORS is a mechanism that allows servers to specify who can access their resources and how those resources can be accessed.
• It uses HTTP headers to let a server indicate any other origins (domains) from which a resource can be requested.
• Key headers to understand:
  • Access-Control-Allow-Origin: Specifies the allowed origin(s) for cross-origin requests.
  • Access-Control-Allow-Methods: Indicates which HTTP methods (GET, POST, etc.) are allowed.
  • Access-Control-Allow-Headers: Lists the headers that can be used in the actual request.

Step 3: Preflight Requests

• Preflight requests are a feature of CORS that checks permissions before sending actual requests.
• These requests are made using the OPTIONS method and include the intended method and headers of the actual request.
• How to handle preflight requests:
  • Ensure your server responds with the appropriate CORS headers.
  • Handle the OPTIONS method on your server to respond correctly.

Step 4: Implementing CORS in Your Server

• Depending on your server technology, the implementation will vary. Here are examples for common environments:

For Node.js (Express)

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
    origin: 'https://example.com', // specify allowed origin
    methods: ['GET', 'POST'], // specify allowed methods
}));

app.listen(3000, () => console.log('Server running on port 3000'));

For Python (Flask)

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "https://example.com"}})

if __name__ == "__main__":
    app.run()

Step 5: Preventing CSRF Attacks

• CSRF attacks exploit the trust that a site has in a user's browser. To mitigate these risks:
  • Use anti-CSRF tokens that are unique to each session.
  • Implement CORS correctly to ensure that only trusted domains can make requests.
  • Validate the origin of requests in your server logic.

Conclusion

CORS is a powerful tool for enhancing web security, particularly against CSRF attacks. By understanding the Same-Origin Policy, implementing CORS correctly, and taking preventative measures against CSRF, you can significantly improve the security of your web applications.

Next steps may include experimenting with CORS on your server setup, exploring more advanced configurations, or integrating secure coding practices into your development process.