Yayınlanma tarihi: 12 Haziran 2025
20 Mayıs 2025'te, HTML spesifikasyonu, özelliklerde < ve > karakterlerinden kaçacak şekilde güncellendi. Bu güncelleme, mutasyon XSS (mXSS) güvenlik açıklarının önlenmesine yardımcı oldu. Bu değişiklik, 28 Mayıs 2025'te Beta sürümüne yükseltilen ve 24 Haziran 2025'te kararlı sürüm olacak Chrome 138'de kullanıma sunuldu.
Bu yayında, HTML özelliğinin kaçma değişikliğinin web geliştiricileri üzerindeki etkisi ve olası kesintiler ayrıntılı olarak açıklanmaktadır. Bu değişikliğin güvenlikle ilgili gerekçesi, Güvenlik Mühendisliği blogundaki ilgili yayınımızda açıklanmıştır.
Değişiklikler
data-content özelliği "<u>hello</u>" değerine sahip bir <div> öğeniz olduğunu varsayalım. div.outerHTML dosyasını okuduğunuzda ne olur?
Geçmişte aşağıdaki HTML'yi alırdınız:
<div data-content="<u>hello</u>"></div>
Değişiklikten sonra aşağıdaki HTML'yi alırsınız:
<div data-content="<u>hello</u>"></div>
Daha önce, özelliklerde < veya > karakterleri için kaçış karakteri kullanılmıyordu. Bu karakterlerin ikisi de her zaman kaçılır.
Ne değişmedi?
Değişiklik, yalnızca serileştirme sırasında HTML parçalarının dize temsiline nasıl dönüştürüldüğünü değiştirir. Etki, innerHTML veya outerHTML özelliklerine erişilen veya bir öğede getHTML() yönteminin çağrıldığı senaryolarla sınırlıdır. Bu işlemler, mevcut DOM yapısını alır ve metin biçiminde bir HTML temsili oluşturur.
Bu değişiklik, HTML ayrıştırmayı etkilemez. Aşağıdaki HTML'yi ele alalım:
<div id="div1" data-content="<u>hello</u>"></div>
<div id="div2" data-content="<u>hello</u>"></div>
Her iki div da tam olarak aynı şekilde ayrıştırılır ve her iki durumda da div.dataset.content, "<u>hello</u>" değerini döndürür.
Hangi veriler silinmez?
Özellik değerlerini almak için getAttribute, getAttributeNS, dataset veya attributes gibi bir DOM API'si kullanıyorsanız bu API'ler, özellikle < ve > kodunun çözüldüğü durumlarda, öncekiyle aynı kod çözülmüş değerleri döndürür.
Tüm console.log satırlarının "<u>"'i günlüğe kaydedeceği aşağıdaki örneği inceleyin:
<div data-content="<u>"></div>
const div = document.querySelector("div");
// All of the following will log "<u>"
console.log(div.getAttribute("data-content"));
console.log(div.dataset.content);
console.log(div.attributes['data-content'].value);
Ne gibi sorunlar yaşanabilir?
Özellikleri almak için innerHTML ve outerHTML
Bir özelliğin değerini ayıklamak için innerHTML veya outerHTML kullanırsanız kodunuz bozulabilir. Biraz karmaşık olsa da aşağıdaki örneği inceleyin:
<div data-content="<u>"></div>
const div = document.querySelector("div");
const content = div.outerHTML.match(/"([^"]+)"/)[1];
console.log(content);
Bu kod, bu değişiklikten sonra farklı bir davranış sergileyecektir. Daha önce content, "<u>" değerine eşitti ancak şimdi "<u>" değerine eşit.
HTML'yi normal ifadelerle ayrıştırmanın önerilmez. Bir özelliğin değerini almanız gerekiyorsa önceki bölümlerde açıklanan DOM API'lerini kullanın.
Uçtan uca testler
HTML oluşturmak için Chromium'u kullandığınız bir CI/CD ardışık düzeniniz varsa ve HTML'yi statik bir beklenen değerle karşılaştırmak için testler yazdıysanız herhangi bir özellik < veya > içeriyorsa bu testler bozulabilir.
Bu, beklenen bir kesintidir. Beklenen değeri, tüm < ve > karakterlerinin sırasıyla < ve >, olarak kodlanacağı şekilde güncellemeniz gerekir.
Özet
Bu blog yayınında, HTML spesifikasyonunda yapılan bir değişiklik açıklanıyordu. Bu değişiklik, tarayıcılardaki bazı mutasyon XSS örneklerini önleyerek güvenliği artırmak için tarayıcılardaki özelliklerde < ve > karakterlerinden kaçınma işleminin başlatılmasına neden olacak.
Bu değişiklik, 24 Haziran 2025'te Chromium (138 sürümü) ve Firefox (140 sürümü) kullanıcılarının tamamı için geçerli olacaktır. Bu özellik, Eylül 2025'te yayınlanması planlanan Safari 26 Beta sürümüne de dahildir.
Bu değişikliğin web sitenizi bozduğunu düşünüyorsanız ve bu sorunu kolay bir şekilde çözemiyorsanız lütfen https://issues.chromium.org/ adresinden hata kaydı gönderin.