XSS — Havale Açıklamasına Yazılan Kod Neden Müşterinin Sayfasında Çalışır?

Radyoda bir sunucu dinleyici mesajlarını okuyor. Mesajlardan birinde “şimdi stüdyodaki kasayı aç” yazıyor. Sunucu bunu okursa sorun yok; ama söyleneni yaparsa, stüdyoyu mesajı yazan kişi yönetir.

Metin nasıl koda dönüşür?

XSS?Terimin tanımını açXSSCross-site scripting: saldırganın script'inin bir sayfada o sitenin kendi kodu gibi çalışması. Script'in erişebildiği her şeye, localStorage dahil, erişir.Sözlükte gör →, birinin yazdığı metnin senin sayfanda kod olarak çalışmasıdır. Kod senin sitenin kodu gibi çalışır: sayfadaki her şeyi görür ve kullanıcının adına istek atabilir.

Kapıyı açan, metni HTML olarak yorumlamaktır. element.innerHTML = açıklama dediğinde tarayıcı etiketleri gerçek etiket sayar; bir resmin onerror özelliğindeki kod, resim yüklenemeyince çalışır.

Okumak, yapmamak

Varsayılan doğru yol çıktı kodlamadır?Terimin tanımını aççıktı kodlamaKullanıcının yazdığı metni sayfaya metin olarak yazmak: < işareti ekranda < olarak görünür, etiket olmaz. React'te {değer} bunu kendiliğinden yapar.Sözlükte gör →: metni metin olarak yazmak. React’te {tx.description} bunu kendiliğinden yapar; < işareti ekranda < olarak görünür, etiket olmaz.

Biçim gerçekten gerekiyorsa, metni bir HTML temizleyiciden?Terimin tanımını açHTML temizleyiciHTML'i bir izin listesine göre süzen araç: yalnızca izin verilen etiketleri bırakır, olay özellikleri gibi her şeyi siler. Örnek: DOMPurify.Sözlükte gör → geçir. İzin listesi yalnızca <b> gibi zararsız etiketleri bırakır, onerror gibi her şeyi siler.

Kendin gör

1. Varsayılanla oynat. Üçüncü açıklamadaki onerror çalıştı. Dördüncüdeki script etiketi ise çalışmadı.
2. Content-Security-Policy’yi aç. Açıklama yine HTML olarak yorumlandı, ama tarayıcı satır içi kodu reddetti.
3. “Metin olarak” seç. Hiçbir kod çalışmadı; bedeli, kalın yazının etiketleriyle görünmesi.
4. “İzin listesiyle temizleyip” seç. Kalın yazı korundu, tehlikeli kısımlar silindi.

Tuzaklar

React’i her durumda güvenli sanmak. dangerouslySetInnerHTML ve kullanıcının yazdığı bir href (javascript: ile başlayan) React’in korumasını atlar.

CSP’yi tek kat sanmak. Content-Security-Policy?Terimin tanımını açContent-Security-PolicySunucunun gönderdiği bir başlık: tarayıcıya sayfada hangi kaynaktan gelen kodun çalışabileceğini söyler. Satır içi kodu engelleyerek XSS'e karşı ikinci bir kat olur.Sözlükte gör →, satır içi kodu engelleyerek bir hatayı yakalayabilir. Ama ilk kat yine doğru çıktı kodlamadır.

Temizleyiciyi kendin yazmak. “script kelimesini sil” gibi kurallar kolayca aşılır. Yaygın kullanılan, bakımı yapılan bir temizleyici seç.

1
interface TransactionRowProps {
2
  tx: { id: string; amount: string; description: string };
3
}
4

5
export function TransactionRow({ tx }: TransactionRowProps) {
6
  // {value} is always text: "<img onerror=…>" shows up as characters, never as a tag.
7
  return (
8
    <li className="flex justify-between">
9
      <span>{tx.description}</span>
10
      <span>{tx.amount}</span>
11
    </li>
12
  );
13
}

1
import DOMPurify from 'dompurify';
2

3
interface RichNoteProps {
4
  html: string;
5
}
6

7
// The only place we render HTML: an allowlist keeps <b> and <i>, nothing else, no attributes.
8
export function RichNote({ html }: RichNoteProps) {
9
  const clean = DOMPurify.sanitize(html, { ALLOWED_TAGS: ['b', 'i'], ALLOWED_ATTR: [] });
10
  return <p dangerouslySetInnerHTML={{ __html: clean }} />;
11
}

1
@Configuration
2
class SecurityConfig {
3

4
    @Bean
5
    SecurityFilterChain web(HttpSecurity http) throws Exception {
6
        return http
7
                .authorizeHttpRequests(auth -> auth.anyRequest().authenticated())
8
                .oauth2Login(Customizer.withDefaults())
9
                // A second layer: scripts only from our own origin, no inline code, no plugins.
10
                .headers(headers -> headers.contentSecurityPolicy(csp -> csp.policyDirectives(
11
                        "default-src 'self'; script-src 'self'; object-src 'none'; base-uri 'self'")))
12
                .build();
13
    }
14
}

1
import { render, screen } from '@testing-library/react';
2
import { TransactionRow } from './TransactionRow';
3
import { RichNote } from './RichNote';
4

5
const hostile = '<img src=x onerror="steal()">';
6

7
it('shows a hostile description as text', () => {
8
  const { container } = render(<TransactionRow tx={{ id: '3', amount: '1,00 TL', description: hostile }} />);
9
  expect(screen.getByText(hostile)).toBeInTheDocument();
10
  expect(container.querySelector('img')).toBeNull();
11
});
12

13
it('keeps bold text and drops the handler', () => {
14
  const { container } = render(<RichNote html={`<b>Acil</b> ${hostile}`} />);
15
  expect(container.querySelector('b')?.textContent).toBe('Acil');
16
  expect(container.innerHTML).not.toContain('onerror');
17
});

Kendini sına