Sanitizing user input before adding it to the DOM in Javascript
Never use escape()
. It's nothing to do with HTML-encoding. It's more like URL-encoding, but it's not even properly that. It's a bizarre non-standard encoding available only in JavaScript.
If you want an HTML encoder, you'll have to write it yourself as JavaScript doesn't give you one. For example:
function encodeHTML(s) {
return s.replace(/&/g, '&').replace(/</g, '<').replace(/"/g, '"');
}
However whilst this is enough to put your user_id
in places like the input value
, it's not enough for id
because IDs can only use a limited selection of characters. (And %
isn't among them, so escape()
or even encodeURIComponent()
is no good.)
You could invent your own encoding scheme to put any characters in an ID, for example:
function encodeID(s) {
if (s==='') return '_';
return s.replace(/[^a-zA-Z0-9.-]/g, function(match) {
return '_'+match[0].charCodeAt(0).toString(16)+'_';
});
}
But you've still got a problem if the same user_id
occurs twice. And to be honest, the whole thing with throwing around HTML strings is usually a bad idea. Use DOM methods instead, and retain JavaScript references to each element, so you don't have to keep calling getElementById
, or worrying about how arbitrary strings are inserted into IDs.
eg.:
function addChut(user_id) {
var log= document.createElement('div');
log.className= 'log';
var textarea= document.createElement('textarea');
var input= document.createElement('input');
input.value= user_id;
input.readonly= True;
var button= document.createElement('input');
button.type= 'button';
button.value= 'Message';
var chut= document.createElement('div');
chut.className= 'chut';
chut.appendChild(log);
chut.appendChild(textarea);
chut.appendChild(input);
chut.appendChild(button);
document.getElementById('chuts').appendChild(chut);
button.onclick= function() {
alert('Send '+textarea.value+' to '+user_id);
};
return chut;
}
You could also use a convenience function or JS framework to cut down on the lengthiness of the create-set-appends calls there.
ETA:
I'm using jQuery at the moment as a framework
OK, then consider the jQuery 1.4 creation shortcuts, eg.:
var log= $('<div>', {className: 'log'});
var input= $('<input>', {readOnly: true, val: user_id});
...
The problem I have right now is that I use JSONP to add elements and events to a page, and so I can not know whether the elements already exist or not before showing a message.
You can keep a lookup of user_id
to element nodes (or wrapper objects) in JavaScript, to save putting that information in the DOM itself, where the characters that can go in an id
are restricted.
var chut_lookup= {};
...
function getChut(user_id) {
var key= '_map_'+user_id;
if (key in chut_lookup)
return chut_lookup[key];
return chut_lookup[key]= addChut(user_id);
}
(The _map_
prefix is because JavaScript objects don't quite work as a mapping of arbitrary strings. The empty string and, in IE, some Object
member names, confuse it.)
Input sanitization in ReactJS
It's sanitized by default, you don't need a sanitization method unless you are using dangerouslySetInnerHTML which is not the case.
Simplest way to escape all special chars of user input text
My inital answer would be to create a options element and set the innerText instead of innerHTML
but since u use jQuery...
$('#x').prepend($('<option>', {text: userInput}))
Sanitizing input to stick into a hidden input value with jQuery
Instead of doing this with html strings, create an actual element and set it's value property using val()
.
You can sanitize any possible html out of it by first inserting the string into a content element as text and retrieving it as text.
Note that the value property does not get rendered in the html the same as value attribute does so quotes are not an issue
$("#myButton").on('click', function(){
// sanitize any html in the existing input
var myValue = $('<div>', {text:$('#myInput').val())).text();
listSize++;
// create new elements
var $listItem = $("<li>",{text: myValue});
// set value of input after creating the element
var $input = $('<input>',{ type:'hidden', name:'foo'+listSize}).val(myValue);
//append input to list item
$listItem.append($input);
// append in dom
$("ol.myList").append($listItem);
});
Do I need to sanitize user input before posting to query_posts?
The parse_query
contains general sanitation, not specific ones to your ( unknown ) case or data type validation. The docs do not mention that because it assumes that programmers will do that .
The CODEX is a great tool - that I use every day, but you must understand that it is not 100% correct, nor completed . It is more of a specific guidlines .
The rest is up to one`s common sense.
I suggest you read HERE and also HERE if you want codex reference for data sanitation and validation - and also for a list of specific data type functions that are built-in into wordpress.
So the answer to your direct question is simply " YES " . you should sanitize / escape , and "NO" , you should assume it is not safe ( even if it is, or you assume that it is ) .
Do I have to explicitly sanitize input fields in Angular 6?
I appreciate your questions, it may be useful to others. Under no circumstances should the backed ever trust the front end, no framework, no custom library, nothing. If someone can exploit, inject, or otherwise harass your backed, they will, period. They will do so bypassing any front end framework or library and make direct requests to the endpoint, masquerading as anything necessary to do so.
And as @etarhan said, read this: https://angular.io/guide/security
Related Topics
Why Does JavaScript Hoist Variables
How to Clone a JavaScript Object Except for One Key
Access Denied to Jquery Script on Ie
Firebase -> Date Order Reverse
Facebook How to Check If User Has Liked Page and Show Content
Nodemailer with Gmail and Nodejs
How to Check If the React Component Is Unmounted
Browser Event When Downloaded File Is Saved to Disk
What Is the 'Constructor' Property Really Used For
Getting the First Index of an Object
How to Automatically Reload a Page After a Given Period of Inactivity
How to Check If a Number Is Between Two Values
Capture Value Out of Query String with Regex
Add Event Handler to HTML Element Using JavaScript
How to Get All Options of a Select Using Jquery
How to Filter Array When Object Key Value Is in Array
Jqgrid: Change Background Color of Row Based on Row Cell Value by Column Name