Web Application Security: How Design Can Protect Your Data

The importance of security in web application design.The Intersection of Design and Security

When we talk about Web application security, we often think about the technical side that is hidden from users' eyes. The first things that come to mind are encryption, masking, and data anonymization, which undoubtedly fall within the competence of design agencies. But what if we talk about communicating with users to teach them to protect their own information and assure them that they are safe? This is where designers come into play.

It's important to understand that creating a secure product begins not just in the development process, but already in the research phase. Some applications require identity verification (like banking apps), some require onboarding that explains how to protect oneself from malicious actors (for example, creating complex passwords and not sharing them with anyone), and some applications, like calculators, don't require any special security. Unless, of course, you want to hide from someone that you're too lazy to add simple numbers.

Roughly speaking, the digital product design company's task in the research phase is to identify the strengths and weaknesses of the product in order to protect users from malicious actors. Design strategies for security - that's what we'll discuss today.

Principles of Secure Design for Web Applications Low

No matter how much we talk about security, with the development of technology, not only methods of protection emerge, but also methods to hack that same protection. Attackers always try to find new unique ways to cause harm to the defenders. Modern hackers have enormous access to information that we may not even be aware of, and an even greater range of ways they can apply this information. But that doesn't mean we can't make their task more difficult. No matter how intimidatingly difficult or even impossible it may seem, by following certain principles, you can reduce the likelihood of a breach to zero. Let's talk about the best secure design practices.

The principle of least privilege. The principle of least privilege is a fundamental principle of secure design. It involves providing access only to the necessary information to perform specific tasks. For example, if you are developing a web application for an online store, a customer support operator responsible for processing returns and exchanges likely does not need access to financial data or customer accounts. However, a financial manager would require full access to financial reports and transaction data. The key is to ensure that each user has access only to the data and functions necessary for their job responsibilities. This minimizes potential security risks associated with compromised credentials or system breaches.

The same applies to users. Ensure that users have sufficient access to use the application's functionality, and delegate other responsibilities to administrators.

The principle of separation of duties. This principle is indirectly related to the previous principle of least privilege. Just as there, each employee should not take on more responsibilities than are within their competence. Security can often be negatively affected by the human factor. A particular risk arises when people perform work they are not skilled in or should not be doing. This not only leads to errors in task execution but also communication gaps, as entering someone else's territory, we always make changes, which we must inevitably inform the person responsible for this territory. For example, if a return operator starts organizing not only product returns but also funds, it can complicate the work of accountants or confuse buyers. Or if users have access to adding and changing data that is visible to all users. This can lead to the fact that the information on your platform will no longer be current, truthful and protected.

The principle of comprehensive protection. The principle of comprehensive protection (Defense in Depth) involves using multiple layers of security, each of which provides protection against different types of threats. This multi-layered strategy significantly enhances the application's security level because each layer acts as an additional barrier to potential malicious actors. For example, instead of relying solely on a combination of a username and password, include additional authentication factors. These could be SMS or email codes, additional authentication apps or biometrics. Verify the IP addresses from which users log in: create a whitelist of addresses, check geolocation and look for anomalies. You can also use the beloved Captcha if your application is potentially vulnerable to bot attacks. Use rate limiting to prevent password guessing attacks. Use one-time links to log into your account. With the help of design, you can create and implement a strategy where the user goes through all stages of protection without fear and irritation.

Fail Security. Ensure that any failures and errors in your application do not play into the hands of attackers. The application should always remain in a secure state. For example, if the system cannot verify a user's credentials due to a database failure or network error, access should be denied rather than granted. Similarly, if the web server cannot load a page due to an internal error, it should return a 500 (Internal Server Error) code instead of showing detailed error information that could aid an attacker.

From this, it can be inferred that the best solution is to initially make access to important information prohibited. If it turns out that the user did not receive access to the information he needs, he will probably write to you about it. But if, due to your mistake, an attacker gains access to the information, you won't know about it until it's too late. Always prioritize data security.

Open Design. The system design should not remain secret. Security mechanisms should be based not on the fact that attackers do not know them, but on having certain easily protected keys or passwords. Keeping secrecy for any widely distributed system is simply impossible.

The principle of open design is based on Kerckhoffs's principle, which states that the security of a cryptographic system should depend only on the secrecy of the keys. All other aspects, including the algorithm, should be known to the public.

The opposite of the open design principle is security through obscurity, where a system is protected because no one knows how it works. This is a bad idea because attackers can obtain project documentation, source code, or reverse-engineer the product to understand its operation. Moreover, attempting to conceal the implementation makes security audits and checks extremely difficult, if not impossible.

Psychological Acceptability. It is important for the user interface to be easy to use so that users can apply security mechanisms automatically and without difficulty. When the user's mental model matches the security mechanisms they use, the number of errors is minimized. If the user has to translate their concepts of protection into a completely different specification, they will make mistakes and encounter misunderstandings.

