Recently Otto-JS published a surprising finding. If your customer (or what's even worse you) enabled enhanced type checking it will result in sending passwords (if revealed) to their servers in plain text. More details about this vulnerability can be found here.
This is very concerning and exposes the risk of legal actions as it might result in sending the PII of your customers to services with which you do not have any agreement about PII data processing. Due to this any app owner should act swiftly and implement necessary changes.
This vulnerability is a coincidence of 3 features that improve user experience. Password reveal is a very common feature this day - it allows customers to double check if the inputted password is correct. Enhanced spell checking enables you to use the same spellchecking as popular services (like Google Search) by sending inputted values to external (online) services. Spellchecking attribute - enabled by default in some browsers - allows users to input proper values into forms, which improves the experience (especially on mobile devices where the input interface is not as efficient as traditional PC).
Before you will say that's not an issue at all. Please consider that the security of spellchecking services by default is much lower than PII processing services. We do know that every service can be hacked with enough effort. The ability to obtain a username + password is very tempting for bad actors all over the world.
How to mitigate this?
By default, you should start adding
spellcheck="false" attribute to all sensitive inputs (like username, password, and other sensitive PII). Ideally, you should reconsider adding it to all inputs that hold customer data (even inputs like the first name, and last name). You can also add
spellcheck="false" to the
<form> tag which should disable spellchecking for the whole form.
Ideally, you should implement an automatic rule that will be checking all your fields & forms automatically with every code change.
For the React-based web application, I've created a set of eslint rules (as a plugin) that can go through the code and scan for this vulnerability, and propose a fix. Plugin is called eslint-plugins-jsx-secure-form. It can be simply added as a dev dependency by running
npm install --development eslint eslint-plugin-jsx-secure-form and adding
"extends": ["plugin:jsx-secure-form/recommended"], to your eslint configuration file.