Güvenilir Türler ile DOM tabanlı siteler arası betik çalıştırma güvenlik açıklarını önleyin

Neden ilgilenmelisin? #

DOM tabanlı siteler arası komut dosyası çalıştırma (DOM XSS), en yaygın web güvenlik açıklarından biridir ve bunu uygulamanıza dahil etmek çok kolaydır. Güvenilir Türler tehlikeli web API işlevlerini varsayılan olarak güvenli hale getirerek DOM XSS güvenlik açıklarından arınmış uygulamaları yazmanız, güvenlik incelemesi yapmanız ve sürdürmeniz için size araçlar sunar. Güvenilir Türler, Chrome 83’te desteklenir ve çoklu doldurma diğer tarayıcılar için kullanılabilir. Görmek Tarayıcı Uyumluluğu güncel tarayıcılar arası destek bilgileri için.

Arka plan #

Yıllarca dom xs en yaygın ve tehlikeli web güvenlik açıklarından biri olmuştur.

Siteler arası betik çalıştırmanın iki farklı grubu vardır. Bazı XSS ​​güvenlik açıklarına, web sitesini oluşturan HTML kodunu güvensiz bir şekilde oluşturan sunucu tarafı kodu neden olur. Diğerlerinin istemcide, JavaScript kodunun kullanıcı tarafından kontrol edilen içerikle tehlikeli işlevleri çağırdığı bir temel nedeni vardır.

İle sunucu tarafı XSS’yi engelle, dizeleri birleştirerek HTML oluşturmayın ve bunun yerine güvenli bağlamsal-otomatik kaçış şablon kitaplıkları kullanın. Kullanın tabanlı olmayan İçerik Güvenliği Politikası kaçınılmaz olarak meydana gelen hatalara karşı ek hafifletme için.

Artık bir tarayıcı, istemci tarafı (DOM tabanlı olarak da bilinir) XSS’leri engellemeye yardımcı olabilir. Güvenilir Türler.

API tanıtımı #

Güvenilir Türler, aşağıdaki riskli havuz işlevlerini kilitleyerek çalışır. Tarayıcı satıcısı ve satıcısı olarak bazılarını zaten tanımış olabilirsiniz. web çerçeveleri zaten güvenlik nedeniyle sizi bu özellikleri kullanmaktan uzaklaştırıyor.

• Komut dosyası manipülasyonu:
  &LTscript src> ve metin içeriğini ayarlama &LTscript> elementler.

• Bir dizeden HTML oluşturma:

  innerHTML, outerHTML,insertAdjacentHTML, &LTiframe> srcdoc, document.write, document.writelnVe DOMParser.parseFromString

• Eklenti içeriğini yürütme:
  &LTembed src>, &LTobject data> Ve &LTobject codebase>

• Çalışma zamanı JavaScript kodu derlemesi:
  eval, setTimeout, setInterval, new Function()

Güvenilen Türler, verileri yukarıdaki havuz işlevlerine aktarmadan önce işlemenizi gerektirir. Tarayıcı verilerin güvenilir olup olmadığını bilmediğinden, yalnızca bir dize kullanmak başarısız olur:

anElement.innerHTML  = location.href;

Verilerin güvenli bir şekilde işlendiğini belirtmek için özel bir nesne oluşturun – Güvenilir Tür.

anElement.innerHTML = aTrustedHTML;

Güvenilir Türler, DOM XSS’yi büyük ölçüde azaltır saldırı yüzeyi uygulamanızın Güvenlik incelemelerini basitleştirir ve kodunuzu çalışma zamanında tarayıcıda derlerken, dizerken veya gruplandırırken yapılan tür tabanlı güvenlik kontrollerini uygulamanıza olanak tanır.

Güvenilir Türler nasıl kullanılır? #

İçerik Güvenliği Politikası ihlal raporları için hazırlanın #

Bir rapor toplayıcı (açık kaynak gibi) dağıtabilirsiniz. go-csp-toplayıcı) veya ticari eşdeğerlerinden birini kullanın. Tarayıcıdaki ihlallerde de hata ayıklayabilirsiniz:

document.addEventListener('securitypolicyviolation',
console.error.bind(console));

Yalnızca rapor içeren bir CSP başlığı ekleyin #

Güvenilen Türlere geçirmek istediğiniz belgelere aşağıdaki HTTP Yanıtı başlığını ekleyin.

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example

Artık tüm ihlaller şuraya bildiriliyor: //my-csp-endpoint.example, ancak web sitesi çalışmaya devam ediyor. Bir sonraki bölüm nasıl olduğunu açıklar //my-csp-endpoint.example İşler.

