Penapis wptexturize WordPress merosakkan JavaScript dalam talian secara senyap, menukarkan operator logik && kepada entiti HTML && dan merosakkan skrip yang berjalan di dalam shortcode.
Masalah ini timbul bagi seorang pembangun yang menyelenggara satu set shortcode kalkulator. Selepas berminggu-minggu beroperasi tanpa cacat cela, butang hantar berhenti berfungsi. Tiada amaran PHP, tiada ralat konsol, dan HTML yang diperiksa kelihatan bersih—sehinggalah sumber yang telah dirender mendedahkan if (!isNaN(bf) && bf > 0). Ralat sintaks tunggal tersebut menghalang keseluruhan blok skrip daripada dilaksanakan.
Mengapa penapis ini penting
WordPress memproses kandungan hantaran melalui siri penapis sebelum ia sampai ke pelayar. wptexturize adalah yang pertama daripada penapis tersebut; ia menukarkan petikan lurus kepada petikan tipografi melengkung, menggantikan berbilang sengkang dengan em-dash, dan membersihkan ampersand. Penapis ini mengandaikan ia sedang mengendalikan prosa, bukan kod. Apabila shortcode menyuntik tag <script> dalam talian, penapis tersebut tetap berjalan, melayan JavaScript sebagai teks biasa. Oleh itu, ampersand dalam && diubah kepada &, yang ditafsirkan oleh pelayar sebagai rentetan literal dan bukannya operator logik AND.
Pembangun yang menyematkan sebarang JavaScript secara terus dalam kandungan hantaran—kalkulator, pengesah borang, widget interaktif—adalah terdedah kepada risiko ini. Isu ini tidak terhad kepada kalkulator; sebarang skrip dalam talian yang menggunakan &&, &, atau aksara serupa boleh rosak. Oleh kerana transformasi berlaku di bahagian pelayan (server-side), pelayar tidak pernah melihat kod asal, dan ralat tersebut tidak muncul sebagai pengecualian JavaScript yang tipikal.
Siapa yang terjejas dan apa yang mereka rugi
- Pemilik laman web: kalkulator atau borang yang rosak boleh mengecewakan pelawat, meningkatkan kadar lantunan (bounce rates), dan menghakis kepercayaan.
- Pembangun: berjam-jam masa dihabiskan untuk memburu pepijat "hantu" yang tidak meninggalkan kesan dalam log atau output konsol.
- Editor kandungan: mungkin secara tidak sengaja merosakkan fungsi semasa menyunting halaman yang mengandungi shortcode.
Kosnya bukan sekadar masa; ia boleh diterjemahkan kepada kehilangan penukaran (conversions), terutamanya pada laman web yang bergantung kepada kalkulator tersuai untuk harga, anggaran pinjaman, atau penilaian kesihatan.
Apa yang dilakukan oleh penapis ini, dalam istilah mudah
- Mengesan petikan lurus – menggantikan
'dan"dengan versi tipografi 'pintar'. - Membersihkan ampersand – menukarkan
&kepada&melainkan ia sudah membentuk entiti HTML yang sah. - Digunakan pada keseluruhan rentetan kandungan – termasuk apa sahaja di dalam tag
<script>yang dijana oleh shortcode.
Apabila penapis menemui &&, ia melihat dua ampersand yang bukan sebahagian daripada entiti HTML sedia ada, jadi ia menukar setiap satu secara individu, menghasilkan &&.
Cara untuk menghentikan kerosakan
1. Matikan penapis untuk halaman yang mengandungi kod
add_action( 'template_redirect', function () {
if ( is_page() ) {
remove_filter( 'the_content', 'wptexturize' );
remove_filter( 'widget_text_content', 'wptexturize' );
}
} );
Keratan kod ini menyahaktifkan wptexturize hanya pada templat halaman, mengekalkan penambahbaikan tipografi untuk hantaran dan jenis kandungan lain. Ia juga membuang penapis daripada teks widget, yang boleh menjadi sumber sekunder bagi skrip dalam talian.
2. Tulis semula logik untuk mengelakkan &&
Jika membuang penapis tidak diingini, ubah suai (refactor) JavaScript supaya operator logik AND tidak diperlukan:
// Original
if (a && b) { … }
// Refactored
var ok = a;
if (ok) { ok = b; }
if (ok) { … }
Walaupun ini menambah beberapa baris tambahan, ia menghapuskan ampersand yang mencetuskan penapis tersebut. Pendekatan ini berfungsi untuk syarat yang mudah tetapi boleh menjadi sukar diuruskan untuk ekspresi yang kompleks.
3. Luarkan (Externalise) semua skrip
Penyelesaian yang paling teguh adalah dengan menggunakan enqueue untuk fail JavaScript dan bukannya menyematkan kod secara dalam talian:
wp_enqueue_script( 'my-calculator', get_template_directory_uri() . '/js/calculator.js', [], null, true );
Skrip yang di-enqueue memintas keseluruhan penapis the_content. Ia juga mendapat manfaat daripada pengecachean pelayar dan boleh dikecilkan (minified) atau digabungkan dengan aset lain.
Mengesan isu ini secara langsung
Apabila skrip berhenti berjalan tanpa ralat yang jelas, lihat sumber halaman (bukan pemeriksa DOM) dan cari &. Jika anda menemuinya di dalam blok <script>, penapis tersebut adalah puncanya. Masalah ini tidak akan muncul dalam konsol kerana pelayar tidak pernah menerima skrip yang sah dari segi sintaks untuk dianalisis.
Pandangan berbeza: mengapa mengekalkan wptexturize?
wptexturize meningkatkan kebolehbacaan pada bahagian hadapan (front-end). Petikan melengkung dan aksara sengkang yang betul memberikan rupa prosa yang kemas, dan ramai pemilik laman web menganggapnya sebagai ciri estetik yang tidak boleh dikompromi. Membuang penapis secara global akan mengembalikan teks ke keadaan asalnya yang ringkas dari segi tipografi.
Jalan penyelesaiannya adalah penonaktifan secara terpilih: matikan penapis hanya di tempat kod berada, atau gunakan shortcode tersuai yang menandakan outputnya secara eksplisit sebagai selamat daripada proses texturizing. WordPress sudah menyediakan wp_kses_post dan pembantu sanitasi yang lain; pembangun boleh menggabungkan fungsi tersebut dengan panggilan remove_filter untuk mendapatkan kelebihan daripada kedua-dua kaedah.
Apa yang perlu diperhatikan seterusnya
Teras WordPress belum mengumumkan sebarang perubahan kepada wptexturize yang akan mengecualikan tag <script> secara automatik. Sehingga perubahan sedemikian dilaksanakan, pembangun mesti melindungi kod inline mereka secara manual. Sentiasa perhatikan penjejak pembangunan teras untuk sebarang cadangan bagi menjadikan penapis tersebut peka konteks. Sementara itu, audit mana-mana shortcode atau elemen pembina halaman yang menyuntik JavaScript dan gunakan salah satu daripada tiga penyelesaian di atas.
Kesimpulannya: jika laman WordPress anda menjalankan JavaScript inline, pastikan wptexturize tidak menulis semula kod tersebut secara senyap. Satu simbol ampersand yang di-escape boleh menyebabkan keseluruhan ciri menjadi tidak berfungsi, dan penyelesaiannya biasanya hanyalah beberapa baris PHP atau beralih kepada skrip luaran.