डेवलपर टूल · HTML WYSIWYG एडिटर
DOM से मार्कअप तक: आंतरिक HTML क्रमबद्धता आपको मिलने वाले HTML को कैसे आकार देती है
· यह काम किस प्रकार करता है
HTML html-इकाइयाँ डेवलपर-वर्कफ़्लो
समझाता है कि DOM ट्री को वापस HTML स्ट्रिंग में बदलते समय ब्राउज़र किन नियमों का पालन करते हैं, एस्केपिंग और एंटिटी से लेकर शून्य तत्वों और विशेषता उद्धरण तक, और एडिटर आउटपुट इस तरह क्यों दिखता है।
इस सैनिटाइज़र में <br> <br /> के रूप में वापस क्यों आता है
`<br>` वाला एक स्रोत टुकड़ा इस सैनिटाइज़र को `<br />` के रूप में छोड़ता है। वह परिणाम इस बात का प्रमाण नहीं है कि प्रत्येक ब्राउज़र स्लैश के साथ HTML को क्रमबद्ध करता है। यह ToolAcre के स्ट्रिंग रीराइटर में एक जानबूझकर किया गया विकल्प है, जिसकी शून्य-तत्व शाखा अनुमत br और hr तत्वों के लिए एक स्थान और स्लैश उत्सर्जित करती है।
भेद एक सामान्य गलत व्याख्या को रोकता है। दृश्य सतह को आंतरिक HTML के माध्यम से पढ़ा जाता है, लेकिन कॉपी किए गए स्रोत को फिर टोकन किया जाता है और एप्लिकेशन कोड द्वारा फिर से बनाया जाता है। उपयोगकर्ताओं को जो प्राप्त होता है वह ब्राउज़र-निर्मित DOM स्ट्रिंग और ToolAcre के संकीर्ण आउटपुट सम्मेलनों को दर्शाता है, जिसमें उपनाम, फ़िल्टर किए गए गुण और संतुलित टैग शामिल हैं।
टोकनिंग इन, अनुमति सूची पुनः लिखना - यह ब्राउज़र आंतरिक HTML क्रमबद्धता नहीं है
टोकननाइज़र DOM नोड्स का निर्माण किए बिना या DOMParser को कॉल किए बिना वर्णों को स्कैन करता है। यह पाठ, टिप्पणियाँ, घोषणाएँ, प्रारंभ टैग, अंतिम टैग और कच्चे-पाठ तत्व निकायों को पहचानता है। स्वच्छता उस समतल क्रम को दोहराती है, स्वीकृत संरचनाओं को बनाए रखती है, सामान्य अज्ञात रैपरों को खोलती है और खतरनाक कंटेनरों को उनकी सामग्री के साथ दबा देती है।
परिणामस्वरूप, मूल वर्तनी संरक्षित नहीं है। मिश्रित-केस नाम छोटे अक्षर बन जाते हैं; बी मजबूत हो जाता है, आई एम बन जाता है, स्ट्राइक और डेल एस बन जाता है, और इन्स यू बन जाता है। आउटपुट को मूल सबस्ट्रिंग के रूप में लौटाए जाने के बजाय स्वीकृत टोकन से पुनर्जीवित किया जाता है, इसलिए स्रोत स्वरूपण और असमर्थित विवरण डिज़ाइन द्वारा गायब हो जाते हैं।
ज्ञात संस्थाओं को सामान्य करते समय पाठ और विशेषताओं से बचना
टेक्स्ट को पहले इकाई-डिकोड किया जाता है और फिर से एस्केप किया जाता है। एम्परसेंड्स `&` बन जाते हैं, इससे कम और अधिक-से-अधिक चिह्न `<` और `>` बन जाते हैं, और निषिद्ध नियंत्रण वर्ण गायब हो जाते हैं। यह आदेश मौजूदा `&` को `&amp;` में बदलने के बजाय बार-बार पास करने पर स्थिर रखता है।
विशेषता मान एक सख्त एस्केप पथ का अनुसरण करते हैं जो दोहरे उद्धरण चिह्न, एकल उद्धरण, कोण कोष्ठक और एम्परसेंड को भी उद्धृत करता है। स्वीकृत विशेषताओं के उत्सर्जित होने से पहले ज्ञात संस्थाओं को डिकोड किया जाता है। परीक्षण पाठ और लिंक प्रश्नों के लिए निष्क्रियता को पिन करते हैं, लेकिन कोड प्रत्येक आधिकारिक इकाई वर्तनी जैसे नामित बनाम संख्यात्मक संदर्भ के संरक्षण का वादा नहीं करता है।
कस्टम रीराइटर में शून्य तत्व और संतुलित समापन टैग
आउटपुट सेट में केवल br और hr दोनों की अनुमति है और उन्हें शून्य के रूप में वर्गीकृत किया गया है। उन्हें कभी भी क्लोजिंग टैग नहीं मिलते। गैर-शून्य अनुमत तत्वों के लिए, एक खुला स्टैक नेस्टिंग रिकॉर्ड करता है। एक क्रॉस्ड क्लोज़ जैसे कि स्ट्रॉन्ग अराउंड एम, आंतरिक तत्वों को पहले बंद करने का कारण बनता है, जिससे विकृत ऑर्डर को संरक्षित करने के बजाय संतुलित मार्कअप उत्पन्न होता है।
बिना बंद किए गए तत्वों को अंत में बंद कर दिया जाता है, जबकि आवारा बंद होने वाले टैगों को नजरअंदाज कर दिया जाता है। यह पुनर्लेखक की संतुलन नीति है, ब्राउज़र HTML5 त्रुटि पुनर्प्राप्ति का पूर्ण कार्यान्वयन नहीं है। स्रोत स्वयं पार्सर अंतर के बारे में चेतावनी देता है, यही कारण है कि आउटपुट को सार्वभौमिक शत्रुतापूर्ण-इनपुट सैनिटाइज़र के रूप में विपणन नहीं किया जाना चाहिए।
विशेषताओं को सूचीबद्ध और उद्धृत किया गया है; केवल स्रोत आदेश ही अनुबंध नहीं है
कोई सामान्य विशेषता बैग नहीं बचता। अनुच्छेद और शीर्षक किसी को अनुमति नहीं देते; लिंक href और शीर्षक की अनुमति देते हैं; संक्षिप्ताक्षर शीर्षक की अनुमति देते हैं; उद्धरण उद्धरण की अनुमति देते हैं; आदेशित सूचियाँ प्रारंभ और प्रकार की अनुमति देती हैं। प्रत्येक उत्सर्जित मान को दो बार उद्धृत किया जाता है, और स्वीकृत लिंक भी `rel="noopener noreferrer nofollow"` प्राप्त करते हैं।
विशेषता क्रम स्वीकृत टोकन और जोड़े गए रिले फ़ील्ड का अनुसरण करता है, लेकिन ऑर्डर पर निर्भर रहना नाजुक होगा। अर्थ अनुमत नामों और मूल्यों में रहता है। एक विकृत पूर्णांक प्रारंभ हटा दिया जाता है, असुरक्षित href या उद्धरण योजनाओं को अस्वीकार कर दिया जाता है, और अज्ञात विशेषताएँ चुपचाप प्रकाशित मार्कअप का हिस्सा बनने के बजाय हटाने के कारण उत्पन्न करती हैं।
व्यावहारिक उदाहरण: ToolAcre के सैनिटाइज़र के माध्यम से एक स्निपेट को राउंड-ट्रिपिंग करना
`<B class="loud">A & B<br></B><a href="javascript:alert(1)">open</a>` आज़माएँ। क्लास को हटा दिया जाता है, बी को मजबूत में मैप किया जाता है, मौजूदा एम्परसेंड एक बचा हुआ एम्परसेंड बना रहता है, बीआर स्व-बंद हो जाता है, और दृश्यमान लिंक टेक्स्ट को बनाए रखते हुए असुरक्षित लिंक अपना href खो देता है।
सुंदर स्रोत मोड तब समर्थित ब्लॉक तत्वों को लाइनों और इंडेंट सूची के बच्चों पर रखता है। यह इनलाइन सामग्री को एक साथ छोड़ देता है और पाठ को प्री के अंदर संरक्षित करता है। फ़ॉर्मेटिंग पहले से ही दोबारा लिखे गए आउटपुट पर एक पठनीयता पास है; यह दूसरा सुरक्षा पार्सर नहीं है और पहले सामान्यीकरण द्वारा हटाए गए रिक्त स्थान को पुनर्स्थापित नहीं करता है।
इसमें क्या शामिल नहीं है - ब्राउज़र, XML या XHTML क्रमबद्धता
यह आलेख सामान्य रूप से मूल ब्राउज़र क्रमबद्धता गारंटी, XMLSerializer, XHTML वाक्यविन्यास या वैकल्पिक HTML समापन-टैग नियमों का वर्णन नहीं करता है। यह इस भंडार में अवलोकन योग्य सम्मेलनों का दस्तावेजीकरण करता है। ` ` के बारे में दावे विशेष रूप से छोड़े गए हैं क्योंकि स्थानीय इकाई तालिका, सामान्य ब्राउज़र क्रमांकन नहीं, मान्यता प्राप्त नामित संदर्भ निर्धारित करती है।
पूर्वावलोकन बिल्डर एक बार फिर से साफ़ करता है और टुकड़े को पूर्ण प्रकाश-थीम वाले दस्तावेज़ में लपेटता है। कॉपी HTML टुकड़ा लौटाता है; डाउनलोड HTML वह दस्तावेज़ लौटाता है। वे जानबूझकर भिन्न कलाकृतियाँ हैं। डाउनलोड की गई फ़ाइल को कॉपी किए गए स्रोत के बाइट-समान मानने से पहले एक्शन लेबल पढ़ें।
टेकअवे: सीरियलाइज़र सुसंगत है, आपका इनपुट नहीं था - सारांशित करता है कि एडिटर आउटपुट की भविष्यवाणी कैसे करें और ToolAcre का HTML WYSIWYG एडिटर कैसे दिखाता है कि ब्राउज़र वास्तव में क्या उत्पन्न करता है
इसके चरणों का पालन करके ToolAcre की भविष्यवाणी करें: स्ट्रिंग को टोकनाइज़ करें, समर्थित इकाइयों को डीकोड करें, तत्व उपनाम और अनुमति सूचियां लागू करें, URL का निरीक्षण करें, स्वीकृत टैग को संतुलित करें, आउटपुट से बचें और वैकल्पिक रूप से इसे सुंदर प्रिंट करें। यह अनुक्रम वास्तविक परिणाम को अधिक सटीक रूप से बताता है, यह कहने की तुलना में कि आंतरिक HTML केवल लेखक के स्रोत को संरक्षित या क्रमबद्ध करता है।
लंबे ड्राफ्ट को संसाधित करने से पहले एक छोटे फिक्स्चर के साथ पुनर्लेखन का निरीक्षण करने के लिए स्रोत मोड का उपयोग करें। सैनिटाइज़र 500,000 वर्ण से ऊपर के दस्तावेज़ों को अस्वीकार कर देता है, इसलिए बड़े आकार का इनपुट टैब को फ़्रीज़ करने के बजाय विफल हो जाता है। गंतव्य की अपनी HTML नीति को इस एडिटर के जानबूझकर संक्षिप्त उपसमूह से अलग रखें।