Kaydol

Merhaba Sevgili Floodlar.com Kullanıcısı, Web sitemizde geçirdiğiniz zaman ve bu büyüleyici flood evrenine katılımınız için teşekkür ederiz. Floodların geniş dünyasıyla dolu deneyiminizi daha fazla keşfetmek için, web sitemizi sınırsız olarak kullanabilmeniz adına giriş yapmanız gerekmektedir.

Oturum aç

Merhaba Floodlar.com Kullanıcısı, İlk üç sayfayı tamamladınız, tebrikler! Ancak, floodların devamını görmek ve daha fazla interaktif deneyim yaşamak için giriş yapmanız gerekiyor. Hesabınız yoksa, hızlıca oluşturabilirsiniz. Sınırsız floodlar ve etkileşimler sizleri bekliyor. Giriş yapmayı unutmayın!

Şifremi hatırlamıyorum

Şifreniz mi unuttunuz? Endişelenmeyin! Lütfen kayıtlı e-posta adresinizi giriniz. Size bir bağlantı göndereceğiz ve bu link üzerinden yeni bir şifre oluşturabileceksiniz.

Fil Necati Masonlar Locası Subreddit Adı Nedir? Cevap: ( N31 )

Üzgünüz, flood girme izniniz yok, Flood girmek için giriş yapmalısınız.

Lütfen bu Floodun neden bildirilmesi gerektiğini düşündüğünüzü kısaca açıklayın.

Lütfen bu cevabın neden bildirilmesi gerektiğini kısaca açıklayın.

Lütfen bu kullanıcının neden rapor edilmesi gerektiğini düşündüğünüzü kısaca açıklayın.

Mobil Uygulamada Açın

Güncel Floodlar En sonuncu Nesne

Sanitizer API ile Güvenli DOM manipülasyonu

Sanitizer API ile Güvenli DOM manipülasyonu

Uygulamalar her zaman güvenilmeyen dizelerle uğraşır, ancak bu içeriği bir HTML belgesinin parçası olarak güvenli bir şekilde oluşturmak zor olabilir. Yeterli özen gösterilmeden, kazara yeni fırsatlar yaratmak kolaydır. siteler arası komut dosyası çalıştırma (XSS) kötü niyetli saldırganların yararlanabileceği.

Bu riski azaltmak için yeni Temizleyici API’sı öneri, rastgele dizelerin bir sayfaya güvenli bir şekilde eklenmesi için sağlam bir işlemci oluşturmayı amaçlar. Bu makale API’yi tanıtır ve kullanımını açıklar.

// Expanded Safely !!
$div.setHTML(`&LTem>hello world&LT/em>&LTimg src="" onerror=alert(0)>`, new Sanitizer())

Kaçan kullanıcı girişi #

Kullanıcı girişi, sorgu dizeleri, çerez içerikleri vb. DOM manipülasyonuna özellikle dikkat edilmelidir. .innerHTMLburada çıkış yapılmamış dizeler tipik bir XSS kaynağıdır.

const user_input = `&LTem>hello world&LT/em>&LTimg src="" onerror=alert(0)>`
$div.innerHTML = user_input

Yukarıdaki giriş dizesinde HTML özel karakterlerinden kaçarsanız veya kullanarak genişletirseniz .textContent, alert(0) idam edilmeyecektir. Ancak, beri &LTem> kullanıcı tarafından eklenen aynı zamanda olduğu gibi bir dizi olarak genişletildiğinden, HTML’deki metin süslemesini korumak için bu yöntem kullanılamaz.

Burada yapılacak en iyi şey kaçmakAncak dezenfekte etme.

Kullanıcı girişi temizleniyor #

Kaçmak ve sterilize etmek arasındaki fark #

Kaçma, özel HTML karakterlerini aşağıdakilerle değiştirmek anlamına gelir HTML Varlıkları.

Temizleme, anlamsal olarak zararlı bölümlerin (komut dosyası yürütme gibi) HTML dizelerinden kaldırılması anlamına gelir.

Örnek #

Bir önceki örnekte, &LTimg onerror> hata işleyicinin yürütülmesine neden olur, ancak onerror işleyici kaldırıldı, DOM’dan çıkarken güvenli bir şekilde genişletmek mümkün olacaktır. &LTem> bozulmamış.

// XSS 🧨
$div.innerHTML = `&LTem>hello world&LT/em>&LTimg src="" onerror=alert(0)>`
// Sanitized ⛑
$div.innerHTML = `&LTem>hello world&LT/em>&LTimg src="">`

Doğru şekilde sterilize etmek için giriş dizesini HTML olarak ayrıştırmak, zararlı olduğu düşünülen etiketleri ve nitelikleri çıkarmak ve zararsız olanları tutmak gerekir.

bu önerilen Temizleyici API spesifikasyonu tarayıcılar için standart bir API olarak bu tür işlemleri sağlamayı amaçlamaktadır.

Temizleyici API’sı #

bu Temizleyici API’sı şu şekilde kullanılır:

const $div = document.querySelector('div')
const user_input = `&LTem>hello world&LT/em>&LTimg src="" onerror=alert(0)>`
$div.setHTML(user_input, { sanitizer: new Sanitizer() }) // &LTdiv>&LTem>hello world&LT/em>&LTimg src="">&LT/div>

Ancak { sanitizer: new Sanitizer() } varsayılan bağımsız değişkendir. Yani aşağıdaki gibi olabilir.

$div.setHTML(user_input) // &LTdiv>&LTem>hello world&LT/em>&LTimg src="">&LT/div>

