Search jQuery

jQuery Forum

How to sanitize data sent from the server in ajax call ?

in Using jQuery • 2 years ago

I have the following quiz component here.

There are 10 questions and on click of the result of the final question , your performance of the over all quiz is shown, the response is fetched though a ajax request (in scripts.js) , like so:

$.ajax({
type: "POST",
url: $("#quizForm input#QuizResultPreview").val(),
dataType: 'html',
contentType: 'application/json',
data:JSON.stringify(quizAttempt),
success: function(data) {
/* console.log(data);
var data = JSON.parse(data);
var html = '';
for( var i = 0; i < data.length ; i++ ) {
if( data[i].CorrectSelectionResponse !== null ) {
html += "<div class='quiz__indi__answerwrapper'><span>"+ data[i].QID.slice(1 , data[i].QID.length ) +"</span><span>"+ strip(data[i].Question) +"</span><span>"+ data[i].CorrectSelectionResponse +"</span></div>";
} else {
html += "<div class='quiz__indi__answerwrapper'><span>"+ data[i].QID.slice(1 , data[i].QID.length ) +"</span><span>"+ strip(data[i].Question) +"</span><span>"+ data[i].WrongSelectionResponse +"</span></div>";
}
} */
$('#resultTemp').html(data);
},
error: function(xhr) {
$("#resultTemp").text(xhr);
$('#resultTemp').show();
},
failure: function(xhr) {
$("#resultTemp").text(xhr);
$('#resultTemp').show();
}
});

In the html though i see a few weird characters displayed like so (The same can be seen by navigating the quiz component link i shared above). how do i sanitize the data sent from the server ?

Replies(3)

watusiware

Re: How to sanitize data sent from the server in ajax call ?

2 years ago

You could sanitize it by using a regex. You would have to know what you are looking for, and what you want to replace it with.

If you remove them, you will probably be removing characters that are wanted! This is the lower-case 'a' with a "ring" above it used in Scandinavian languages. But, ISO-8859-1 character set.

But, if you prefer, you can replace them with "bork, bork!", a blank space, nothing, or anything you would like. But that is probably not what is wanted! ;)

I usually don't like to link to W3Fools. But in this case, they have a nice chart, with a "Try It" for every character.

https://www.w3schools.com/charsets/ref_html_8859.asp

A more modern approach is to have the server sent UTF-8 characters, and use a meta to tell the browser to expect UTF-8. The author would just write the text with their text editor set for UTF-8.

You didn't show a complete example, so I can't guess at your <meta> tags!

gautamx07

Re: Re: How to sanitize data sent from the server in ajax call ?

2 years ago

@Jon , have linked the page in the question , you can check it out , but the issue has been fixed on that page though already :D

gautamx07

Re: How to sanitize data sent from the server in ajax call ?

2 years ago

@Jon thanks , i tried this just now:

// thanks to stackoverflow
function htmlDecode(input){
var e = document.createElement('div');
e.innerHTML = input;
return e.childNodes[0].nodeValue;
}
$('.wrong-answered-questions h4').each( function(i , e){
console.log($(e).text().replace( new RegExp('&[^;]+;' , 'g') , (match) => { return htmlDecode(match) }));
});

The above outputs the correct result(characters ) in the console.

But i just went with he.js and did the below:

$('#resultTemp').hide().html(data).find('.wrong-answered-questions h4').each( function(i , e){
$(e).text( he.decode( $(e).text() ));
}).end().show();

Works great !.

Thanks alot for the points , i believe i don't have control of the server or the editor, but will speak to my senior.

Top Reply

Response title

Attachments

jQuery Forum

How to sanitize data sent from the server in ajax call ?

Replies(3)

Re: How to sanitize data sent from the server in ajax call ?

Re: Re: How to sanitize data sent from the server in ajax call ?

Re: How to sanitize data sent from the server in ajax call ?

Statistics

Tags

Actions