Disable the ability to post HTML content to a Textarea

Question

I'm facing a very weird problem with my HTML Code. People started posting HTML content such as HTML Forms, input boxes, check boxes via my Textarea and that messed up my website's content. I need to disable the ability to post HTML content via my textareas and only allow text. For example: even if they type a HTML <input> tag, that'll be delivered as text and not HTML.

However, I need to enable the ability to post content with <a> tags since I'm allowing the ability to post links, etc. They should also be given the ability to post <img> tags which has a specific class only (class name is 'emoji-class'), since I'm giving the ability to post emojis.

Conditions:

• Allow text that could also contain <a href> tags
• Allow text that could contain <img> that contain a class named 'emoji-class' . Any other <img> tag will not be passed as HTML content via the text area

I receive the content via Javascript:

https://jsfiddle.net/wv4s511e/11/

How can I add these conditions to my textarea/Javascript such that every other HTML content is received as text content but the aforementioned HTML tags are received as HTML content?

EDIT:

I'm coding on ASP.NET

Answer 1

I guess you are using

document.getElementById("id").innerHTML

You should never use it. Because it opens a security vulnerability for XSS (cross side scripting) attacks. Rather, you can use

document.getElementById("id").innerText

But whenever you are receiving those texts via php (or such kind of server side scripting), you should always sanitize the data and minimize the risk of SQL Injection.

Visit these links to get the facts clear

http://resources.infosecinstitute.com/how-to-prevent-cross-site-scripting-attacks/

https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet

http://www.w3schools.com/php/php_filter.asp

PS- if you insert the texts (data) using document.getElementById("id").innertext then it inserts the data as text contents rather then HTML data. This is the way you should be doing. To allow users to write in italic or bold format, you can provide them some options above the text area. A way of doing this is to send few variable values to the server side script which contains few numbers which in turn allow you to know which parts of the string are italic/bold.

If i write H ello World, ofcourse the characters ranging from 1st to 4th location are in italic. So you just need to know these numbers.

Answer 2

Disabling the ability to post HTML would be a bad idea, a better way would be to encode the HTML tags as they're being shown on the webpage.

This way, the DOM won't recognise the HTML tags and won't mess up your code, but it still shows on the webpage itself.

More information: http://www.w3schools.com/asp/met_htmlencode.asp