Güvenilir Türler ile DOM tabanlı XSS saldırılarını önleme

Güvenilir Türler, "tehlikeli" tarayıcı API'lerine (havuz olarak bilinir) aktarılan verilerin önce TrustedHTML gibi belirli bir türe dönüştürülmesini zorunlu kılarak DOM tabanlı siteler arası komut dosyası çalıştırmayı (DOM XSS) önlemeye yardımcı olan bir güvenlik özelliğidir.

Varsayılan olarak, birçok DOM API'si (ör. innerHTML veya document.write) ham dizeleri kabul eder. Bir dize, güvenilmeyen bir kaynaktan gelen kötü amaçlı komut dosyası içeriyorsa bu komut dosyası çalıştırılabilir. Güvenilir Türler bu davranışı değiştirir: CSP aracılığıyla etkinleştirildikten sonra bu havuzlar yalnızca yetkili politikalar tarafından oluşturulan TrustedHTML nesnelerini kabul eder.

Uygulamaya Koymayla İlgili Temel Ayrıntılar

Güvenilir Türler'i kullanmak için dört ana adımı uygulayın:

1. Dizelerin nasıl temizleneceğini veya dönüştürüleceğini belirten bir güvenlik politikası tanımlayın.
2. Ham dizelerden Güvenilir Tür nesneleri oluşturmak için bu politikayı kullanın.
3. DOM havuzlarına yazarken Güvenilir Tür nesnelerini kullanın.
4. İçerik Güvenliği Politikası (İGP) kullanarak Güvenilir Türler'i zorunlu kılın.

1. Politika oluşturma

Politika, içeriği temizlemeye yönelik bir dizi kuraldır. Bunu trustedTypes.createPolicy() kullanarak oluşturursunuz. Genellikle DOMPurify gibi bir temizleyici kitaplığa veya uygulamanızın HTML çıkış kurallarına yetki verirsiniz:

import DOMPurify from 'dompurify';

const myPolicy = trustedTypes.createPolicy('sanitize-html', {
  createHTML: (input) =>
    // Return a sanitized string; createPolicy() wraps it in a TrustedHTML object.
    // Example using DOMPurify:
    DOMPurify.sanitize(input, { RETURN_TRUSTED_TYPE: false }),
});

// Example using HTML escaping (for environments without third-party sanitizers):
const escapePolicy = trustedTypes.createPolicy('escape-html', {
  createHTML: (input) =>
    String(input)
      .replaceAll('&', '&')
      .replaceAll('<', '&lt;')
      .replaceAll('>', '&gt;')
      .replaceAll('"', '&quot;')
      .replaceAll("'", '&#39;'),
});

2. Politikayı kullanma

Bir dizeyi doğrudan bir havuza iletmek yerine politikanın oluşturma yöntemini çağırırsınız.

const untrustedInput = '<p>Hello, <strong>world</strong>!</p><img src="x" onerror="alert(1)">';

// In an enforced environment, this would throw a TypeError:
// element.innerHTML = untrustedInput;

// This returns a TrustedHTML object with unsafe elements and attributes removed:
const cleanHTML = myPolicy.createHTML(untrustedInput);
// Result: "<p>Hello, <strong>world</strong>!</p><img src=\"x\">"

3. Güvenilir Türler'i kullanmak için havuzları geçirme

Bir havuza yazdığınız her örneği, önce Güvenilir Tür nesnesine dönüştürecek şekilde güncelleyin. Kodun güncellenmesi gereken yerleri bulmanıza yardımcı olması için, bir havuzun TrustedType yerine dizeyle yazıldığı zamanları günlüğe kaydeden geçici bir default politikası tanımlayabilirsiniz.

trustedTypes.createPolicy("default", {
  createHTML(value) {
    console.warn("String passed instead of Trusted Type.");
    return DOMPurify.sanitize(value, { RETURN_TRUSTED_TYPE: false });
  },
});

Güvenilir Türler'i destekleyen yaygın havuzlar şunlardır:

• HTML: element.innerHTML, element.outerHTML, document.write(), element.setHTMLUnsafe(), Document.parseHTMLUnsafe()
• Komut dosyası: <script> metin içeriği, eval()
• ScriptURL: <script src>, Worker(), SharedWorker()

