WordPressનું wptexturize ફિલ્ટર ઇનલાઇન JavaScript ને ચુપચાપ બગાડી રહ્યું છે, જે લોજિકલ && ઓપરેટરને HTML એન્ટિટી && માં ફેરવી નાખે છે અને શોર્ટકોડ્સની અંદર ચાલતા સ્ક્રિપ્ટ્સને તોડી નાખે છે.
આ સમસ્યા એક ડેવલપર માટે સામે આવી જે કેલ્ક્યુલેટર શોર્ટકોડ્સનો સેટ મેન્ટેન કરે છે. અઠવાડિયા સુધી કોઈપણ ખામી વગર કામ કર્યા પછી, સબમિટ બટનોએ પ્રતિસાદ આપવાનું બંધ કરી દીધું. કોઈ PHP વોર્નિંગ્સ નહીં, કોઈ કન્સોલ એરર્સ નહીં, અને ઇન્સ્પેક્ટ કરેલ HTML પણ સાફ દેખાતું હતું—જ્યાં સુધી રેન્ડર્ડ સોર્સમાં if (!isNaN(bf) && bf > 0) જોવા ન મળ્યું. આ એક સિંગલ સિન્ટેક્સ એરરને કારણે આખું સ્ક્રિપ્ટ બ્લોક એક્ઝિક્યુટ થતું અટકી ગયું.
આ ફિલ્ટર શા માટે મહત્વનું છે
WordPress બ્રાઉઝર સુધી પહોંચતા પહેલા પોસ્ટ કન્ટેન્ટને ફિલ્ટર્સની એક શ્રેણી દ્વારા પ્રોસેસ કરે છે. wptexturize તે ફિલ્ટર્સમાં પ્રથમ છે; તે સ્ટ્રેટ ક્વોટ્સને ટાઇપોગ્રાફિક કરલી ક્વોટ્સમાં ફેરવે છે, મલ્ટીપલ હાઇફન્સને em-dashes સાથે બદલે છે, અને એમ્પરસેન્ડ્સને સેનિટાઇઝ કરે છે. આ ફિલ્ટર એવું માની લે છે કે તે ગદ્ય (prose) સાથે કામ કરી રહ્યું છે, કોડ સાથે નહીં. જ્યારે કોઈ શોર્ટકોડ ઇનલાઇન <script> ટેગ ઇન્જેક્ટ કરે છે, ત્યારે ફિલ્ટર હજુ પણ ચાલે છે, અને JavaScript ને સામાન્ય ટેક્સ્ટ તરીકે ગણે છે. તેથી && માં રહેલા એમ્પરસેન્ડને & તરીકે એસ્કેપ કરવામાં આવે છે, જેને બ્રાઉઝર લોજિકલ AND ઓપરેટરને બદલે લિટરલ સ્ટ્રિંગ તરીકે સમજે છે.
જે ડેવલપર્સ પોસ્ટ કન્ટેન્ટમાં સીધું જ કોઈપણ JavaScript એમ્બેડ કરે છે—જેમ કે કેલ્ક્યુલેટર્સ, ફોર્મ વેલિડેટર્સ, ઇન્ટરેક્ટિવ વિજેટ્સ—તેઓ આ સમસ્યાથી પ્રભાવિત થઈ શકે છે. આ સમસ્યા માત્ર કેલ્ક્યુલેટર્સ પૂરતી મર્યાદિત નથી; કોઈપણ ઇનલાઇન સ્ક્રિપ્ટ જે &&, &, અથવા સમાન કેરેક્ટર્સનો ઉપયોગ કરે છે તે બગડી શકે છે. કારણ કે આ પરિવર્તન સર્વર-સાઇડ પર થાય છે, બ્રાઉઝર ક્યારેય મૂળ કોડ જોઈ શકતું નથી, અને આ ભૂલ સામાન્ય JavaScript એક્સેપ્શન તરીકે દેખાતી નથી.
કોણ પ્રભાવિત થાય છે અને તેઓ શું ગુમાવે છે
- સાઇટ માલિકો: બગડેલું કેલ્ક્યુલેટર અથવા ફોર્મ મુલાકાતીઓને નિરાશ કરી શકે છે, બાઉન્સ રેટ વધારી શકે છે અને વિશ્વાસ ઘટાડી શકે છે.
- ડેવલપર્સ: લોગ્સ અથવા કન્સોલ આઉટપુટમાં કોઈ નિશાન છોડતા ન હોય તેવા “ગોસ્ટ” (ghost) બગ્સ શોધવામાં કલાકો બરબાદ થાય છે.
- કન્ટેન્ટ એડિટર્સ: શોર્ટકોડ્સ ધરાવતા પેજ એડિટ કરતી વખતે અજાણતામાં કાર્યક્ષમતા બગાડી શકે છે.
આ માત્ર સમયનો જ ખર્ચ નથી; તે કન્વર્ઝન ગુમાવવા તરફ દોરી શકે છે, ખાસ કરીને એવી સાઇટ્સ પર જે કિંમત, લોન અંદાજ અથવા સ્વાસ્થ્ય મૂલ્યાંકન માટે કસ્ટમ કેલ્ક્યુલેટર્સ પર આધાર રાખે છે.
ફિલ્ટર શું કરે છે, સરળ શબ્દોમાં
- સ્ટ્રેટ ક્વોટ્સ શોધે છે –
'અને"ને ‘સ્માર્ટ’ ટાઇપોગ્રાફિક વર્ઝન સાથે બદલે છે. - એમ્પરસેન્ડ્સ ક્લીન કરે છે –
&ને&માં ફેરવે છે, સિવાય કે તે પહેલેથી જ માન્ય HTML એન્ટિટી બનાવતું હોય. - સમગ્ર કન્ટેન્ટ સ્ટ્રિંગ પર લાગુ થાય છે – જેમાં શોર્ટકોડ્સ દ્વારા જનરેટ કરવામાં આવેલા
<script>ટેગ્સની અંદરની કોઈપણ વસ્તુનો સમાવેશ થાય છે.
જ્યારે ફિલ્ટર && ને મળે છે, ત્યારે તે બે એમ્પરસેન્ડ જુએ છે જે હાલની HTML એન્ટિટીનો ભાગ નથી, તેથી તે દરેકને વ્યક્તિગત રીતે એસ્કેપ કરે છે, જેના પરિણામે && મળે છે.
બગાડ કેવી રીતે રોકવો
1. કોડ ધરાવતા પેજ માટે ફિલ્ટર બંધ કરો
add_action( 'template_redirect', function () {
if ( is_page() ) {
remove_filter( 'the_content', 'wptexturize' );
remove_filter( 'widget_text_content', 'wptexturize' );
}
} );
આ સ્નિપેટ માત્ર પેજ ટેમ્પલેટ્સ પર wptexturize ને ડિસેબલ કરે છે, પોસ્ટ્સ અને અન્ય કન્ટેન્ટ પ્રકારો માટે ટાઇપોગ્રાફિક સુધારાઓ જાળવી રાખે છે. તે વિજેટ ટેક્સ્ટમાંથી પણ ફિલ્ટર દૂર કરે છે, જે ઇનલાઇન સ્ક્રિપ્ટ્સનો ગૌણ સ્ત્રોત હોઈ શકે છે.
2. && ટાળવા માટે લોજિક ફરીથી લખો
જો ફિલ્ટર દૂર કરવું ઇચ્છનીય ન હોય, તો JavaScript ને રિફેક્ટર કરો જેથી લોજિકલ AND ઓપરેટરની જરૂર ન પડે:
// Original
if (a && b) { … }
// Refactored
var ok = a;
if (ok) { ok = b; }
if (ok) { … }
જોકે આનાથી થોડી વધારાની લાઇન ઉમેરાશે, પરંતુ તે એમ્પરસેન્ડને દૂર કરે છે જે ફિલ્ટરને ટ્રિગર કરે છે. આ અભિગમ સરળ શરતો માટે કામ કરે છે પરંતુ જટિલ એક્સપ્રેશન્સ માટે અઘરું બની શકે છે.
3. બધી સ્ક્રિપ્ટ્સને એક્સટર્નલાઇઝ કરો
સૌથી મજબૂત ઉકેલ ઇનલાઇન કોડ એમ્બેડ કરવાને બદલે JavaScript ફાઇલોને એન્ક્યુ (enqueue) કરવાનો છે:
wp_enqueue_script( 'my-calculator', get_template_directory_uri() . '/js/calculator.js', [], null, true );
એન્ક્યુ કરેલી સ્ક્રિપ્ટ્સ the_content ફિલ્ટર્સને સંપૂર્ણપણે બાયપાસ કરે છે. તેમને બ્રાઉઝર કેશિંગનો પણ લાભ મળે છે અને તેમને મિનિફાઇ અથવા અન્ય એસેટ્સ સાથે બંડલ કરી શકાય છે.
વાસ્તવિક પરિસ્થિતિમાં સમસ્યા શોધવી
જ્યારે કોઈ સ્ક્રિપ્ટ સ્પષ્ટ ભૂલો વગર ચાલવાનું બંધ કરી દે, ત્યારે પેજ સોર્સ જુઓ (DOM ઇન્સ્પેક્ટર નહીં) અને & માટે સર્ચ કરો. જો તમને તે <script> બ્લોકની અંદર મળે, તો ફિલ્ટર જ આનું કારણ છે. આ સમસ્યા કન્સોલમાં દેખાશે નહીં કારણ કે બ્રાઉઝરને પાર્સ કરવા માટે ક્યારેય સિન્ટેક્ટિકલી માન્ય સ્ક્રિપ્ટ મળતી નથી.
બીજો પક્ષ: wptexturize શા માટે રાખવું?
wptexturize ફ્રન્ટ એન્ડ પર વાંચનક્ષમતામાં સુધારો કરે છે. કરલી ક્વોટ્સ અને યોગ્ય ડેશ કેરેક્ટર્સ ગદ્યને એક પોલિશ્ડ લુક આપે છે, અને ઘણા સાઇટ માલિકો તેને અનિવાર્ય સૌંદર્યલક્ષી (aesthetic) ફીચર માને છે. ફિલ્ટરને વૈશ્વિક સ્તરે (globally) દૂર કરવાથી ટેક્સ્ટ તેના કાચા અને ટાઇપોગ્રાફિકલી સાદા સ્વરૂપમાં પાછું જતું રહેશે.
આ માટેનું સમાધાન પસંદગીયુક્ત રીતે નિષ્ક્રિય કરવું છે: જ્યાં કોડ હોય ત્યાં જ ફિલ્ટર બંધ કરો, અથવા કસ્ટમ શોર્ટકોડનો ઉપયોગ કરો જે તેના આઉટપુટને ટેક્સચરાઈઝિંગથી સુરક્ષિત હોવા તરીકે સ્પષ્ટપણે માર્ક કરે. WordPress પહેલેથી જ wp_kses_post અને અન્ય સેનિટાઈઝેશન હેલ્પર્સ પ્રદાન કરે છે; ડેવલપર્સ બંનેના ફાયદા મેળવવા માટે તેને remove_filter કોલ્સ સાથે જોડી શકે છે.
આગળ શું ધ્યાન રાખવું
WordPress core એ wptexturize માં એવા કોઈ ફેરફારની જાહેરાત કરી નથી જે આપમેળે <script> ટેગ્સને મુક્તિ આપે. જ્યાં સુધી આવો ફેરફાર ન આવે ત્યાં સુધી, ડેવલપર્સે તેમના ઇનલાઇન કોડનું મેન્યુઅલી રક્ષણ કરવું પડશે. ફિલ્ટરને સંદર્ભ-જાગૃત (context-aware) બનાવવા માટેના કોઈપણ પ્રસ્તાવો માટે કોર ડેવલપમેન્ટ ટ્રેકર પર નજર રાખો. તે દરમિયાન, જે શોર્ટકોડ અથવા પેજ બિલ્ડર એલિમેન્ટ JavaScript ઇન્જેક્ટ કરે છે તેનું ઓડિટ કરો અને ઉપરના ત્રણમાંથી કોઈ એક સુધારો લાગુ કરો.
ટૂંકમાં: જો તમારી WordPress સાઇટ ઇનલાઇન JavaScript ચલાવે છે, તો ખાતરી કરો કે wptexturize તેને છૂપી રીતે ફરીથી લખી રહ્યું નથી. એક સિંગલ એસ્કેપ કરેલ એમ્પરસેન્ડ (escaped ampersand) આખી સુવિધાને નિષ્ક્રિય કરી શકે છે, અને તેનો ઉપાય સામાન્ય રીતે PHP ની થોડી લાઇન અથવા એક્સટર્નલ સ્ક્રિપ્ટ્સ તરફ વળવું છે.