CORS Security: Cross-Origin Resource Sharing

# Client (https://app.com) mengirim request ke API
GET /api/users HTTP/1.1
Host: api.example.com
Origin: https://app.com
Accept: application/json

# Server meresponse dengan CORS headers
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://app.com
Content-Type: application/json

# Browser memeriksa: apakah Origin diizinkan?
# ✅ Jika Access-Control-Allow-Origin cocok → response diteruskan ke JS
# ❌ Jika tidak cocok → browser memblokir, JS tidak bisa baca response

# Contoh Blokir:
# Server mengirim: Access-Control-Allow-Origin: https://other.com
# Browser: Origin https://app.com TIDAK cocok → BLOKIR!
# JS menerima error: "has been blocked by CORS policy"

# =============================================
# POST simple request (form-like)
# =============================================
POST /api/comments HTTP/1.1
Host: api.example.com
Origin: https://app.com
Content-Type: application/x-www-form-urlencoded

text=Halo+dunia&author=John

# Server response:
HTTP/1.1 201 Created
Access-Control-Allow-Origin: https://app.com
Content-Type: application/json

// ❌ Simple request — TIDAK preflight
fetch('https://api.example.com/users', {
  method: 'GET'
});

// ❌ Simple request — TIDAK preflight
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: 'name=John'
});

// ✅ Preflight — Content-Type application/json
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'  // Bukan simple Content-Type!
  },
  body: JSON.stringify({ name: 'John' })
});
// Browser akan mengirim OPTIONS terlebih dahulu!

// ✅ Preflight — Custom header Authorization
fetch('https://api.example.com/users', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiJ9...'  // Custom header!
  }
});

// ✅ Preflight — Method PUT
fetch('https://api.example.com/users/123', {
  method: 'PUT',  // Bukan simple method!
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'Jane' })
});

// Client-side: Mengirim request dengan cookies
// ✅ Fetch API dengan credentials
fetch('https://api.example.com/profile', {
  method: 'GET',
  credentials: 'include',  // Kirim cookies!
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log('Profile:', data))
.catch(err => console.error('CORS Error:', err));

// ✅ XMLHttpRequest dengan credentials
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/profile', true);
xhr.withCredentials = true;  // Kirim cookies!
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('Profile:', JSON.parse(xhr.responseText));
  }
};
xhr.send();

// ✅ Axios dengan credentials (default)
import axios from 'axios';
const api = axios.create({
  baseURL: 'https://api.example.com',
  withCredentials: true  // Kirim cookies ke semua request
});
const profile = await api.get('/profile');

# Preflight request dengan credentials
OPTIONS /api/profile HTTP/1.1
Host: api.example.com
Origin: https://app.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: content-type

# Preflight response — HARUS origin eksplisit, bukan *
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://app.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: content-type
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 86400

# Actual request dengan cookie
GET /api/profile HTTP/1.1
Host: api.example.com
Origin: https://app.com
Cookie: session_id=abc123xyz
Content-Type: application/json

# Response dengan CORS headers
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https.com
Access-Control-Allow-Credentials: true
Content-Type: application/json
Set-Cookie: session_id=abc123xyz; SameSite=None; Secure; HttpOnly

{"id": 1, "name": "John Doe", "email": "john@app.com"}

# ❌ SANGAT BERBAHAYA: Reflect origin tanpa validasi
from flask import Flask, request, jsonify

app = Flask(__name__)

@app.after_request
def add_cors_headers(response):
    origin = request.headers.get('Origin')

    # ❌ Merefleksikan origin dari request tanpa validasi!
    # Artinya SIAPAPUN yang mengirim request akan diizinkan
    if origin:
        response.headers['Access-Control-Allow-Origin'] = origin
        response.headers['Access-Control-Allow-Credentials'] = 'true'
    return response

