Develop Reference

Is this input sanitization regex safe?

I have an input field where I expect the user to enter the name of a place (city/town/village/whatever). I have this function which is use to sanitize the content of the input field.
sanitizeInput: function (input) {
return input.replaceAll(/[&/\\#,+()$~%.^'":*?<>{}]/g, "");
}
I want to remove all special characters that I expect not to appear in place name. I thought a blacklist regex is better than a whitelist regex because there are still many characters that might appear in a place name.
My questions are:
Is this regex safe?
Could it be improved?
Do you see a way to attack the program using this regex?
EDIT: This is a tiny frontend-only project. There is no backend.

Your regex is perfect to remove any special characters.
The answers are :
1.the regex is safe , but as you mentioned it is a vuejs project so the js function will run on browser. Browsers basically not safe for doing user input sanitization. You should do that in backend server also , to be 100% safe
You can not improve the regex itself in this example. But instead of regex , you could use indexOf for each special characters also ( it will be fastest process but more verbose and too much code)
Like :
str.indexOf('&') !== -1
str.indexOf('#') !== -1
Etc
3.same as answer 1,the regex is safe but as it is used in browser js , the code an be disabled , so please do server side validation also.
If you have any issue with this answer ,please let me know by comment or reply.

It is important to remember that front end sanitization is mainly to improve the user experience and protect against accidental data input errors. There are ways to get past front end controls. For this reason, it is important to rely on sanitizing data on the backend for security purposes. This may not be the answer to your question, but based on what you are using for a backend, you may need to sanitize certain things or it may have built in controls and you may not need to worry about further sanitization.
ps.
Please forgive my lack of references. But it is worth researching on your own.

Email validation in JavaScript when there are (soon to be) 1000's of TLD's

I just read an article which states:
Internet domain addresses opened up to wave of new suffixes
Internet naming board approves huge
expansion of approved domain
extensions with .hotel, .bank, or
.sport auctions likely.
Twenty-six years after .com was first
unveiled to the world, officials have
swept away tight regulations governing
website naming, opening up a whole
world of personalised web address
suffixes.
But... I just learned how to validate email addresses by checking (among others variables) the number of characters used after the dot (i.e., .com, .fr, etc.). What now?
Analysts say they expect 500 to 1,000
domain suffixes, mostly for companies
and products looking to stamp their
mark on web addresses, but also for
cities and generic names such as .bank
or .hotel.
Maybe this is not a problem. But how are we going to validate email addresses? What’s the plan?

IMO, the answer is to screw email validation beyond <anything>#<anything>, and deal with failed delivery attempts and errors in the email address (both of which are going to happen anyway).
Related:
How far should one take e-mail address validation?

As I've answered elsewhere, this regex is pretty good at handling localization and the new TLDs:
(?!^[.+&'_-]*#.*$)(^[_\w\d+&'-]+(\.[_\w\d+&'-]*)*#[\w\d-]+(\.[\w\d-]+)*\.(([\d]{1,3})|([\w]{2,}))$)
It does validate Jean+François#anydomain.museum and 试#例子.测试.مثال.آزمایشی, but it does not validate weird abuse of those nonalphanumeric characters, for example '.+#you.com'.

Validating email addresses beyond a check for basic, rough syntax is pointless. No matter how good a job you do, you cannot know that an address is valid without sending mail to it and getting an expected reply. The syntax for email addresses is complex and hard to check properly, and turning away a valid email address because your validator is inadequate is a terrible user experience mistake.

See What is the best regular expression for validating email addresses?.
It’s with the current TLD's already quite impossible to verify email address using regex (and that’s not the fault of the TLD's). So don't worry about new TLD's.

The way I see it, the number of TLDs, while much larger than today's, will still be finite and deterministic - so a regex that checks against a complete list of possible domain suffixes (whether that list is your own or, hopefully, provided by a reliable third-party such as ICANN) would do the trick.

Real-time password rule checker?

I am doing a bit of preliminary investigation for my school (I work for the IT department as a student). The students here have to change their passwords every 6 months, and many of them struggle with the (many) password rules that are enforced. That is, they often have to make several attempts at setting a new password.
The rules are:
Must be 8 characters or more in
length
Must contain 3 of 4 types of
characters (capital, lowercase,
number, special character)
Must not contain the user's first,
last or middle name
Must not contain the user's username
Must not match any password used
before
User must type password in twice, and
typed passwords must match exactly
I have a few questions:
Is it possible to create a web-based
password checker that provides
real-time feedback as the user types
in their new password? I am
imagining a checklist on one side of
the web-page where green checkmarks
are activated as the password meets
more criteria.
Is it possible to do perform this
checking securely and entirely
client-side?
Where would one start on such a task?
Is there a guide you can recommend?
Please keep in mind that I am not a web developer. Also, please leave any witty comments like "change the password policy" or "they're just dumb users" out of here.

Is it possible to create a web-based password checker that provides real-time feedback as the user types in their new password? I am imagining a checklist on one side of the web-page where green checkmarks are activated as the password meets more criteria.
Yes.
Is it possible to do perform this checking securely
As the lights go green, it exposes information about where in a password the requirements are met. That will leak data about the password to anyone who can see the screen.
and entirely client-side?
Yes.
Where would one start on such a task?
A list of rules in the HTML document with a FAIL image next to each one. Programatic versions of the rules in JS. Then just test each rule in turn in a loop on each keypress event on the password input and swap PASS and FAIL images depending on if the rule is followed or not.
You'll need to hit the server with an XMLHttpRequest object to check if a password has been used before. Make sure you only store hashed and salted passwords there though.
Please keep in mind that I am not a web developer.
Then I recommend you get one or become one.
Also, please leave any witty comments like "change the password policy"
Fine, leaving the wit aside and sticking to the serious issue:
If people have problems coming up with passwords that conform to the policy, then they will have problems remembering them. This will lead to an increase in people having to have them reset (more work for the IT dept) and in people writing them down (which is probably going to be less secure then a password that is easier to guess / brute force).

Most of the rules you specify can be checked in real time using javascript, more specifically using regular expressions. Checking whether the password has been used before should be done on the server side to be secure.

Is it possible to create a web-based password checker that provides real-time feedback as the user types in their new password? I am imagining a checklist on one side of the web-page where green checkmarks are activated as the password meets more criteria.
Yes, but you will need to know some javascript to do it.
Is it possible to do perform this checking securely and entirely client-side?
No, and yes, or yes and no, but not both. You can do the check entirely client-side (except for checking against previous passwords, which would need database access). But nothing, NOTHING, on the client-side is ever secure. Anything you do on the client-side should be considered a help to the user. All validation must always be made again on the server.
I don't want to be a smart-ass and tell you to change the password policy, and doing so because validation would be "hard to do" would be a bad choice, but I would like to recommend the following article to the one that has decided on the password policy: http://www.baekdal.com/tips/password-security-usability

Must not match any password used before <--that one is the only one that has to be performed server side, but can be done securely using hashes or some form or encryption, because a client side copy of said passwords would not be a good thing.

Regexp's are probably where you'd wanna start. If you're unfamiliar with regexp's in web development, I'd suggest you start here: http://www.w3schools.com/jsref/jsref_obj_regexp.asp. If you truly have no experience in web development, I'd have to ask how you got stuck with a job where you'd have to learn a new language to accomplish a relatively simple task. You'll definitely need to have an understanding of javascript to do something like this all client side. Oh, and I wouldn't recommend testing
Must not match any password used before
It's too risky to do this in a simple way client side and complicated to do it securely without bringing in help from outside libraries, etc. Hope this helps and good luck!

What regex is good for email validation?

I'm using the following for email validation:
var filter = /^(\w+)(\.\w+)*#(\w+)(\.\w+)+$/;
Just noticed that it does not support xxxx+wildcard#gmail.com (it does not support the +wildcard part). Any way to get that added?

You should use \S+#\S+\.\S+, which will match anything with an # and a ..
Anything more than that will reject valid but obscure addresses.
Even this will reject valid but obscure addresses, such as "Test Me"#localhost.
However, these are never used in practice. [citation needed]

I liked SLak's answer. I actually have a regular expression I wrote awhile back that's even more open-ended.
^.+#.+\..+$
The idea behind it is similar. Don't try so hard. Instead, err on the side of accepting too much. To my knowledge this regex should accept every conceivable valid email address (and some invalid ones as well).

What Event to Trigger Javascript Form Field Validation and Formatting?

Let me first say, we validate every field on the server side, so this a question
about client-side usability.
What is the conventional wisdom on exactly when to validate and format html form input fields using javascript?
As an example, we have a phone number field. We allow numbers, spaces, parentheses, and hyphens. We want the field to have ten digits. Also, we want the field to look like (123) 456-7890, even if the user doesn't type it that way.
It seems like we can
Validate and format it when the user
exits the field.
Validate and format
on every character entered.
Intercept keystrokes and prevent the
user from entering characters that are wrong.
Some combination of the above (e.g.
format on entry and validate on exit, prevent on entry and format on exit, etc.)
[Added] Wait and do all the validation and formatting when the user clicks submit.
I've seen it done all of these ways, but I can't find information about what
is best (or even generally accepted) from a usability perspective, and more importantly, why.
[Edit: Some clarification]
We are absolutely not enforcing any format standards. When I say format, I mean we'll use javascript to rewrite things so they look nice. If the user types 1234567890, we'll change it to (123) 456-7890. There are no "formatting rules" that can fail.
I distinguish this from validation because if they don't type enough numbers, we have to make them fix it.
I guess I should rephrase the question as "what is the conventional wisdom on exactly when to validate and exactly when to format...?
Good info in the answers so far!
EDIT: I'm accepting my own answer below in the hopes that others will find the link as helpful as I did.

Validate and format it when the user exits the field.
Yes. Provide noninvasive feedback to the user if validation or formatting rules fail. By noninasive I mean don't popup an alert or modal dialog box, thereby forcing the user to click something. Rather dynamically display a message adjacent or underneath the field where validation or formatting failed.
Validate and format on every character entered.
No. I think that hinders usability. Instead provide the user with a tooltip or some other hint as to what the formatting rules are or validation rules are. E.g. for a "required" field the practically ubiquitious asterisk, and for fields with formatting tell the user up front what the expected format is.
Intercept keystrokes and prevent the user from entering characters that are wrong.
If you are going to prevent the user from entering invalid characters, tell the user why you just blocked their input, noninvasively. Also,do not steal focus of the field.
So for me the general principles are:
Inform the user up front about your validation and formatting rules.
Do not assume the user is sighted, so keep web accessiblity and screen readers in mind. (Unless you are developing a web site that has a limited target audience such as an Intranet.)
Provide the user with noninvasive feedback, meaning do not make the user click on an alert box or modal dialog upon each failure.
Make it obvious which input box failed validation or formatting rules, and tell the user why their input failed.
Do not steal the mouse/pointer focus, when providing feedback.
Keep tab order in mind, so that when keyboard oriented users complete a field, they can hit tab and go to the next logical input/selection field.

I was going to describe various options but it may be beneficial just to use an existing js framework to handle input masks. Here is a good run down of various options

bmb states that they are accepting any format, and changing it to the desired format (xxx) nnn-xxxx. That is very good. The question is the timing of A) the format change, and B) the validation.
A) The format change should be done as the user exits the field. Sooner is annoying and later defeats the purpose of displaying the change at all.
B) Validation is most appropriately performed either on exiting the field or on submitting the form. Sooner is frustrating and confusing to the user. In a long and complex form, with more than one screen, I would favor doing validation on exiting the control to make corrections easier. On a short form, I would do it upon submit to avoid breaking the flow of filling out the form. It is really a judgment call, so test it with real users if at all possible.
Preferably you are testing your work with real users anyway, but if you do not have budget or access for that, a quick and dirty "user" test can help with decisions like this one. You can grab a handful of people who did not work on the software (as close a match to your real end users as possible) and ask them to fill out the form. Instruct them to enter things a specifically to get an error and then watch them correct it. Ask them to talk aloud through what they are doing so you don't need to guess at their thought process. Look for where they have issues and what seems to confuse/annoy them most.