şunu belirtmekte fayda var setHTML() üzerinde tanımlanır Element. yöntemi olup Elementayrıştırılacak bağlam kendiliğinden açıklayıcıdır (&LTdiv> bu durumda), ayrıştırma dahili olarak bir kez yapılır ve sonuç doğrudan DOM’a genişletilir.

Sanitasyon sonucunu bir dizi olarak almak için şunu kullanabilirsiniz: .innerHTML dan setHTML() sonuçlar.

const $div = document.createElement('div')
$div.setHTML(user_input)
$div.innerHTML // &LTem>hello world&LT/em>&LTimg src="">

Yapılandırma yoluyla özelleştirin #

Sanitizer API, komut dosyasının yürütülmesini tetikleyecek dizeleri kaldırmak için varsayılan olarak yapılandırılmıştır. Ancak, bir yapılandırma nesnesi aracılığıyla temizleme işlemine kendi özelleştirmelerinizi de ekleyebilirsiniz.

const config = {
allowElements: [],
blockElements: [],
dropElements: [],
allowAttributes: {},
dropAttributes: {},
allowCustomElements: true,
allowComments: true
};
// sanitized result is customized by configuration
new Sanitizer(config)

Aşağıdaki seçenekler, temizleme sonucunun belirtilen öğeyi nasıl işlemesi gerektiğini belirtir.

allowElements: Dezenfektanın tutması gereken öğelerin adları.

blockElements: Dezenfektanın çocuklarını tutarken çıkarması gereken öğelerin adları.

dropElements: Temizleyicinin kaldırması gereken öğelerin adları ve bunların çocukları.

const str = `hello &LTb>&LTi>world&LT/i>&LT/b>`

$div.setHTML(str)
// &LTdiv>hello &LTb>&LTi>world&LT/i>&LT/b>&LT/div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowElements: [ "b" ]}) })
// &LTdiv>hello &LTb>world&LT/b>&LT/div>

$div.setHTML(str, { sanitizer: new Sanitizer({blockElements: [ "b" ]}) })
// &LTdiv>hello &LTi>world&LT/i>&LT/div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowElements: []}) })
// &LTdiv>hello world&LT/div>

Dezenfektanın belirtilen özelliklere izin verip vermeyeceğini aşağıdaki seçeneklerle de kontrol edebilirsiniz:

  • allowAttributes
  • dropAttributes

allowAttributes Ve dropAttributes özellikler bekleniyor öznitelik eşleştirme listeleri—anahtarları öznitelik adları olan ve değerleri hedef öğelerin veya * joker karakter.

const str = `&LTspan id=foo class=bar style="color: red">hello&LT/span>`

$div.setHTML(str)
// &LTdiv>&LTspan id="foo" class="bar" style="color: red">hello&LT/span>&LT/div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {"style": ["span"]}}) })
// &LTdiv>&LTspan style="color: red">hello&LT/span>&LT/div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {"style": ["p"]}}) })
// &LTdiv>&LTspan>hello&LT/span>&LT/div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {"style": ["*"]}}) })
// &LTdiv>&LTspan style="color: red">hello&LT/span>&LT/div>

$div.setHTML(str, { sanitizer: new Sanitizer({dropAttributes: {"id": ["span"]}}) })
// &LTdiv>&LTspan class="bar" style="color: red">hello&LT/span>&LT/div>

$div.setHTML(str, { sanitizer: new Sanitizer({allowAttributes: {}}) })
// &LTdiv>hello&LT/div>

allowCustomElements özel öğelere izin verme veya reddetme seçeneğidir. İzin verilirse, öğeler ve nitelikler için diğer yapılandırmalar geçerli olmaya devam eder.

const str = `&LTcustom-elem>hello&LT/custom-elem>`

$div.setHTML(str)
// &LTdiv>&LT/div>

const sanitizer = new Sanitizer({
allowCustomElements: true,
allowElements: ["div", "custom-elem"]
})
$div.setHTML(str, { sanitizer })
// &LTdiv>&LTcustom-elem>hello&LT/custom-elem>&LT/div>

API yüzeyi #

DomPurify ile Karşılaştırma #

DOMPurify temizleme işlevi sunan iyi bilinen bir kitaplıktır. Sanitizer API ve DOMPurify arasındaki temel fark, DOMPurify’ın temizleme işleminin sonucunu bir DOM öğesine yazmanız gereken bir dize olarak döndürmesidir. .innerHTML.

const user_input = `&LTem>hello world&LT/em>&LTimg src="" onerror=alert(0)>`
const sanitized = DOMPurify.sanitize(user_input)
$div.innerHTML = sanitized
// `&LTem>hello world&LT/em>&LTimg src="">`

DOMPurify, tarayıcıda Sanitizer API uygulanmadığında bir geri dönüş işlevi görebilir.

DOMPurify uygulamasının birkaç dezavantajı vardır. Bir dize döndürülürse, giriş dizesi DOMPurify tarafından iki kez ayrıştırılır ve .innerHTML. Bu çift ayrıştırma işlem süresini boşa harcar, ancak ikinci ayrıştırmanın sonucunun birinciden farklı olduğu durumlardan kaynaklanan ilginç güvenlik açıklarına da yol açabilir.

HTML’nin de ihtiyacı var bağlam ayrıştırılacak. Örneğin, &LTtd> mantıklı &LTtable>ama içinde değil &LTdiv>. O zamandan beri DOMPurify.sanitize() argüman olarak yalnızca bir dize alır, ayrıştırma bağlamının tahmin edilmesi gerekir.

İlgili Mesajlar

Yorum eklemek için giriş yapmalısınız.