WordPress-ன் wptexturize filter, inline JavaScript-ஐ அமைதியாகச் சிதைக்கிறது; இது தர்க்கரீதியான (logical) && operator-ஐ HTML entity && ஆக மாற்றி, shortcodes-க்குள் இயங்கும் ஸ்கிரிப்ட்களைப் பாதிக்கிறது.

கால்குலேட்டர் shortcodes தொகுப்பைப் பராமரிக்கும் ஒரு டெவலப்பருக்கு இந்தச் சிக்கல் ஏற்பட்டது. வாரக்கணக்கில் எந்தத் தவறும் இன்றிச் செயல்பட்ட பிறகு, submit பட்டன்கள் வேலை செய்யாமல் போயின. PHP எச்சரிக்கைகளோ (warnings), console பிழைகளோ இல்லை, HTML-ஐச் சோதித்தபோது அது சரியாகத் தெரிந்தது—ஆனால், render செய்யப்பட்ட மூலக் குறியீட்டை (rendered source) சோதித்தபோது if (!isNaN(bf) && bf > 0) என்று இருந்தது தெரியவந்தது. அந்த ஒரு syntax பிழை முழு ஸ்கிரிப்ட் பிளாக்கையும் இயங்குவதைத் தடுத்தது.

இந்த filter ஏன் முக்கியமானது

WordPress, ஒரு பதிவின் உள்ளடக்கத்தை (post content) உலாவியின் (browser) কাছে கொண்டு செல்லும் முன், பல வகையான filters மூலம் செயலாக்குகிறது. wptexturize என்பது அந்த filters-ல் முதலாவதாகும்; இது நேரான மேற்கோள்களை (straight quotes) அழகான தட்டச்சு மேற்கோள்களாகவும் (typographic curly quotes), பலமுறை வரும் ஹைபன்களை (hyphens) em-dashes ஆகவும் மாற்றுகிறது, மேலும் ampersands-களைச் சுத்தப்படுத்துகிறது (sanitises). இந்த filter, தான் கையாளும் தரவு ஒரு உரை (prose) என்று கருதுகிறதே தவிர, குறியீடு (code) என்று கருதுவதில்லை. ஒரு shortcode-க்குள் inline <script> tag சேர்க்கப்படும்போது, இந்த filter இன்னும் இயங்குகிறது, மேலும் JavaScript-ஐ ஒரு சாதாரண உரையாகவே treats செய்கிறது. எனவே &&-ல் உள்ள ampersand, &#038; என மாற்றப்படுகிறது, இதை உலாவியானது தர்க்கரீதியான AND operator ஆகக் கருதாமல், ஒரு சாதாரண உரையாகவே (literal string) புரிந்துகொள்கிறது.

பதிவின் உள்ளடக்கத்தில் நேரடியாக JavaScript-ஐப் பயன்படுத்தும் டெவலப்பர்கள்—கால்குலேட்டர்கள், form validators, interactive widgets—இதன் பாதிப்புக்கு உள்ளாகிறார்கள். இந்தச் சிக்கல் கால்குலேட்டர்களுடன் மட்டும் நின்றுவிடுவதில்லை; &&, &, அல்லது அது போன்ற எழுத்துக்களைப் பயன்படுத்தும் எந்தவொரு inline script-ம் சிதைக்கப்படலாம். இந்த மாற்றம் server-side-ல் நடப்பதால், உலாவியானது அசல் குறியீட்டைப் பார்ப்பதே இல்லை, மேலும் இந்தத் தவறு வழக்கமான JavaScript exception ஆகத் தெரிவதும் இல்லை.

யார் பாதிக்கப்படுகிறார்கள் மற்றும் அவர்களுக்கு ஏற்படும் இழப்புகள் என்ன?

  • Site owners: ஒரு கால்குலேட்டர் அல்லது form வேலை செய்யாமல் போவது பார்வையாளர்களைக் கோபமடையச் செய்யும், bounce rates-ஐ அதிகரிக்கும் மற்றும் நம்பிக்கையைச் சிதைக்கும்.
  • Developers: logs அல்லது console output-ல் எந்தத் தடயமும் இல்லாத "ghost" bugs-களைத் தேடுவதிலேயே பல மணிநேரங்கள் வீணாகும்.
  • Content editors: shortcodes உள்ள பக்கங்களைத் திருத்தும்போது தெரியாமலேயே செயல்பாடுகளைச் சிதைக்கக்கூடும்.