@app.route('/api/profile')
def profile():
    if 'user_id' not in session:
        return jsonify({"error": "Unauthorized"}), 401
    user = get_user(session['user_id'])
    return jsonify({
        "name": user.name,
        "email": user.email,
        "balance": user.balance,    # Data sensitif!
        "ssn": user.ssn             # Sangat sensitif!
    })

# Serangan: Situs jahat bisa membaca data korban
# Script di evil.com:
# fetch('https://api.example.com/api/profile', {
#   credentials: 'include'
# }).then(r => r.json()).then(data => {
#   // Data sensitif korban berhasil dicuri!
#   sendToAttacker(data);
# });

# Karena server merefleksikan origin evil.com,
# browser mengizinkan response diteruskan ke JS!

# ❌ RENTAN: Regex yang tidak tepat
import re

ALLOWED_ORIGINS_PATTERN = r'https://.*\.example\.com$'

def is_origin_allowed(origin):
    return bool(re.match(ALLOWED_ORIGINS_PATTERN, origin))

# Masalah: Regex ini cocok dengan:
# ✅ https://app.example.com      → benar
# ✅ https://api.example.com      → benar
# ❌ https://evil.example.com.attacker.com  → COCOK JUGA!
# ❌ https://example.com.attacker.com       → COCOK JUGA!
# Karena .* bisa match apapun, dan $ hanya match di akhir

# ✅ SOLUSI: Gunakan whitelist eksplisit
ALLOWED_ORIGINS = {
    'https://app.example.com',
    'https://admin.example.com',
    'https://api.example.com'
}

def is_origin_allowed(origin):
    return origin in ALLOWED_ORIGINS

# Atau regex yang lebih ketat:
STRICT_PATTERN = r'^https://(app|admin|api)\.example\.com$'

def is_origin_allowed_strict(origin):
    return bool(re.match(STRICT_PATTERN, origin))

# ❌ RENTAN: Mengizinkan null origin
@app.after_request
def add_cors(response):
    origin = request.headers.get('Origin', 'null')

    # ❌ Mengizinkan 'null' origin!
    # Ini memungkinkan sandboxed iframe mengakses API
    response.headers['Access-Control-Allow-Origin'] = origin
    response.headers['Access-Control-Allow-Credentials'] = 'true'
    return response

# Serangan: Penyerang membuat halaman dengan sandboxed iframe
# <iframe sandbox="allow-scripts" src="data:text/html,
#   <script>
#     fetch('https://api.example.com/api/profile', {
#       credentials: 'include'
#     }).then(r => r.json()).then(data => {
#       parent.postMessage(data, '*');
#     });
#   </script>
# "></iframe>
#
# Sandbox iframe memiliki origin "null" — dan server mengizinkannya!

# ✅ SOLUSI: Jangan izinkan null origin
@app.after_request
def add_cors_safe(response):
    origin = request.headers.get('Origin')

    if origin and origin != 'null' and origin in ALLOWED_ORIGINS:
        response.headers['Access-Control-Allow-Origin'] = origin
        response.headers['Access-Control-Allow-Credentials'] = 'true'

    return response

# ✅ CORS yang aman untuk Flask
from flask import Flask, jsonify
from flask_cors import CORS
import os

app = Flask(__name__)

# ✅ Opsi 1: Whitelist origin spesifik
ALLOWED_ORIGINS = [
    'https://beebanelabs.pages.dev',
    'https://admin.beebanelabs.pages.dev',
    'http://localhost:3000'  # Development only
]

CORS(app, resources={
    r"/api/*": {
        "origins": ALLOWED_ORIGINS,
        "methods": ["GET", "POST", "PUT", "DELETE"],
        "allow_headers": ["Content-Type", "Authorization", "X-Requested-With"],
        "expose_headers": ["X-Total-Count", "X-Page-Count"],
        "supports_credentials": True,
        "max_age": 3600  # Cache preflight selama 1 jam
    }
})

# ✅ Opsi 2: Dynamic origin validation
from flask import request
import re

