4

How can I use JavaScript to prevent the user from entering these HTML tags in a textarea?

<style></style>
<script></script>
<embeded></embeded>
<img src="" />
2
  • 1
    I think we would need more information on what you're actually doing. For instance, are people typing the markup in? Is it a TinyMCE/WYSIWYG editor? Do you want to prevent it in a POST, or on an event (onBlur for instance)? Commented May 21, 2011 at 7:30
  • 1
    Note though... you always want to do this on the server as well. Never, ever trust a client-side validator if you're trying to 'forbid' something (like posting HTML to your DB). In many cases, this just means doing it entirely on the server, and spitting back an error to the client... this way you can keep your business rules in a single place and not have to develop everything multiple times. Commented May 21, 2011 at 8:07

5 Answers 5

2

There's a concern that sometimes is missed with respect to client side input validation with Javascript: It's possible for the validation process to be bypassed programatically, enabling the client to send tags (or in a more general sense, data) that your server-side script isn't expecting. For example, someone could write a mechanized scraper that sends a GET or POST request directly to your server-side script. Doing so bypasses the javascript input validation. If your server-side script isn't also checking for valid input, it could get ugly. In the worst case, a malicious user could take advantage of lax server-side scrubbing by possibly injecting data that would be harmful.

Javascript can, therefore, be used to 'encourage' well-behaved input, but it's not a substitute for rigorous server-side validation and scrubbing too.

Sign up to request clarification or add additional context in comments.

1 Comment

...In simpler words: if an attacker wants "bad" HTML tags in that textbox, JavaScript isn't going to stop them.
2

One possibility is using onChange event handler associated to your text area:

<textarea onchange="javascript:sanitizeHTML(this);>...</textarea>

In this way, your sanitizeHTML will be called whenever the text area content changes (focus out), and you can do your validation there by using regex.

If you prefer a more timely action to prevent user from entering the HTML you mention, you could define an onkeyup event handler as well, but you should be very careful about the implementation of your validating code as to its performance.

In your sanitizeHTML, you could use str.replace with some proper regex to remove unwanted content.

function sanitizeHTML(object) {
    object.value.replace("<embed>.*?</embed>", "");
    <etc for other tags>
}

Note: I have not checked the code and wrote it quite quickly...

2 Comments

ok, so when the tags are entered they are automatically removed?
see my edit for more detail. also changed handler name and argument now that it is clear how you would process the textarea content.
1

This might take you to the right direction.help and this

str=(document.getElementById('exp')).value;
        if(str.match(/([\<])([^\>]{1,})*([\>])/i)==null)
         alert("No HTML Tag");
        else
         alert("Contains HTML Tag");

or

var htstring = '<p align="Left"><b>Hello</b> <I>World</I></p>'; 
var stripped = htstring.replace(/(<([^>]+)>)/ig,""); 

with (document) { 
write ('Original string:' + htstring + '<br>'); 
write ('Stripped string:<br><br>' + stripped); 
} 

5 Comments

I don't know how helpful that particular question is to this one.
I don't see how this SO question could help the OP.
does not help at all, this question is about removing unwanted tags from the textarea, not removing spaces
You would be better off actually adding some code to your answer. Linking to another site is not a good practice on SO, since the linked page might one day disappear.
I would not see that as being the most relevant part of the forum post you link to - see Kor's response towards the end.
1

Javascript way:

html

<textarea id="mytext" onChange="stripHTML(this.value);"></textarea>

js

<script>
function stripHTML(oldString) {
  var result=(/<img.*|<script.*|<style.*|<embeded.*/ig).test(oldString);
  alert('Input is :'+!result);  
}
</script>

jQuery way:

// remove onChange="stripHTML(this.value);" from html and do below
   <script>
   $(document).ready(function() {
    $('#mytext').live ('mouseleave change', function () { 
       var textVal= $(this).val();
       var result=(/<img.*|<script.*|<style.*|<embeded.*/ig).test(textVal);
        alert('input is:'+!result); 
    });
});

DEMO

One useful link

RUBULAR TEST

5 Comments

the question was for javascript, strip_tags is a php function
Then this should not have been tagged PHP.
@lbu , see the tag there is php mentioned
@diEcho: What "see". He is asking for javascript solution. You are answering blindly.
@daric, i think u didn't see the tag
0

I have written the following answer that is a generalization of this problem. Just reduce the list of tags of the regexp to your own list.

JavaScript - Detect HTML

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.