By far the best answer so far was not an answer but a comment (see above.) I'm adding it as an answer in case anyone misses it in the comment.
See the following article on A List Apart.
Inline Validation in Web Forms by Luke Wroblewski

It depends per field. But for something like a phone number, it's generally pretty nice to prevent someone from even entering non-digits.
That way, when typing you'll notice that your 1-800-HELLOWORLD phone number isn't showing up correctly and realise that the field only accepts numbers (which you can also highlight with some sort of information field alongside the input field).
That seems to me to be a lot more inuitive and friendly than an awkward modal dialogue, pop-down error field or server-generated message displaying after you're done filling it out.
Of course, always balance the ultimate client-side validation with the ultimate technical requirements to build it. If you start down the path of, say, validating image uploads with Ajax before the page submits, that can be a pretty long road.
Edit: also, consider your audience. The more technically minded are going to be more accepting of "dynamic" forms than, say, people who are more accustomed to the non-Ajax approach to the Internet.

Personally I think formatting and validating on exit is the least bothersome to the user. Let them enter the number in whatever format they like (and there are a lot of these for a phone number) and then change it to the format you like. Don't force the user to conform to your preferences when you can handle the data in their preferred format.
Also, validation messages when I'm not done typing are annoying, and not being able to put a certain character in a text field is super-annoying.
The only exception I can think of is "is this value available" situations (such as creating a unique username) - in that case immediate feedback is really convenient.

