I need to display external resources loaded via cross domain requests and make sure to only display "safe" content.
Could use Prototype's String#stripScripts to remove script blocks. But handlers such as onclick or onerror are still there.
Is there any library which can at least
embed or object).So are any JavaScript related links and examples out there?
Update 2016: There is now a Google Closure package based on the Caja sanitizer.
It has a cleaner API, was rewritten to take into account APIs available on modern browsers, and interacts better with Closure Compiler.
Shameless plug: see caja/plugin/html-sanitizer.js for a client side html sanitizer that has been thoroughly reviewed.
It is white-listed, not black-listed, but the whitelists are configurable as per CajaWhitelists
If you want to remove all tags, then do the following:
var tagBody = '(?:[^"\'>]|"[^"]*"|\'[^\']*\')*';
var tagOrComment = new RegExp(
'<(?:'
// Comment body.
+ '!--(?:(?:-*[^->])*--+|-?)'
// Special "raw text" elements whose content should be elided.
+ '|script\\b' + tagBody + '>[\\s\\S]*?</script\\s*'
+ '|style\\b' + tagBody + '>[\\s\\S]*?</style\\s*'
// Regular name
+ '|/?[a-z]'
+ tagBody
+ ')>',
'gi');
function removeTags(html) {
var oldHtml;
do {
oldHtml = html;
html = html.replace(tagOrComment, '');
} while (html !== oldHtml);
return html.replace(/</g, '<');
}
People will tell you that you can create an element, and assign innerHTML and then get the innerText or textContent, and then escape entities in that. Do not do that. It is vulnerable to XSS injection since <img src=bogus onerror=alert(1337)> will run the onerror handler even if the node is never attached to the DOM.
Never trust the client. If you're writing a server application, assume that the client will always submit unsanitary, malicious data. It's a rule of thumb that will keep you out of trouble. If you can, I would advise doing all validation and sanitation in server code, which you know (to a reasonable degree) won't be fiddled with. Perhaps you could use a serverside web application as a proxy for your clientside code, which fetches from the 3rd party and does sanitation before sending it to the client itself?
[edit] I'm sorry, I misunderstood the question. However, I stand by my advice. Your users will probably be safer if you sanitize on the server before sending it to them.
You can't anticipate every possible weird type of malformed markup that some browser somewhere might trip over to escape blacklisting, so don't blacklist. There are many more structures you might need to remove than just script/embed/object and handlers.
Instead attempt to parse the HTML into elements and attributes in a hierarchy, then run all element and attribute names against an as-minimal-as-possible whitelist. Also check any URL attributes you let through against a whitelist (remember there are more dangerous protocols than just javascript:).
If the input is well-formed XHTML the first part of the above is much easier.
As always with HTML sanitisation, if you can find any other way to avoid doing it, do that instead. There are many, many potential holes. If the major webmail services are still finding exploits after this many years, what makes you think you can do better?
[Disclaimer: I'm one of the authors]
We wrote a "web-only" (i.e. "requires a browser") open source library for this, https://github.com/jitbit/HtmlSanitizer that removes all tags/attributes/styles except the "whitelisted" ones.
Usage:
var input = HtmlSanitizer.SanitizeHtml("<script> Alert('xss!'); </scr"+"ipt>");
P.S. Works much faster than a "pure JavaScript" solution since it uses the browser to parse and manipulate DOM. If you're interested in a "pure JS" solution please try https://github.com/punkave/sanitize-html (not affiliated)
Instead of using regex,I thought of a way using native DOM stuff. This way you can parse the HTML to a doc, get that HTML and easily get all of a certain element and whitelist elements and attributes to remove. This uses a list of attributes as either an array of simple strings of attributes to allow, or it can use a regex to validate their values and only allow on certain tags.
const sanitize = (html, tags = undefined, attributes = undefined) => {
var attributes = attributes || [
{ attribute: "src", tags: "*", regex: /^(?:https|http|\/\/):/ },
{ attribute: "href", tags: "*", regex: /^(?!javascript:).+/ },
{ attribute: "width", tags: "*", regex: /^[0-9]+$/ },
{ attribute: "height", tags: "*", regex: /^[0-9]+$/ },
{ attribute: "id", tags: "*", regex: /^[a-zA-Z]+$/ },
{ attribute: "class", tags: "*", regex: /^[a-zA-Z ]+$/ },
{ attribute: "value", tags: ["INPUT", "TEXTAREA"], regex: /^.+$/ },
{ attribute: "checked", tags: ["INPUT"], regex: /^(?:true|false)+$/ },
{
attribute: "placeholder",
tags: ["INPUT", "TEXTAREA"],
regex: /^.+$/,
},
{
attribute: "alt",
tags: ["IMG", "AREA", "INPUT"],
//"^" and "$" match beggining and end
regex: /^[0-9a-zA-Z]+$/,
},
{ attribute: "autofocus", tags: ["INPUT"], regex: /^(?:true|false)+$/ },
{ attribute: "for", tags: ["LABEL", "OUTPUT"], regex: /^[a-zA-Z0-9]+$/ },
]
var tags = tags || [
"I",
"P",
"B",
"BODY",
"HTML",
"DEL",
"INS",
"STRONG",
"SMALL",
"A",
"IMG",
"CITE",
"FIGCAPTION",
"ASIDE",
"ARTICLE",
"SUMMARY",
"DETAILS",
"NAV",
"TD",
"TH",
"TABLE",
"THEAD",
"TBODY",
"NAV",
"SPAN",
"BR",
"CODE",
"PRE",
"BLOCKQUOTE",
"EM",
"HR",
"H1",
"H2",
"H3",
"H4",
"H5",
"H6",
"DIV",
"MAIN",
"HEADER",
"FOOTER",
"SELECT",
"COL",
"AREA",
"ADDRESS",
"ABBR",
"BDI",
"BDO",
]
attributes = attributes.map((el) => {
if (typeof el === "string") {
return { attribute: el, tags: "*", regex: /^.+$/ }
}
let output = el
if (!el.hasOwnProperty("tags")) {
output.tags = "*"
}
if (!el.hasOwnProperty("regex")) {
output.regex = /^.+$/
}
return output
})
var el = new DOMParser().parseFromString(html, "text/html")
var elements = el.querySelectorAll("*")
for (let i = 0; i < elements.length; i++) {
const current = elements[i]
let attr_list = get_attributes(current)
for (let j = 0; j < attr_list.length; j++) {
const attribute = attr_list[j]
if (!attribute_matches(current, attribute)) {
current.removeAttribute(attr_list[j])
}
}
if (!tags.includes(current.tagName)) {
current.remove()
}
}
return el.documentElement.innerHTML
function attribute_matches(element, attribute) {
let output = attributes.filter((attr) => {
let returnval =
attr.attribute === attribute &&
(attr.tags === "*" || attr.tags.includes(element.tagName)) &&
attr.regex.test(element.getAttribute(attribute))
return returnval
})
return output.length > 0
}
function get_attributes(element) {
for (
var i = 0, atts = element.attributes, n = atts.length, arr = [];
i < n;
i++
) {
arr.push(atts[i].nodeName)
}
return arr
}
}* {
font-family: sans-serif;
}
textarea {
width: 49%;
height: 300px;
padding: 10px;
box-sizing: border-box;
resize: none;
}<h1>Sanitize HTML client side</h1>
<textarea id='input' placeholder="Unsanitized HTML">
<!-- This removes both the src and onerror attributes because src is not a valid url. -->
<img src="error" onerror="alert('XSS')">
<div id="something_harmless" onload="alert('More XSS')">
<b>Bold text!</b> and <em>Italic text!</em>, some more text. <del>Deleted text!</del>
</div>
<script>
alert("This would be XSS");
</script>
</textarea>
<textarea id='output' placeholder="Sanitized HTML will appear here" readonly></textarea>
<script>
document.querySelector("#input").onkeyup = () => {
document.querySelector("#output").value = sanitize(document.querySelector("#input").value);
}
</script>