CORS — Postman'de Çalışıyor, Tarayıcıda Neden Hata?

Büyük bir binada çalışıyorsun ve gelen postaların hepsi önce danışmadaki görevliden geçiyor. Görevli, başka bir şirketten gelen cevabı ancak o şirket “bu cevap şu kişiye verilebilir” diye yazmışsa sana uzatıyor. Binanın dışındaki biri ise aynı mektubu doğrudan açıp okuyabiliyor.

Origin ve izin

Bir sayfanın origin?Terimin tanımını açoriginBir adresin şema, alan adı ve port üçlüsü. Tarayıcı, başka bir origin'den gelen cevabı sunucu izin vermedikçe sayfaya vermez (same-origin policy).Sözlükte gör →’i şema, alan adı ve porttan oluşur: https://app.bank.example ile https://api.bank.example iki ayrı origin’dir. Tarayıcı, sayfanın kendi origin’i dışındaki bir adresten gelen cevabı varsayılan olarak sayfaya vermez.

CORS?Terimin tanımını açCORSCross-Origin Resource Sharing: sunucunun, başka bir origin'deki sayfaya cevabını okuma izni vermesi. Access-Control-* başlıklarıyla yapılır; kuralı tarayıcı uygular.Sözlükte gör →, sunucunun bu izni vermesinin yoludur. Cevaba Access-Control-Allow-Origin: https://app.bank.example yazarsa tarayıcı cevabı sayfadaki koda verir.

İstek gider mi?

JSON gövdeli bir POST ya da özel bir başlık taşıyan istek basit değildir. Tarayıcı önce bir OPTIONS ön kontrolü?Terimin tanımını açpreflightBasit olmayan bir istekten önce tarayıcının gönderdiği OPTIONS isteği. Sunucu metot ve başlıklara izin vermezse asıl istek hiç gönderilmez.Sözlükte gör → gönderir; sunucu metodu ve başlığı izinli saymazsa asıl istek hiç gönderilmez.

Çerezli isteklerde sunucu * diyemez: origin’i açıkça yazmalı ve Access-Control-Allow-Credentials: true göndermelidir.

Kendin gör

1. Varsayılanla oynat. İstek sunucuya ulaştı, cevap JavaScript’ten saklandı.
2. İstemciyi curl yap. Aynı istek, cevap okundu: curl CORS bilmez.
3. JSON POST seç, sunucuyu “yalnızca Allow-Origin” yap. Ön kontrolde takıldı, asıl istek gitmedi.
4. Çerezli isteği joker ayarla dene. * çerezle birlikte kabul edilmez.
5. Sunucuyu “origin, metotlar, başlıklar” yap. Üç istek de geçer.

Tuzaklar

CORS’u güvenlik sanmak. CORS sunucuyu korumaz; kullanıcının tarayıcısının, başka bir sitenin onun adına okuma yapmasını engeller. Sunucuya gelen her istek yine kimlik doğrulama, yetki ve CSRF?Terimin tanımını açCSRFTarayıcının isteğe otomatik eklediği kimlik bilgilerini başka bir sitenin sömürmesi. Token elle eklenen bir başlıktaysa bu saldırı yüzeyi yoktur; cookie'deyse vardır.Sözlükte gör → kontrolünden geçmeli.

Her şeye joker. * ile hata kaybolur ama bütün sitelere okuma izni verilir. İzin listesini açıkça yaz.

Origin’i olduğu gibi yansıtmak. Gelen her Origin başlığını cevaba geri yazmak, jokerden de geniş bir izindir, üstelik çerezlerle birlikte. Origin’i bir listeyle karşılaştır.

Aşağıdaki örnek bir bankanın havale API’sinden: yalnızca kendi web uygulamasına, gereken metot ve başlıklarla, çerezli izin.

1
@Configuration
2
class SecurityConfig {
3

4
    @Bean
5
    SecurityFilterChain api(HttpSecurity http) throws Exception {
6
        return http
7
                .cors(Customizer.withDefaults())       // uses the CorsConfigurationSource bean below
8
                .authorizeHttpRequests(auth -> auth.anyRequest().authenticated())
9
                .build();
10
    }
11
}

1
@Configuration
2
class CorsConfig {
3

4
    @Bean
5
    CorsConfigurationSource corsConfigurationSource(@Value("${app.allowed-origins}") List<String> origins) {
6
        CorsConfiguration config = new CorsConfiguration();
7
        config.setAllowedOrigins(origins);                     // an explicit list, never "*"
8
        config.setAllowedMethods(List.of("GET", "POST"));
9
        config.setAllowedHeaders(List.of("Content-Type", "Idempotency-Key"));
10
        config.setAllowCredentials(true);                      // the session cookie travels
11
        config.setMaxAge(Duration.ofMinutes(30));              // fewer preflights
12

13
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
14
        source.registerCorsConfiguration("/api/**", config);
15
        return source;
16
    }
17
}

1
app:
2
  allowed-origins: https://app.bank.example
3
---
4
spring:
5
  config:
6
    activate:
7
      on-profile: local
8
app:
9
  allowed-origins: http://localhost:5173

1
export async function listAccounts(): Promise<Account[]> {
2
  const response = await fetch('https://api.bank.example/api/accounts', {
3
    credentials: 'include',            // send the session cookie across origins
4
  });
5
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
6
  return response.json();
7
}

Kendini sına