0

I have a input field with plus icon. On clicking the plus icon the input's value gets added above the input field.

Actually I am using a template for adding content above the input field. On clicking plus icon I replace the respective patterns with values and place the content above input field using jQuery replace function.

If any hacker inputs values like "<script>alert("hi");</script>" the layout breaks.

How can I block these type of attacks via jQuery? I know server side validations can be done. But is there any way we can block these attacks via jQuery/client side validation?

Tomalak
  • 332,285
  • 67
  • 532
  • 628
George Joffin Joy
  • 259
  • 1
  • 6
  • 20
  • possible duplicate of [Escaping HTML strings with jQuery](http://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery) –  Sep 10 '13 at 05:32
  • I know you are looking to do this client-side but just to reiterate a moot point, client-side validation is pure pretty sugar user experience. Server-side validation (and output escaping) is security, and is THE only validation of concern when it comes to XSS. Any script-kiddie can and will send any values HTTP protocol permits using firebug/dev tools, etc.. – cbayram Sep 10 '13 at 05:40
  • Here's client-side jQuery [answer](http://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery) – cbayram Sep 10 '13 at 05:44
  • Thanks all i know the server side validation is the ultimate security and i have done that but just curious to know the client side way... i will try out this and will let you guys know. once again thanks for quick reply... – George Joffin Joy Sep 10 '13 at 06:02
  • appendCntDiv = appendCntDiv.replace(r1, counter).replace('{:elemVal}', skillName).replace('{:hidVal}', skHdId).replace('{:expVal}', exp); here i am replacing the {:elemVal} with skillName which has script tags so how to filter script tags before doing the replace function. – George Joffin Joy Sep 10 '13 at 06:11

1 Answers1

1

It's simple. Do not use jQuery's .html(), use .text().

Escaping will occur automatically, there is nothing special you need to do apart from not using the wrong API function.

<div id="textDisplay"></div>
<input type="text" id="enteredText"> <button id="transferText">Click!</button>

and

$(function() {
    $("#transferText").click(function () {
        var userInput = $("#enteredText").val();

        $("#textDisplay").text(userInput);
    });
});
Tomalak
  • 332,285
  • 67
  • 532
  • 628
  • Thanks all i know the server side validation is the ultimate security and i have done that but just curious to know the client side way... i will try out this and will let you guys know. once again thanks for quick reply... – George Joffin Joy Sep 10 '13 at 06:01
  • appendCntDiv = appendCntDiv.replace(r1, counter).replace('{:elemVal}', skillName).replace('{:hidVal}', skHdId).replace('{:expVal}', exp); here i am replacing the {:elemVal} with skillName which has script tags so how to filter script tags before doing the replace function. – George Joffin Joy Sep 10 '13 at 06:08
  • What happens with `appendCntDiv` afterwards? (Next time include your code in the question. It makes no sense at all to discuss code fragments in the comments.) – Tomalak Sep 10 '13 at 06:13
  • Apart from that: This problem has been solved. Use an *actual* templating engine instead of doing manual replacements. There are so many templating libraries to choose from, just pick one and work with it. Here are a few: http://microjs.com/#templating. (Or, to put it differently: Unless your target is to write a templating engine, don't write a templating engine. Use one that already exists, has been tested and does not trip over these simple things.) – Tomalak Sep 10 '13 at 06:18