I find the first three options to be really annoying. There's nothing worse than being interrupted in the middle of typing something.
Your user's main goal is getting through the form as fast as possible and anything you do that slows them down is just one more reason for them to give up on it entirely.
I also hate being forced to type something like a credit card # or phone # is exactly the right format to satisfy the form. Whenever possible, just give the user a box to type stuff into and don't make them deal with the formatting.
In the case of your phone #, let them enter it however they want, strip out anything you don't like, try to put it back together into the format you want ( (124) 567-8901 ) and throw an error if you can't.
If you absolutely must validate something to a specific format, do it when they submit the form and then highlight the fields that have problems.

The most user friendly way I've seen to do validation is to have an indicator that shows up next to the input field to indicate the value is invalid. This way you don't interrupt the user as they're typing and yet they can continually see whether or not they've typed a valid entry. I hate having to type information into a long form only to have the thing tell me at the end "Oh, you need to go back and fix field 1".
You can have the indicator be show/hidden as the user types. I use a warning icon when the value is invalid and I set a tooltip on the icon that explains why the value is invalid.
If you have the screen real estate, you could just put text such as "Valid" or "Must be in format XXX-YYY-XXXX".
Keep in mind that when you do per keystroke validation you also need to catch pasted text.
In addition to this, you should also prevent invalid keystrokes to be entered in the first place.

For usability best practices, I suggest reading How To Design The Perfect Form (more precisely Context & Assistance) and Beautiful Forms.
For a form validation framework, check the fValidator and iMask combo, they are complementary and thus work perfectly together.