When developing a security system, it is important to remember that your users are people. Simply put, if you make security too complicated, at some point you will notice that it is ineffective. If the authentication process is inconvenient, users will hate it. And hatred here means that they will try to bypass it, avoid it altogether, or stop using your product. Unfortunately, security and ease of use often contradict each other: increasing one inevitably leads to decreasing the other. You need to find a working compromise where security is ensured, but the product remains convenient. In most cases, this is a challenging task.

It is also important to understand that not all applications require enhanced protection. If a user uses a calendar or notes, they do not necessarily need to verify their identity, as they likely already did so through their device. But when it comes to finances, additional protection is mandatory.

‍

[[cta10]]

Design Strategies for Enhancing Security

If we could sum up everything we're going to talk about in one task, it would be this: we must help people make safe decisions while using the application. 

Though we try to protect our users from potential threats, we ourselves are the primary threat. The user who installed our application for the first time hasn't learned to trust us yet, but we already want to know the name of their first pet. At this stage, it's important to be open with users and explain during the first interaction that nobody will find out about their data or the name of their pet hamster, because we use certain methods of protecting user data. While we, as law-abiding people, will put information about security on the Privacy Policy page, we must act with the understanding that our users probably won't read it.

Tone of Voice (TOV) is also crucial in earning trust. How would you react if you were told upfront that if you don't secure your data using the methods suggested by the applications, there's a high probability that fraudsters will use the name of your pet against you? Of course, I'm exaggerating—the pet will remain safe. However, the fact that bank account details could be at risk is unlikely to motivate users to continue with registration. Here, we're using fear and imposing our methods, which discourages users from buying our product. Fear makes us run away from danger and shuts off rational thinking, leaving a negative impression and reluctance to return. Now, imagine if you reassured users that their data is safe with you, and if they take a few more steps (such as choosing a complex password), their security level will increase several times. Who would refuse to use minimal effort to achieve maximum results?

Great, our users are ready for anything. So, what security methods will we offer them?

The simplest and most traditional method of protection is password entry. We're already accustomed to the fact that all our social networks, bank accounts, cloud storage, and devices require a password for access. If I count how many times I've been asked to enter a password in the last week, I could probably name more than twenty programs and devices. Imagine if you asked me, "Did you use different passwords for all these cases?" And then I ask you, "Did you?" I think the point is clear. In a world where we leave so many digital footprints, every move requires identity confirmation, and we would never create such a puzzle for ourselves or invent a new strong password each time. It would simply be impossible to remember them! The modern problem with passwords is that they've lost their authority, as obtaining one password from a user's social network grants access to half of their accounts for attackers. So, what can we do to avoid becoming that starting point? Here are a few ideas.

Two-factor authentication (2FA). 2FA adds an additional level of User authentication design by requiring users to enter a code sent to their phone or email, or to use a hardware security key. This significantly complicates unauthorized access even in the event of a compromised password.

Biometric authentication. Biometric data such as fingerprints, facial recognition, and iris scanning are unique to each individual and difficult to forge. Modern devices often have built-in biometric scanners, making this method convenient for users.

Hardware tokens. Hardware tokens like YubiKey provide an additional level of security by generating one-time codes or connecting via USB or NFC for authentication. This method is highly reliable since physical access to the device is required.

Mobile authentication apps, one-time passwords (TOTP): Apps like Google Authenticator or Authy generate one-time passwords valid for a short period. This method offers a high level of security without the need to remember permanent passwords.

Risk-based authentication, contextual factors. This method analyzes behavioral factors such as location, access time, device type, and user behavior. If the system detects unusual activity, it may require additional checks.

One-time passwords (OTP). One-time passwords are sent to the user via SMS, email, or special apps and are valid for a short period. This method is often used in combination with other authentication methods to enhance security.

Passwordless authentication - login via email or SMS link. Users can log in by clicking a link sent to their email or phone, eliminating the need for a password. This method is convenient and secure.

Previous methods, from a Security-focused design and development perspective, almost certainly provide protection for your users' accounts. But never forget the human factor. We are not robots but humans (at this stage, pass the Captcha to confirm). Humans are prone to making mistakes, trusting, and making decisions based on emotions. The task of designers here is not just to provide space for internal protection but also to teach users to protect themselves independently. Implementing educational onboarding that explains to users the importance of their data security increases the likelihood that malicious actors will not be able to take advantage of their trust. Be open with them, explain why you used such data protection methods, ask them not to give keys to their accounts to third parties, identify the circle of people and programs that can request access to their data legally. Build communication with your users so that they trust you and not the malicious.

Common Design-Related Security Pitfalls

