<html>
<head>
<title>Sanitizer API Usage - RJM Programming - July, 2022 ... thanks to https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API</title>
<script type='text/javascript'>
var beforebih=''; //(iois.srcdoc.toLowerCase().indexOf('<body') == -1 ? iois.srcdoc : '' + iois.srcdoc.replace('<BODY','<body').replace('</BODY>','</body>').split('<body')[1].split('</body>')[0].split('</body>')[0].replace(iois.srcdoc.replace('<BODY','<body').replace('</BODY>','</body>').split('<body')[1].split('</body>')[0].split('>')[0] + '>',''));
var afterbih='';
function onl() {
const sanitizer = new Sanitizer(); // Default sanitizer;
// Get the frame and its Document object
const frame_element = document.getElementById("userFrame");
const unsanitized_frame_tree = frame_element.contentWindow.document;
console.log(unsanitized_frame_tree);
console.log(frame_element.contentWindow.document.body.innerHTML.length);
// Sanitize the document tree and update the frame.
const sanitized_frame_tree = sanitizer.sanitize(unsanitized_frame_tree);
console.log(sanitized_frame_tree);
frame_element.replaceChildren(sanitized_frame_tree);
console.log(frame_element.contentWindow.document.body.innerHTML.length);
}
function ifixit(iois) {
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
const unsanitized_string = (iois.srcdoc.toLowerCase().indexOf('<body') == -1 ? iois.srcdoc : '' + iois.srcdoc.replace('<BODY','<body').replace('</BODY>','</body>').split('<body')[1].split('</body>')[0].split('</body>')[0].replace(iois.srcdoc.replace('<BODY','<body').replace('</BODY>','</body>').split('<body')[1].split('</body>')[0].split('>')[0] + '>','')); // Unsanitized string of HTML
beforebih=unsanitized_string.replace(/\>/g,'>').replace(/\</g,'<');
document.getElementById('before').innerHTML=beforebih;
const sanitizer = new Sanitizer(); // Default sanitizer;
// Sanitize the string
const sanitizedBody = sanitizer.sanitizeFor("body", unsanitized_string);
//We can verify the returned element type, and view sanitized HTML in string form:
console.log(sanitizedBody instanceof HTMLBodyElement);
// true
console.log(sanitizedBody.innerHTML)
// "abc def"
// At some point later…
// Get the element to update. This must be a div to match our sanitizeFor() context.
// Set its content to be the children of our sanitized element.
iois.replaceChildren(sanitizedBody.children);
//console.log(aconto);
afterbih=aconto.body.innerHTML.replace(/\>/g,'>').replace(/\</g,'<');
document.getElementById('after').innerHTML=afterbih;
}
}
}
}
function trythis() {
var newsd=prompt('Optionally enter new iframe content to sanitize.', beforebih.replace(/\>\;/g,'>').replace(/\<\;/g,'<'));
if (newsd) {
if (newsd != beforebih.replace(/\>\;/g,'>').replace(/\<\;/g,'<')) {
document.getElementById("userFrame").srcdoc=newsd;
}
}
}
</script>
</head>
<body onload='onl();'>
<h1>Sanitizer API <button onclick='trythis();' title='Try your own'>Usage</button></h1>
<h3>RJM Programming - July, 2022</h3>
<h4>Thanks to <a target=_blank title='https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API' href='//developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API'>https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API</a></h4>
<details open><summary>Before HTML versus After ...</summary><table cellpadding=5 cellspacing=5 border=30><tr><th>Before</th><th>After</th></tr><tr><td id=before></td><td id=after></td></tr></table></details>
<iframe onload='ifixit(this);' srcdoc='<html><body><h1>This is an H1<</div></body></html>' data-src='//www.rjmprogramming.com.au/About_Us.html' id='userFrame' style='width:100%;height:900px;'></iframe>
</body>
</html>