How may allowing HTML inside Twitter Bootstrap's tooltips cause XSS issues?

Question

I was going through Twitter Bootstrap's docs on tooltips. It is stated there not to set data-html=true inside tooltips if you're worried about XSS attacks.

What data-html=true does is it allows you to write HTML in an element's title attribute.

I don't know anything about XSS attacks. I tried reading about it on Wikipedia but that wasn't much help.

Can you please explain:

1. How might it raise security issues?
2. What would be the secure way to allow HTML inside tooltips?

Answer 1

XSS means cross site scripting, so an XSS attack often involves injection of code (e.g. JS) into a site that then communicates with or initializes malicious code from another site/server.

1) It would raise security issues because unless data-html is set to true any HTML in the tooltip will be escaped / shown as text and not parsed. If it is set to true the content will be parsed as HTML. This means if you have user input variables displayed here that are not properly sanitized they could potentially inject malicious HTML code, for instance javascript that initiates an XSS attack.

2) Just make sure everything you are outputting in the tooltip is safe. For example, if you let users enter information about themselves that is displayed in a tooltip make sure it is properly sanitized before you output it in the tooltip.