Security
Getting started with ... is a concise series introducing you to the practicalities of web development. You'll set up the tools you need to construct a simple webpage and publish your own simple code.
When you create a form, you work with user data. Your number one concern should be to ensure that user data is kept private and transferred securely. Let's have a look at what can be done.
Ensure your form is secure
As a first step, make sure to request as little data as possible. Don't ask for data you don't need, and always question whether you need all of the requested data. Less data means less risk, less cost, and less liability. In addition, reducing the number of fields in a form makes it less complex, easier to fill out, and can reduce abandonment rates.
Always use HTTPS, especially for pages that include a form. With HTTPS, data is encrypted when coming from the server and when going back to the server.
Say you're sitting in a café using public Wi-Fi. You open an e-commerce site and fill in your credit card information to purchase something. If the website uses HTTP, anyone (with the skills to do so) on the same public Wi-Fi could see your credit card information. If the website uses HTTPS, the data is encrypted and therefore protected from anyone trying to access it.
On your site, you should also make sure to redirect any HTTP requests to HTTPS. Learn more about how to redirect all traffic to HTTPS.
Help users to keep their data private
In the first module, you learned about two possible ways to transfer data:
using a GET request and using a POST request.
With a GET request, form data is included as a query string
in the request URL. If you submit a form that uses a GET request,
the browser adds the request URL including form data to your browsing history.
Convenient if you want to look up past form submissions,
for example for a search form. Not great at all,
if sensitive data is submitted,
and everybody with access to your browser history or local network can see this information.
Use POST requests for every form where data that's personal or otherwise sensitive may be submitted.
This way, the data is only visible to the backend script processing it.
What about saving and processing personal data directly in the browser?
You could use client storage, for example, localStorage to store personal data in the browser.
With regard to privacy, this is less than ideal.
Again, everyone with access to your browser is able to read this information.
You should only store encrypted values for personal data.
Ensure users can safely sign up and sign in
User account authentication is a complex issue in terms of privacy and security. It may be better to use a third-party identity provider, instead of building your own secure authentication system.
Learn more about best practices for account authentication, and password management.
Help users access their personal data
Many regions have laws and regulations regarding data protection and privacy, including the CCPA in California and the PDPA in India. Every website available in the European Union (EU) has to follow General Data Protection Regulation (GDPR), even if the site is not based in the EU.
GDPR sets guidelines for the collection and processing of personal information from people living in the EU. Consent is required to process personal data, users can request personal information that you store at any time, and you have to officially announce data leaks. A good thing for the user, as this helps to ensure that their privacy is respected. Learn more about GDPR.
Make sure your users know how you plan to process personal data. Transparency is the key to trust. Users should always be able to access, modify, and delete all data you saved for them.
Ensure users can update their personal data
Make it easy for users to update their personal data, including passwords, email addresses, and usernames. Notify users about changes to their stored personal data, and ensure users can revoke changes. For example, send an email to the previous and new email address after users change their email address.
Make it easy for users to delete their account, including all associated data, and where relevant, make it possible to download data. Account deletion is a legal requirement in some regions.
Require an additional authentication step, for example, re-entering the current password, to view or change personal information on your site.
Find out more: Web Application Privacy Best Practices.
Ensure all data is in good shape
In a previous module, you learned about validation on the frontend. Frontend validation is important, but users might still be able to submit invalid data. As a next step, you must also validate the data on the backend before saving the data in your database. This ensures that no invalid data is saved in your database.
Validation helps to ensure that the data format is valid, but you should still not trust data entered by users. How can you safely output the data? To prevent Cross Site Scripting (XSS), and ensure all data is safe to include in HTML, you must sanitize data before output.
Learn more about sanitizing data before output and, where possible, use the Sanitizer API.
Ensure all submissions come from real people
To help protect your data, you have various options to prevent spam submissions from bots.
The first option is to use a service such as reCAPTCHA, to distinguish between real people and bots. This requires you to include a JavaScript snippet on your page, and add extra attributes to your Submit button.
reCAPTCHA performs various checks to find out if you are a human. For example, it may ask you to identify images. Automated software, such as a bot, cannot accomplish these challenges and can't submit the form.
A honeypot
Another option is to use a so-called 'honeypot': a visually hidden form field. Humans won't see a honeypot field, but bots will fill it in. On the backend, your processing script can check if the field was completed. If it was, the submission was probably from a bot, and you can ignore it.
There are also services like Akismet, which can help you with spam protection. The Akismet filter works by combining information about spam captured on all participating sites, and then using those spam rules to block future spam. Akismet is transparent to the user, and catches most spam.
Check your understanding
Test your knowledge of security and privacy
What is the preferred method to transfer personal data using forms?
POST request.GET request.How can you prevent spam?