TRUSTED_DOMAINS = re.compile(r'^https://(app|admin|api)\.beebanelabs\.pages\.dev$')

def origin_allowed(origin):
    if not origin:
        return False
    if origin == 'http://localhost:3000' and app.debug:
        return True
    return bool(TRUSTED_DOMAINS.match(origin))

@app.after_request
def set_cors_headers(response):
    origin = request.headers.get('Origin')
    if origin and origin_allowed(origin):
        response.headers['Access-Control-Allow-Origin'] = origin
        response.headers['Access-Control-Allow-Credentials'] = 'true'
        response.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS'
        response.headers['Access-Control-Allow-Headers'] = 'Content-Type, Authorization, X-Requested-With'
        response.headers['Access-Control-Expose-Headers'] = 'X-Total-Count'
        response.headers['Access-Control-Max-Age'] = '3600'
    return response

# Handle preflight OPTIONS request
@app.route('/api/', methods=['OPTIONS'])
def handle_preflight(path):
    return '', 204

# Contoh API endpoint
@app.route('/api/users')
def get_users():
    return jsonify({"users": []})

@app.route('/api/users/', methods=['PUT'])
def update_user(user_id):
    return jsonify({"message": "User updated"})

// ✅ CORS yang aman untuk Express.js
const express = require('express');
const cors = require('cors');
const app = express();

// ✅ Opsi 1: Whitelist origin
const allowedOrigins = [
  'https://beebanelabs.pages.dev',
  'https://admin.beebanelabs.pages.dev',
  'http://localhost:3000'
];

const corsOptions = {
  origin: function (origin, callback) {
    // Izinkan request tanpa origin (mobile apps, Postman)
    if (!origin) return callback(null, true);

    if (allowedOrigins.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
      callback(new Error('Origin tidak diizinkan oleh CORS policy'));
    }
  },
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'],
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With'],
  exposedHeaders: ['X-Total-Count', 'X-Page-Count'],
  credentials: true,  // Izinkan cookies
  maxAge: 3600,       // Cache preflight 1 jam
  optionsSuccessStatus: 204
};

app.use('/api', cors(corsOptions));

// ✅ Opsi 2: Per-route CORS (lebih granular)
app.get('/api/public/data', cors(), (req, res) => {
  // Public endpoint — CORS terbuka
  res.json({ data: 'public' });
});

app.get('/api/private/profile', cors(corsOptions), (req, res) => {
  // Private endpoint — CORS ketat
  res.json({ profile: {} });
});

// ✅ Handle preflight untuk semua route
app.options('*', cors(corsOptions));

// Error handler untuk CORS rejection
app.use((err, req, res, next) => {
  if (err.message.includes('CORS')) {
    res.status(403).json({
      error: 'CORS policy violation',
      message: 'Origin tidak diizinkan mengakses resource ini'
    });
  } else {
    next(err);
  }
});

app.listen(3000);

# /etc/nginx/conf.d/cors.conf

# Map untuk validasi origin
map $http_origin $cors_origin {
    default "";
    "https://beebanelabs.pages.dev" $http_origin;
    "https://admin.beebanelabs.pages.dev" $http_origin;
    "~^https://(app|dev)\.beebanelabs\.pages\.dev$" $http_origin;
}

server {
    listen 443 ssl;
    server_name api.beebanelabs.pages.dev;

    location /api/ {
        # CORS headers — hanya jika origin valid
        if ($cors_origin != "") {
            add_header Access-Control-Allow-Origin $cors_origin always;
            add_header Access-Control-Allow-Credentials "true" always;
            add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
            add_header Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With" always;
            add_header Access-Control-Expose-Headers "X-Total-Count" always;
            add_header Access-Control-Max-Age 3600 always;
        }

        # Handle preflight
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin $cors_origin;
            add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
            add_header Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With";
            add_header Access-Control-Max-Age 3600;
            add_header Content-Length 0;
            return 204;
        }

        proxy_pass http://backend;
    }
}