Güvenilen Tür ihlallerini belirleyin #

Bundan sonra, Güvenilen Türler her ihlal algıladığında, yapılandırılmış bir sunucuya bir rapor gönderilecek. report-uri. Örneğin, uygulamanız bir dizeyi şuraya ilettiğinde: innerHTMLtarayıcı aşağıdaki raporu gönderir:

{
"csp-report": {
    "document-uri": "https://my.url.example",
    "violated-directive": "require-trusted-types-for",
    "disposition": "report",
    "blocked-uri": "trusted-types-sink",
    "line-number": 39,
    "column-number": 12,
    "source-file": "",
    "status-code": 0,
    "script-sample": "Element innerHTML &LTimg src=x"
}
}

Bu diyor ki 39. hatta innerHTML ile başlayan dize ile çağrıldı &LTimg src=x. Bu bilgi, kodun hangi bölümlerinin DOM XSS’yi tanıtıyor olabileceğini ve değiştirilmesi gerektiğini daraltmanıza yardımcı olacaktır.

İhlalleri düzeltin #

Güvenilen Tür ihlalini düzeltmek için birkaç seçenek vardır. Yapabilirsiniz rahatsız edici kodu kaldır, kütüphane kullan, Güvenilen Tür ilkesi oluştur veya son çare olarak, varsayılan bir politika oluştur.

Rahatsız edici kodu yeniden yaz #

Belki de uyumsuz işlevselliğe artık ihtiyaç yoktur veya hataya açık işlevler kullanılmadan modern bir şekilde yeniden yazılabilir?

el.innerHTML = '&LTimg src=xyz.jpg>';

el.textContent = '';
const img = document.createElement('img');
img.src = 'xyz.jpg';
el.appendChild(img);

Bir kitaplık kullanın #

Bazı kitaplıklar, havuz işlevlerine iletebileceğiniz Güvenilir Türler oluşturur. Örneğin, kullanabilirsiniz DOMPurify XSS yüklerini kaldırarak bir HTML snippet’ini sterilize etmek için.

import DOMPurify from 'dompurify';
el.innerHTML = DOMPurify.sanitize(html, {RETURN_TRUSTED_TYPE: true});

DOMPurify Güvenilir Türleri destekler ve bir kutuya sarılmış temizlenmiş HTML’yi döndürür. TrustedHTML tarayıcı bir ihlal oluşturmayacak şekilde itiraz edin.

Güvenilen Tür ilkesi oluşturun #

Bazen işlevselliği kaldırmak mümkün olmaz ve değeri temizleyecek ve sizin için Güvenilir Tür oluşturacak bir kitaplık yoktur. Bu gibi durumlarda, kendiniz bir Güvenilir Tür nesnesi oluşturun.

Bunun için öncelikle bir politika. İlkeler, girdilerinde belirli güvenlik kurallarını uygulayan Güvenilir Türler için fabrikalardır:

if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
  const escapeHTMLPolicy = trustedTypes.createPolicy('myEscapePolicy', {
    createHTML: string => string.replace(/\/g, '&amplt;')
  });
}

Bu kod, adlı bir ilke oluşturur. myEscapePolicy üretebilen TrustedHTML aracılığıyla nesneler createHTML() işlev. Tanımlanan kurallar HTML-kaçış olacak characters to prevent the creation of new HTML elements.

Politikayı şu şekilde kullanın:

const escaped = escapeHTMLPolicy.createHTML('&LTimg src=x onerror=alert(1)>');
console.log(escaped instanceof TrustedHTML);  // true
el.innerHTML = escaped;  // '&amplt;img src=x onerror=alert(1)>'

Varsayılan bir politika kullan #

Bazen rahatsız edici kodu değiştiremezsiniz. Örneğin, bir CDN’den bir üçüncü taraf kitaplığı yüklüyorsanız durum budur. Bu durumda, bir varsayılan politika:

if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
trustedTypes.createPolicy('default', {
createHTML: (string, sink) => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true})
});
}

İsimli politika default yalnızca Güvenilir Türü kabul eden bir havuzda bir dizenin kullanıldığı her yerde kullanılır.

İçerik Güvenliği Politikasını uygulamaya geçin #

Uygulamanız artık ihlal üretmediğinde, Güvenilen Türleri uygulamaya başlayabilirsiniz:

Content-Security-Policy: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example

İşte! Artık, web uygulamanız ne kadar karmaşık olursa olsun, bir DOM XSS güvenlik açığı oluşturabilecek tek şey, politikalarınızdan birindeki koddur ve bunu şu şekilde daha da fazla kilitleyebilirsiniz: sınırlayıcı politika oluşturma.

daha fazla okuma #