Tetapkan input yang tidak dipercayai dengan selamat kepada sifat tersuai CSS tanpa JavaScript: Panduan

Question

Andaikan saya mempunyai objek kunci rentetan dan nilai rentetan, dan saya mahu menulisnya sebagai sifat tersuai CSS ke dalam beberapa HTML yang dijana pelayan. Bagaimanakah saya boleh melakukan ini dengan selamat?

Apa yang saya maksudkan dengan keselamatan

• Jika boleh, pengisytiharan sifat tersuai seharusnya tidak menyebabkan ralat sintaks CSS, menghalang penyemak imbas daripada menghuraikan dengan betul pengisytiharan gaya lain atau bahagian dokumen HTML. Jika atas sebab tertentu ini tidak boleh dilakukan, pasangan nilai kunci harus diabaikan.
• Lebih penting lagi, ini sepatutnya menjadikan skrip merentas tapak menjadi mustahil.

Untuk memudahkan, saya akan mengehadkan kekunci untuk membenarkan aksara sahaja dalam kelas [a-zA-Z0-9_-].

Daripada membaca spesifikasi CSS dan beberapa ujian peribadi, saya rasa anda boleh membuat banyak kemajuan mendapatkan nilai dengan mengikuti langkah berikut:

• Cari rentetan
• Pastikan setiap petikan diikuti oleh petikan lain (tidak terlepas) daripada jenis yang sama (" atau '). Jika ini tidak berlaku, buang pasangan kunci/nilai ini.
• Pastikan setiap pendakap bukaan {([字符串外部的 di luar rentetan mempunyai pendakap penutup yang sepadan. Jika tidak, buang pasangan nilai kunci ini.
• Gunakan semua contoh 3C 转义 < 的所有实例，以及使用 3E 转义 >.
• Gunakan semua contoh 3B 对 ; untuk melarikan diri.

Saya membuat langkah di atas berdasarkan spesifikasi sintaks CSS ini

Untuk konteks, sifat ini boleh digunakan oleh gaya yang ditentukan pengguna yang kami sisipkan di tempat lain, tetapi objek yang sama juga digunakan sebagai data templat dalam templat, jadi ia mungkin mengandungi campuran rentetan yang dimaksudkan sebagai kandungan dan rentetan yang dijangkakan sebagai pembolehubah CSS . Saya rasa algoritma di atas mencapai keseimbangan yang baik kerana menjadi sangat mudah tanpa menghadapi risiko membuang terlalu banyak pasangan nilai kunci yang mungkin berguna dalam CSS (malah membenarkan penambahan CSS pada masa hadapan, tetapi saya ingin memastikan saya tidak 't Rindu sesuatu

---

Berikut ialah beberapa kod JS yang menunjukkan perkara yang saya ingin capai. obj 是有问题的对象，而 preprocessPairs ialah fungsi yang mengambil objek dan memprosesnya terlebih dahulu, mengalih keluar/memformat semula nilai seperti yang diterangkan dalam langkah di atas.

function generateThemePropertiesTag(obj) {
  obj = preprocessPairs(obj);
  return `<style>
:root {
${Object.entries(obj).map(([key, value]) => {
  return `--theme-${key}: ${value};`
}).join("\n")}
}
</style>`
}

Jadi bila diberi objek seperti ini

{
  "color": "#D3A",
  "title": "The quick brown fox"
}

Saya mahu CSS kelihatan seperti ini:

:root {
--theme-color: #D3A;
--theme-title: The quick brown fox;
}

Walaupun --theme-title ialah pembolehubah tersuai yang tidak berguna apabila digunakan dalam CSS, ia sebenarnya tidak memecahkan lembaran gaya kerana CSS mengabaikan sifat yang tidak difahaminya.

Answer 1

Kami sebenarnya mungkin hanya menggunakan ungkapan biasa dan beberapa algoritma lain tanpa perlu bergantung pada bahasa tertentu, mudah-mudahan itulah yang anda perlukan.

Dengan mengisytiharkan bahawa kunci objek berada di dalam [a-zA-Z0-9_-] kita perlu menghuraikan nilai entah bagaimana.

Model Nilai

Jadi kita boleh memecahkannya ke dalam kategori dan melihat perkara yang kita temui (ia mungkin dipermudahkan sedikit untuk kejelasan):

1. '.*' (rentetan yang dikelilingi oleh tanda kutip; tamak)
2. ".*" (Rentetan yang disertakan dalam petikan berganda; tamak)
3. [+-]?d+(.d+)?(%|[A-z]+)? (integer dan perpuluhan, peratusan pilihan atau dengan unit)
4. #[0-9A-f]{3,6}(warna)
5. [A-z0-9_-]+ (Kata kunci, menamakan warna, "mudah masuk", dll.)
6. ([w-]+)([^)]+) （类似 url()、calc() fungsi > dsb.)

Penapis pertama

Saya boleh bayangkan anda boleh melakukan beberapa penapisan sebelum cuba mengenal pasti corak ini. Mungkin kita memangkas rentetan nilai dahulu. Seperti yang anda nyatakan, < 和 > 可以在 preprocessPairs() terlepas pada permulaan fungsi kerana ia tidak akan muncul seperti mana-mana corak yang kami ada di atas. Jika anda tidak mahu koma bertitik yang tidak dilepaskan muncul di mana-mana, anda juga boleh melarikan diri daripadanya.

Corak pengecaman

Kita kemudian boleh cuba mengenal pasti corak ini dalam nilai, dan untuk setiap corak kita mungkin perlu menjalankan penapisan sekali lagi. Kami menjangkakan corak ini akan dipisahkan oleh beberapa (atau dua) aksara ruang putih.

Tidak mengapa untuk menyertakan sokongan untuk rentetan berbilang baris, yang merupakan baris baharu yang terlepas.

Tempatan

Kita perlu sedar bahawa kita mempunyai sekurang-kurangnya dua konteks untuk ditapis - HTML dan CSS. Apabila kita berada dalam atribut