When developing secure systems, several common mistakes can compromise the security of your application. Understanding these errors and ways to address them is crucial for creating reliable and secure platforms. Your task is to create a comfortable and secure space for storing your users' data. Secure web development - is also a mandatory step in earning apps, because it is responsible for keeping the data inside and outside the app safe.

So, we've gathered common mistakes that often surface in applications for you to study and avoid repeating.Secure web development

Insufficient Input Validation

• The absence of proper validation and sanitization of user input can lead to various attacks such as SQL injections, cross-site scripting (XSS), and buffer overflow.
• To avoid this, always validate input data on both the client and server sides. Use parameterized queries and prepared statements to prevent SQL injections. Cleanse input data to remove or encode potentially dangerous characters.

Improper Authentication and Authorization

• Weak authentication mechanisms and improper authorization checks can allow unauthorized access to confidential data and functions.
• As mentioned earlier, to prevent this, implement strong multi-factor authentication (MFA). Use reliable authorization mechanisms such as role-based access control (RBAC). Regularly review and update access controls, as attackers are persistent and technologies evolve.

Insecure Storage of Confidential Data

• Storing confidential data, such as passwords or personal information, without proper encryption can lead to data leaks.
• From a development perspective, use robust encryption algorithms for data at rest and in transit. Avoid storing confidential data unless absolutely necessary. Do not request users to share data that is not mandatory for using your application. Implement proper key management practices, such as generating random keys with limited lifespans, key backup and recovery, key monitoring and auditing, and applying the principle of least privilege for access to them.

Poor Session Management

• Inadequate session management can lead to session hijacking or fixation attacks.
• To avoid this, use secure, randomly generated session identifiers. Implement session timeouts and expiration after periods of inactivity. Regenerate session identifiers after user login and other critical actions.

Insecure Default Settings

• Default settings often go unnoticed by users, increasing the likelihood of using insecure values.
• Change default settings, such as passwords and access controls, to more secure values. Provide an intuitive interface for users to manage features and services. Use graphical indications when a feature or service is enabled or disabled. Disable unnecessary features and services. Regularly audit configurations to ensure their security.

Failure to Apply the Principle of Least Privilege

• Granting users or systems more privileges than necessary can lead to security breaches if those accounts are compromised.
• Follow the principle of least privilege by providing only the minimum permissions necessary for users. Regularly review and adjust privileges as needed. Use access control to limit the scope of actions and data available to each user.

Ignoring Security at All Stages of Development

• Failing to integrate a security strategy at every stage of development can lead to vulnerabilities in your application.
• To avoid this, carefully consider each security requirement during design. Incorporate security practices at every stage of the software development lifecycle (SDLC). Conduct regular security training for developers. Perform threat modeling, code reviews, and security testing as part of the development process.

Improper Error Handling and Information Leakage

• Poor error handling can expose confidential information or help attackers understand the system.
• Implement generic error messages for users and detailed error logging for administrators. Ensure error messages do not disclose confidential information such as stack traces or database details. Use secure coding practices for safe exception and error handling.

Lack of Secure Data Transmission

• Transmitting confidential data over insecure channels can lead to interception and subsequent manipulation.
• It's crucial to use secure data transmission protocols like HTTPS, TLS, and SSH. Ensure all transmission of confidential data is encrypted. Regularly update and configure cryptographic libraries and protocols to use the latest security standards.

Certainly, learning from your own mistakes is valuable, but when the security of users you're responsible for is at stake, the risk becomes too great. We hope the above errors and recommendations will help you avoid difficulties in securing your application. If you need more advice, we're always here to help — just ask! :)

Case Studies: Successful Secure Design Implementations

Salesforce

Salesforce is an excellent example of a web application where security is built into every level, protecting data and complying with regulatory requirements.

One of the key aspects is Role-Based Access Control (RBAC), where users are granted access to information and functions based on their roles within the organization. Users are assigned roles, each with its own set of permissions. Profiles define which functions and data are accessible to users based on their roles. Think of each employee having their own keycard that only opens the doors they need access to. Permissions are configured to minimize access to unnecessary data and functions, thereby minimizing the risk of data leaks by providing access only to necessary information.

Data encryption is another crucial measure. Imagine your data transformed into a complex cipher to prevent unauthorized access. All data stored in Salesforce is encrypted using modern algorithms and HTTPS/TLS protocols. Even if data is stolen, it remains inaccessible to attackers without the encryption key.

Encryption key management, offered through Salesforce Shield features, allows organizations to control their encryption keys. Secure data transmission is ensured through the use of HTTPS, TLS, VPN, and IP whitelists, preventing Man-in-the-Middle (MITM) attacks. This is like creating a secure tunnel for your data, allowing it to travel without fear of interception.

Regular security checks and audits help identify and address vulnerabilities. Salesforce offers the Security Health Check tool, which assesses an organization's security status and provides improvement recommendations. High-level security support helps meet internal and external security standards.