இதன் இழப்பு வெறும் நேரம் மட்டுமல்ல; விலை நிர்ணயம், கடன் மதிப்பீடு அல்லது ஆரோக்கிய மதிப்பீடு போன்றவற்றுக்காகத் தனிப்பயனாக்கப்பட்ட (custom) கால்குலேட்டர்களைப் பயன்படுத்தும் தளங்களில், இது வருவாய் இழப்பிற்கு (lost conversions) வழிவகுக்கும்.

இந்த filter என்ன செய்கிறது, எளிமையான சொற்களில்

  1. நேரான மேற்கோள்களைக் கண்டறிகிறது – ' மற்றும் " ஆகியவற்றை ‘smart’ typographic பதிப்புகளாக மாற்றுகிறது.
  2. Ampersands-களைச் சுத்தப்படுத்துகிறது – அது ஏற்கனவே ஒரு சரியான HTML entity ஆக இல்லாவிட்டால், &-ஐ &amp; ஆக மாற்றுகிறது.
  3. முழு உள்ளடக்கத்திற்கும் பொருந்தும் – shortcodes மூலம் உருவாக்கப்படும் <script> tags-க்குள் இருக்கும் அனைத்தையும் இது உள்ளடக்கும்.

இந்த filter &&-ஐக் காணும்போது, அது ஏற்கனவே ஒரு HTML entity-ன் பகுதியாக இல்லாத இரண்டு ampersands-களைக் காண்பதினால், ஒவ்வொன்றையும் தனித்தனியாக &#038; என மாற்றுகிறது, இதன் விளைவாக &#038;&#038; கிடைக்கிறது.

சிதைவைத் தடுப்பது எப்படி

1. குறியீடு (code) உள்ள பக்கங்களுக்கு filter-ஐ அணைக்கவும்

add_action( 'template_redirect', function () {
    if ( is_page() ) {
        remove_filter( 'the_content', 'wptexturize' );
        remove_filter( 'widget_text_content', 'wptexturize' );
    }
} );

இந்த snippet, page templates-களில் மட்டும் wptexturize-ஐ முடக்குகிறது, இதனால் posts மற்றும் பிற உள்ளடக்க வகைகளுக்குத் தட்டச்சு மேம்பாடுகள் (typographic improvements) அப்படியே இருக்கும். மேலும், இது widget text-லிருந்தும் filter-ஐ நீக்குகிறது, ஏனெனில் அதுவும் inline scripts-களின் ஒரு முக்கிய ஆதாரமாக இருக்கலாம்.

2. &&-ஐத் தவிர்க்க தர்க்கத்தை (logic) மாற்றி எழுதவும்

filter-ஐ நீக்குவது விரும்பத்தக்கதாக இல்லையென்றால், தர்க்கரீதியான AND operator தேவையில்லாதவாறு JavaScript-ஐ மாற்றி அமைக்கவும் (refactor):

// Original
if (a && b) { … }

// Refactored
var ok = a;
if (ok) { ok = b; }
if (ok) { … }

இது சில கூடுதல் வரிகளைச் சேர்த்தாலும், filter-ஐத் தூண்டும் ampersand-ஐ இது நீக்கிவிடுகிறது. இந்த அணுகுமுறை எளிய நிபந்தனைகளுக்கு (simple conditions) வேலை செய்யும், ஆனால் சிக்கலான வெளிப்பாடுகளுக்கு (complex expressions) கடினமாக இருக்கலாம்.

3. அனைத்து ஸ்கிரிப்ட்களையும் வெளிப்புறமாக்கவும் (Externalise)

குறியீட்டை inline-ஆகச் சேர்ப்பதற்குப் பதிலாக, JavaScript கோப்புகளை enqueue செய்வதே மிகவும் உறுதியான தீர்வாகும்:

wp_enqueue_script( 'my-calculator', get_template_directory_uri() . '/js/calculator.js', [], null, true );

