Mod: Strip bad characters from Username

[crystal]

I did this so my site's usernames would not be email or web addresses or contain any special characters. This mod will strip out all bad characters while the user is typing. It will allow only A-Z, 0-9, and underscore (_) to be typed into the username field.

Open templates/default/user/userjoin.tpl

Find this (lines 1-28)

{literal}
<script language="JavaScript" type="text/javascript">
<!-- //
function checkform(frm) {
  {/literal}
     {$validation}
  {literal}
}
function showterms(){
	newwin=window.open("terms.php","Terms","menubar=no, scrollbars=yes, width=420, height=380, directories=no,location=no,resizable=yes,status=no,toolbar=no");
}
function new_freecap()
{
	// loads new freecap image
	if(document.getElementById)
	{
		// extract image name from image source (i.e. cut off ?randomness)
		thesrc = document.getElementById("freecap").src;
		thesrc = thesrc.substring(0,thesrc.lastIndexOf(".")+4);
		// add ?(random) to prevent caching
		document.getElementById("freecap").src = thesrc+"?"+Math.round(Math.random()*100000);
	} else {
		alert("Sorry, cannot autoreload freecap image\nSubmit the form and a new freecap will be loaded");
	}
}
//-->
</script>
{/literal}

Replace with this:

{literal}
<script language="JavaScript" type="text/javascript">
<!-- //
function checkform(frm) {
  {/literal}
     {$validation}
  {literal}
}
function showterms(){
	newwin=window.open("terms.php","Terms","menubar=no, scrollbars=yes, width=420, height=380, directories=no,location=no,resizable=yes,status=no,toolbar=no");
}
function new_freecap()
{
	// loads new freecap image
	if(document.getElementById)
	{
		// extract image name from image source (i.e. cut off ?randomness)
		thesrc = document.getElementById("freecap").src;
		thesrc = thesrc.substring(0,thesrc.lastIndexOf(".")+4);
		// add ?(random) to prevent caching
		document.getElementById("freecap").src = thesrc+"?"+Math.round(Math.random()*100000);
	} else {
		alert("Sorry, cannot autoreload freecap image\nSubmit the form and a new freecap will be loaded");
	}
}
//Strip bad characters
var badChars = /[-?!$\\@\/\#%\^\&\*\(\)\[\]\+\{\}\`\~\=\.,\'\";:|><]/;
function checkChars(val) {
var strPass = val.value;
var strLength = strPass.length;
var lchar = val.value.charAt((strLength) - 1);
if(lchar.search(badChars) != -1) {
var tst = val.value.substring(0, (strLength) - 1);
val.value = tst;
   }
}
// -->
</script>
{/literal}

Find this (now around line 153):

<input name="username" type="text" id="username" value="{$username}" size="{$smarty.const.FIELD_SIZE}" />

Replace with this:

<input name="username" type="text" id="username" value="{$username}" size="{$smarty.const.FIELD_SIZE}" maxlength="30"  onKeyUp="javascript:checkChars(login.username);"/>

Note: I have added a max length of 30 to the username field. This can be changed to your preference. I recommend setting a max length for all fields.

[cwp]

Thanks for sharing!

[Eric Barnes]

Yes very nice.

[Maffo]

Remember you will need to do this at php level also, javascript should only be used as a pre-validation and never relied on.

Also in my opinion it would be logical to have the characters you can have, rather than the ones you cant as there are literally hundreds in different languages.

PHP Code:

EG [^0-9a-zA-Z] 


^means NOT then all chars alpha-numeric

[juven14]

I agree with Maffo, all one has to do is turn off javascript and then they can bypass this process altogether. I think it is a worthy contribution, just be sure that your code is processed on the php end as well.

PHP Code:

//used to strip the characters
$username = preg_replace('/[^a-z0-9]/i', '', $username);

//used to identify if the characters are present
if (preg_match('/[^a-z0-9]/i', $username)) {
    return false;//quitting a function
    die('invalid characters');//quit execution
} 


[crystal]

Originally Posted by Maffo

Remember you will need to do this at php level also, javascript should only be used as a pre-validation and never relied on.

Also in my opinion it would be logical to have the characters you can have, rather than the ones you cant as there are literally hundreds in different languages.

PHP Code:

EG [^0-9a-zA-Z] 


^means NOT then all chars alpha-numeric

Since this isn't an actual part of the validation, I am just using the JavaScript to strip out the characters before they submit. I think this will have a pretty high rate of success, with the exception of the ancient browsers or browers with JavaScript turned off. In this case, those users would have to think of entering different characters. I was hoping username validation would be added into the script by the time too many slipped through.

If there is a way to include this in the php validation instead, I would much rather have that code! I did this to eliminate the problem the only way I could. I am hoping to add minimum characters to that field also. I think both things are essential in validation and should be added in to the script.

I'm not worried about other language characters because my site is in English, but I would like to clean up the code. I want do something like the php [^0-9a-zA-Z] but I haven't gotten the javascript to work yet in the stripping the field method, so the code I have works for now. Please feel free to clean it up!

[crystal]

Originally Posted by juven14

I agree with Maffo, all one has to do is turn off javascript and then they can bypass this process altogether. I think it is a worthy contribution, just be sure that your code is processed on the php end as well.

PHP Code:

//used to strip the characters
$username = preg_replace('/[^a-z0-9]/i', '', $username);

//used to identify if the characters are present
if (preg_match('/[^a-z0-9]/i', $username)) {
    return false;//quitting a function
    die('invalid characters');//quit execution
} 


John,
Thanks for the reply. Where would I put this PHP code? Would this include checking the username in server side validation (i.e. return an error message if the characters are present)? Or would it just strip the characters before entering into the database? I was hoping to get this like the other fields and have it checked on submit and return an alert box if neccessary.

[juven14]

You could do this with JavaScript to return the alert box, however, with PHP you would have to submit the form for it to then be processed and validated server-side.

I don't have a functional install of v4 to test this on, but I think it might work. Open userjoin.php find (around line:153):

PHP Code:

if ($validate->isError()) 


Add this just above like it is here:

PHP Code:

if (preg_match('/[^a-z0-9]/i', $_POST['username'])) {
  $errorList = $validate->_errorList;
  $errorList[] = array($_POST['username'], 'Your username has invalid characters.');
  $validate->_errorList = $errorList;
}
if ($validate->isError()) 


You would have to do this in the file where you modify the user as well.

[crystal]

John,
I tried the code you just posted and it works, except the error message. It will stop the form from being submitted if there are any special characters in the username field but the error message appears as:

The operation could not be performed because one or more error(s) occurred. 
Please resubmit the form after making the following changes:
1.

If we can get this working all the way then there is no need for the javascript (in the developer version). This is what I wanted all along! Is there any way to validate minimum characters in the field also?

Thanks!

[juven14]

Change this:

PHP Code:

$errorList[] = array($_POST['username'], 'Your username has invalid characters.'); 


To this:

PHP Code:

$errorList[] = array($_POST['username'], $_POST['username'], 'Your username has invalid characters.'); 


As for the length you can use the built in validation function isLessThan(field_name,error_message,max_integer)

PHP Code:

$validate->isLessThan($_POST['username'], 'The username must contain at least 8 characters/numbers.', 8);