Salesforce also conducts security incident monitoring and management. Imagine having a 24/7 security service that monitors suspicious activity and is ready to immediately respond to threats. In case of a threat, Salesforce has a response plan that includes user notifications, incident isolation, and investigation. These measures ensure quick detection and response to threats, minimizing their impact.

In summary, Salesforce has integrated a multi-layered approach to security, protecting user data with access control, encryption, secure data transmission, and incident management. These measures help comply with regulatory requirements, enhance user trust, and ensure business continuity.

Facebook

Facebook makes every effort to ensure user security through various design aspects. Their interface is designed to be simple and intuitive, making the process of configuring security and privacy settings accessible and understandable for everyone. This is crucial because Facebook users come from different generations, so the way security operations are conducted must be clear and accessible to all.

One of the key aspects is two-factor authentication (2FA), which adds an additional layer of protection by requiring a code from SMS or an app to confirm login. Additionally, you receive a notification when logging in from a new device, which helps quickly identify suspicious activity.

Facebook also protects its users from malicious content such as spam and phishing links. They employ automated systems and teams of moderators to handle user requests.

A significant benefit is the constant delivery of notifications and tips that educate users and alert them to the latest threats and security measures.

The social network secures personal messages and user data through encryption to prevent unauthorized access. To detect and prevent fraudulent activity, phishing, and other threats, Facebook uses machine learning and artificial intelligence technologies.

As mentioned earlier, it is important to always update and moderate security systems, which Facebook excels at. They also conduct security testing, including vulnerability discovery reward programs. These measures help them maintain a high level of security and privacy, creating a safer and more protected online space for their users.

Conclusion

Design plays a central role in the security of many applications. Specifically, the approaches to security in the examples provided differ somewhat. Facebook focuses on simplifying and making security tools accessible to all users, whereas Salesforce emphasizes technical and organizational measures, providing access control and data protection at a deeper level. In both cases, thoughtful design contributes to creating a safe and reliable environment for users, maintaining their trust and compliance with regulatory requirements.

When we design applications, we always define their goals and tasks, based on which we implement an appropriate security strategy. Depending on the functions the application performs and the information it stores, we select a specific protection method that helps our clients secure their users.

[[cta12]]

Tools and Resources for Secure Design

Creating secure web applications requires the use of best practices, the right tools, and constantly updating your knowledge about new threats. Let's start with the tools that will help you in this process.

For static code analysis, SonarQube and Fortify SCA are excellent choices. These tools automatically check your code for bugs and vulnerabilities. If you need dynamic analysis, consider OWASP ZAP and Burp Suite. They help identify issues in your application in real time.

Dependency checking is also important. OWASP Dependency-Check and Snyk can help you find known vulnerabilities in your libraries and packages. If you work with containers, use Clair and Anchore to analyze them for security.

There are also time-tested frameworks and best practices. The OWASP Top Ten and SANS CWE Top 25 lists highlight the most critical vulnerabilities and errors. Implementing Secure SDLC methodologies helps integrate security at all stages of development.

For additional protection, use helpful libraries and plugins. Helmet for Express.js sets secure HTTP headers, and bcrypt provides reliable password hashing. To protect against CSRF attacks, the csurf library is a good choice.

Don’t forget about education. OWASP Cheat Sheets offer concise and useful guides, while the Web Security Academy by PortSwigger provides interactive courses and labs. Online courses on Pluralsight and Udemy can also help deepen your knowledge.

For more in-depth study, we recommend books such as "The Web Application Hacker's Handbook," which teaches how to find and fix vulnerabilities, and "Security Engineering," which explains how to build secure systems. "Hacking: The Art of Exploitation" will give you practical skills in secure programming.

Join communities to stay updated on the latest trends. OWASP has many resources and tools available. Stack Overflow and subreddits like r/netsec and r/webdev are great platforms for sharing experiences and discussing security issues.

Using these tools and resources will significantly enhance the security of your web applications, helping to identify and mitigate vulnerabilities at all stages of development.

Conclusion

Enhancing security through design is increasingly important in today’s world. People are more frequently digitizing their information, conducting documentation, financial transactions, communication, and work electronically. All this data can become a target for hackers who can use this information against your users. Just when you think you have developed an unbreakable security method, attackers may have already devised ten ways to circumvent it. Therefore, alongside technological advancements, it is crucial to continuously monitor, update, and test new methods.

To achieve the optimal balance in your product, it is important to collaborate with everyone involved in the process, including security experts, engineers, designers, and other specialists. Security encompasses many different areas, so it is vital that everyone actively participates in discussions.

Combining UX and security is entirely possible. You can make your product both secure and user-friendly by enhancing both these aspects simultaneously.

Need help with your product? Contact us.