Enqueued ஸ்கிரிப்ட்கள் the_content filters-களை முழுமையாகத் தவிர்க்கின்றன. மேலும், அவை browser caching-ன் பலனைப் பெறுகின்றன மற்றும் minified அல்லது பிற assets-களுடன் இணைக்கப்படலாம் (bundled).

நடைமுறையில் இந்தப் பிரச்சனையை எவ்வாறு கண்டறிவது?

ஒரு ஸ்கிரிப்ட் எந்தத் தெளிவான பிழையும் இன்றி இயங்குவதை நிறுத்தினால், page source-ஐப் பார்க்கவும் (DOM inspector அல்ல) மற்றும் &#038;-ஐத் தேடவும். ஒரு <script> பிளாக்கிற்குள் இதைக் கண்டால், இந்த filter தான் குற்றவாளி. உலாவியானது parse செய்வதற்குத் தகுந்த syntax கொண்ட ஸ்கிரிப்டைப் பெறுவதே இல்லை என்பதால், இந்தப் பிரச்சனை console-ல் தெரியாது.

மாற்றுக்கருத்து: ஏன் wptexturize-ஐத் தக்கவைக்க வேண்டும்?

wptexturize முன்முனைத் திரையில் (front end) வாசிப்புத் திறனை மேம்படுத்துகிறது. Curly quotes மற்றும் சரியான dash எழுத்துக்கள் உரைக்கு ஒரு நேர்த்தியான தோற்றத்தைத் தருகின்றன, மேலும் பல தள உரிமையாளர்கள் இதை ஒரு தவிர்க்க முடியாத அழகியல் அம்சமாகக் கருதுகிறார்கள். இந்த filter-ஐ உலகளாவிய ரீதியில் (globally) நீக்குவது, உரையை அதன் மூலமான, தட்டச்சு ரீதியாகச் சாதாரண நிலைக்குத் திருப்பிவிடும்.

தேர்ந்தெடுக்கப்பட்ட முறையில் முடக்குவதே இதற்கான சமரசமான தீர்வாகும்: குறியீடு (code) இருக்கும் இடங்களில் மட்டும் filter-ஐ முடக்குங்கள், அல்லது அதன் வெளியீட்டை texturizing-லிருந்து பாதுகாப்பானது என்று தெளிவாகக் குறிப்பிடும் ஒரு தனிப்பயன் (custom) shortcode-ஐப் பயன்படுத்துங்கள். WordPress ஏற்கனவே wp_kses_post மற்றும் பிற sanitisation உதவியாளர்களை வழங்குகிறது; டெவலப்பர்கள் இரண்டின் நன்மைகளையும் பெற அவற்றை remove_filter அழைப்புகளுடன் இணைக்கலாம்.

அடுத்து கவனிக்க வேண்டியவை

WordPress core, <script> tags-களைத் தானாகவே விலக்குவதற்கு wptexturize-இல் ஏதேனும் மாற்றத்தைச் செய்யப்போவதாக அறிவிக்கவில்லை. அத்தகைய மாற்றம் வரும் வரை, டெவலப்பர்கள் தங்களின் inline code-களைக் கைமுறையாகப் பாதுகாக்க வேண்டும். filter-ஐ context-aware ஆக மாற்றுவதற்கான ஏதேனும் முன்மொழிவுகள் (proposals) குறித்து core development tracker-ஐக் கவனித்துக் கொண்டே இருங்கள். இதற்கிடையில், JavaScript-ஐச் சேர்க்கும் (injects) எந்தவொரு shortcode அல்லது page builder உறுப்பையும் ஆய்வு செய்து, மேலே உள்ள மூன்று தீர்வுகளில் ஒன்றைப் பயன்படுத்துங்கள்.

முக்கியமாக: உங்கள் WordPress தளம் inline JavaScript-ஐப் பயன்படுத்தினால், wptexturize அதைத் தெரியாமல் மாற்றி எழுதுகிறதா என்பதைச் சரிபார்க்கவும். ஒரு சிறிய escaped ampersand கூட ஒரு முழு அம்சத்தையும் செயலிழக்கச் செய்துவிடும்; இதற்கான தீர்வு பொதுவாகச் சில வரிகள் PHP அல்லது வெளிப்புற ஸ்கிரிப்ட்களுக்கு (external scripts) மாறுவதாகும்.