// Assign the TrustedHTML object.
element.innerHTML = cleanHTML;

"Güvenli" HTML temizleme yöntemleri (Güvenilmeyen HTML'yi Temizleme bölümünde ele alınan element.setHTML() ve Document.parseHTML()), olası XSS saldırılarını her zaman yerel olarak temizlediğinden Güvenilir Türler politikası gerektirmez.

4. CSP ile Güvenilir Türler'i zorunlu kılma

Güvenilir Türler, uygulamanızın bozulmasını önlemek için kademeli olarak kullanıma sunulmalıdır. Tam yaptırım en güçlü korumayı sağlasa da her havuz yazma işlemi taşınmadıysa sitenin bozulma riski vardır.

Ön koşullar

• Çerçeve işbirliği: Uygulamanızın çerçevesi (veya DOM havuzlarına yazan herhangi bir üçüncü taraf kitaplığı) TrustedHTML ya da TrustedScript değerleri üretmiyorsa kodu bozmadan Güvenilir Türler'i zorunlu kılamazsınız. Kullanıma sunmaya başlamadan önce çerçeve desteğini denetleyin.
• Havuzları yeniden düzenleme: Tehlikeli havuzları belirleyip Güvenilir Türler politikalarınızı kullanacak şekilde yeniden düzenlediğinizden emin olun.

Kullanıma Sunma Stratejisi

1. Yalnızca Raporlama: İlk olarak Content-Security-Policy-Report-Only başlığını kullanarak kullanıma sunun. Bu işlem, yazma işlemlerini engellemeden ihlalleri raporlama uç noktanıza kaydeder.

   Content-Security-Policy-Report-Only: require-trusted-types-for 'script';
   

2. Yaptırım: Politikalarınızı entegre ettikten ve ihlal raporları sıfıra düştükten sonra tam yaptırıma geçin.

   Content-Security-Policy: require-trusted-types-for 'script';
   

Ayrıca, hangi politikaların oluşturulmasına izin verileceğini de kısıtlayabilirsiniz (sanitize-html veya escape-html gibi politika adlarınızı listeleyin, politikanız DOMPurify.sanitize()'e yetki veriyorsa dompurify'yi ekleyin (bu, dahili olarak bir dompurify politikası oluşturur) ve taşıma sırasında varsayılan bir politika kaydederseniz default'yi ekleyin):

Content-Security-Policy: require-trusted-types-for 'script'; trusted-types sanitize-html escape-html dompurify;

Bu CSP uygulandığında, Güvenilir Türler'i kullanmayan bir havuza yapılan tüm yazma işlemleri hata verir. Ayrıca, trusted-types içinde listelenmeyen bir adla Güvenilir Tür politikası oluşturmaya çalışmak hataya neden olur.

Bu CSP'yi, dokümanınızın <head> bölümünde bir <meta> etiketi olarak da ayarlayabilirsiniz ancak bu yöntem daha az güvenli olabilir.

<!-- First child of `<head>`, as earlier tags will not enforce this CSP. -->
<meta
  http-equiv="Content-Security-Policy"
  content="require-trusted-types-for 'script'; trusted-types sanitize-html escape-html dompurify;"
/>

Yedek stratejiler

Güvenilir Türler'i henüz desteklemeyen tarayıcılar için, kodunuzun bozulmamasını ve temizleme işleminin yapılmasını sağlamak amacıyla minimal bir"tinyfill" kullanabilirsiniz.

if (!window.trustedTypes) {
  window.trustedTypes = {
    createPolicy: (name, rules) => rules,
  };
}

Bu sayede, kodunuzu Güvenilir Türler kalıbını kullanarak yazabilirsiniz. Destekleyen tarayıcılar türleri zorunlu kılarken eski tarayıcılar, sahte politika aracılığıyla temizleme mantığınızı yürütmeye devam eder.

Bir tarayıcı, Güvenilir Türler'i desteklemiyorsa TrustedHTML nesnelerini dize olarak değerlendirir (tinyfill kullanılıyorsa) veya havuz düzeyinde yaptırım kontrolü yapmaz.