ज़ाल्गो पाठ को पूरी तरह से हटाए बिना पूरी जगह खून बहने से कैसे बचें?

Question

हमारी वेब सेवा कुछ Zalgo text के साथ मारा गया है और मैं भविष्य के लिए एक अच्छा समाधान के साथ आने की कोशिश कर रहा हूं। हमारी नीति सभी उपयोगकर्ता इनपुट को स्वीकार करना और इसे स्थायी भंडारण में सहेजना है (हम अपने बैकएंड के लिए इनपुट को सही ढंग से एन्कोड करते हैं, इसलिए यह हिस्सा ठीक है)। आउटपुट चरण के दौरान, हम XSS हमलों और अन्य तबाही से बचने के लिए श्वेतसूची के साथ फ़िल्टर/पार्सर के माध्यम से मूल उपयोगकर्ता इनपुट चलाते हैं। हाल ही में कुछ उपयोगकर्ताओं को ज़ल्गो की दुनिया मिली है और वे बस इसके साथ अन्य लोगों को कुछ परेशानी का कारण बनना पसंद करते हैं।

जैसा कि मैंने इसे देखा, ज़ल्गो टेक्स्ट यूनिकोड टेक्स्ट का एक टुकड़ा है जो इच्छित कंटेनर से बाहर निकलता है। नतीजतन, मुझे लगता है कि सभी जटिल संयोजन पात्रों को स्वचालित रूप से हटा देना बहुत कठोर रक्षा है। क्या कोई किसी सीएसएस चाल को जानता है कि ज़ल्गो पाठ को किसी दिए गए पैरेंट तत्व में कुछ बुरा दुष्प्रभावों के बिना निहित करने के लिए मजबूर किया जाए?

उदाहरण के लिए

, अगर मैं

<section class="userinput"> 
... user input here ... 
</section> 

है कैसे मुझे यकीन है कि उपयोगकर्ता इनपुट section.userinput की सीमाओं के बाहर लीक नहीं करता है बना सकते हैं? मुझे लगता है कि overflow: hidden या clip: rect(...) सही उत्तर हो सकता है, लेकिन क्या आप इस उपयोग के मामले के लिए कुछ बेहतर जानते हैं? अधिमानतः मैं अब भी section.userinput { max-height: 200vh; } या कृत्रिम रूप से लंबी टिप्पणियां बनाने से उपयोगकर्ताओं से बचने के समान कुछ उपयोग कर सकता हूं। अगर कुछ टिप्पणी 200vh से अधिक थी, तो उसमें केवल उस टिप्पणी के लिए स्क्रॉल बार होना चाहिए। आम तौर पर पूरे पृष्ठ के लिए केवल एक स्क्रॉल बार होना चाहिए।

ध्यान दें कि मैं केवल दृश्य डोमेन में समस्या का मुकाबला करने की कोशिश कर रहा हूं। मैं उपयोगकर्ता इनपुट के रूप में किसी वैध यूटीएफ -8 अनुक्रम को स्वीकार करने में पूरी तरह से खुश हूं और मैं ठीक हूं अगर उपयोगकर्ता की टिप्पणी में गड़बड़ की गई उपयोगकर्ता टिप्पणी परिणाम बकवास की तरह दिखती है। मैं केवल उस जगह पर बहने वाले उस बकवास से बचने की कोशिश कर रहा हूं। विशेष रूप से, मैं trying to block the zalgo text या filter zalgo-like text before display पर नहीं हूं।

Answer 1

फ़ायरफ़ॉक्स और क्रोम के साथ an example case परीक्षण करने के बाद, मैं कहूंगा कि सबसे अच्छा विकल्प घोषणा overflow: auto का उपयोग करना है। overflow: hidden का उपयोग केवल तभी समझ जाएगा जब संभावित स्क्रॉलबार उपयोगकर्ता सामग्री खोने से भी बदतर माना जाता है।

overflow: auto सामग्री फिट नहीं होने पर स्वचालित रूप से स्क्रॉलबार पर वापस गिरने की अनुमति देता है और यह अभी भी चयनित तत्व पर क्लिपिंग को मजबूर करता है।

घोषणा clip: rect(0,auto,auto,0); कोई अच्छा नहीं है क्योंकि यह केवल position: absolute; और overflow: visible के बिना काम करता है।

an example without overflow: auto for an comparision देखें।