अब जब सभी प्रमुख ब्राउज़र सैंडबॉक्स वाले आइफ्रेम का समर्थन करते हैं, तो बहुत सरल तरीका है जो मुझे लगता है कि सुरक्षित हो सकता है। मुझे यह अच्छा लगेगा अगर इस उत्तर की समीक्षा ऐसे लोगों द्वारा की जा सकती है जो इस तरह के सुरक्षा मुद्दे से अधिक परिचित हैं।
नोट: यह विधि निश्चित रूप से IE 9 और पूर्व में काम नहीं करेगी। सैंडबॉक्सिंग का समर्थन करने वाले ब्राउज़र संस्करणों के लिए यह तालिका देखें । (ध्यान दें: तालिका यह कहती है कि यह ओपेरा मिनी में काम नहीं करेगा, लेकिन मैंने अभी इसकी कोशिश की, और यह काम कर गया।)
जावास्क्रिप्ट अक्षम के साथ एक छिपी हुई आइफ्रेम बनाने के लिए विचार है, अपने अविश्वसनीय एचटीएमएल को इसमें पेस्ट करें, और इसे पार्स करें। फिर आप डोम ट्री पर चल सकते हैं और उन टैग्स और विशेषताओं को कॉपी कर सकते हैं जिन्हें सुरक्षित माना जाता है।
यहां दिखाए गए श्वेतसूची केवल उदाहरण हैं। श्वेतसूची के लिए सबसे अच्छा क्या अनुप्रयोग पर निर्भर करेगा। यदि आपको केवल टैग और विशेषताओं के श्वेतसूची की तुलना में अधिक परिष्कृत नीति की आवश्यकता है, तो इसे इस विधि द्वारा समायोजित किया जा सकता है, हालांकि इस उदाहरण कोड द्वारा नहीं।
var tagWhitelist_ = {
'A': true,
'B': true,
'BODY': true,
'BR': true,
'DIV': true,
'EM': true,
'HR': true,
'I': true,
'IMG': true,
'P': true,
'SPAN': true,
'STRONG': true
};
var attributeWhitelist_ = {
'href': true,
'src': true
};
function sanitizeHtml(input) {
var iframe = document.createElement('iframe');
if (iframe['sandbox'] === undefined) {
alert('Your browser does not support sandboxed iframes. Please upgrade to a modern browser.');
return '';
}
iframe['sandbox'] = 'allow-same-origin';
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.contentDocument.body.innerHTML = input;
function makeSanitizedCopy(node) {
if (node.nodeType == Node.TEXT_NODE) {
var newNode = node.cloneNode(true);
} else if (node.nodeType == Node.ELEMENT_NODE && tagWhitelist_[node.tagName]) {
newNode = iframe.contentDocument.createElement(node.tagName);
for (var i = 0; i < node.attributes.length; i++) {
var attr = node.attributes[i];
if (attributeWhitelist_[attr.name]) {
newNode.setAttribute(attr.name, attr.value);
}
}
for (i = 0; i < node.childNodes.length; i++) {
var subCopy = makeSanitizedCopy(node.childNodes[i]);
newNode.appendChild(subCopy, false);
}
} else {
newNode = document.createDocumentFragment();
}
return newNode;
};
var resultElement = makeSanitizedCopy(iframe.contentDocument.body);
document.body.removeChild(iframe);
return resultElement.innerHTML;
};
आप इसे यहाँ आज़मा सकते हैं ।
ध्यान दें कि मैं इस उदाहरण में शैली विशेषताओं और टैग को अस्वीकार कर रहा हूं। यदि आपने उन्हें अनुमति दी है, तो आप शायद CSS को पार्स करना चाहते हैं और सुनिश्चित करें कि यह आपके उद्देश्यों के लिए सुरक्षित है।
मैंने इसे कई आधुनिक ब्राउज़रों (क्रोम 40, फ़ायरफ़ॉक्स 36 बीटा, आईई 11, क्रोम फॉर एंड्रॉइड) पर और एक पुराने एक (आईई 8) पर परीक्षण किया है ताकि यह सुनिश्चित किया जा सके कि यह किसी भी स्क्रिप्ट को निष्पादित करने से पहले जमानत हो। मुझे यह जानने में दिलचस्पी होगी कि क्या कोई ब्राउज़र है जो इसके साथ परेशान है, या किसी भी किनारे के मामले हैं जो मैं देख रहा हूं।