DEV Community: Azeezat Adebola

Securing Web Applications: Identifying and Mitigating Common Vulnerabilities

Azeezat Adebola — Sun, 07 Jan 2024 07:49:52 +0000

In today's digital world, web applications have become an important part of our lives, facilitating online banking systems, e-commerce platforms, social media networks, and many other services we use daily. However, the rise of web applications has also led to an increase in cybercrime and hacking incidents.

Without proper protection, web applications can be vulnerable to attacks, causing data breaches, unauthorized access, and financial loss. Understanding web application security and implementing effective measures is essential to prevent these attacks and protect users' data. By prioritizing security, we can build trust with users, ensuring they feel safe sharing their information.

Table of Content

What is Web Application Security?
Common Web Application Vulnerabilities - OWASP Top 10
- Injection
- Insecure Design
- Broken Access Control
- Cryptographic Failures
- Security Misconfiguration
- Server-Side Request Forgery (SSRF)
- Vulnerable and Outdated Components
- Software and Data Integrity Failures
- Security Logging and Monitoring Failures
- Identification and Authentication Failures
Conclusion

What is Web Application Security?

Web application security is a part of information security that keeps websites, web applications, and other web services safe. It involves taking measures to protect these applications from potential threats, vulnerabilities, and unauthorized access. The main goal of web application security is to detect and mitigate attacks that could compromise the security or functionality of web applications.

Common Web Application Vulnerabilities - OWASP Top 10

With cyber-attacks on the rise, it is essential to understand common vulnerabilities of web applications and how to mitigate them. The Open Web Application Security Project (OWASP), an open-source community dedicated to improving web application security, provides valuable insights through its OWASP Top 10 list. This list highlights the most dominant web application security risks and best practices to mitigate them. Let's explore these vulnerabilities and learn how to prevent them:

Injection

Injection vulnerabilities occur when malicious code or commands are injected into the input fields of a web application, allowing attackers to manipulate the system. SQL injection is a common injection that lets attackers exploit poorly written database queries to gain unauthorized access.

Another type of injection is cross-site scripting (XSS), where attackers insert client-side scripts into a website to access important information or perform undesirable actions. Other types of injection include command injection, LDAP injection, code injection, and cross-site request forgery.

How to Prevent Injection Vulnerabilities

Validate and sanitize user input, ensuring it matches the expected format and removing any harmful characters and script. Make use of frameworks and libraries that offer this functionality.
Use parameterized queries or prepared statements when interacting with databases, and avoid building queries with concatenated user input. This will help to prevent SQL injection attacks by separating the query structure from the user input.
Escape and encode data correctly when displaying it on web pages, as this will guard against cross-site scripting (XSS) attacks.
Opt for parameterized APIs or APIs that completely avoid interpreters. You can also use tools that offer object-relational mapping to improve security.
Regularly perform security testing, such as penetrative testing and code reviews, to detect and fix any vulnerabilities in your application.
Keep your web application and all its dependencies updated with the latest security patches and fixes. Make sure to review all updates before installation.

Insecure Design

Insecure design is a vulnerability that arises from the flaws in the architecture or design of a system. When security is not considered during the design phase, even the best security measures may not be effective. This leaves the system vulnerable to attacks that can cause system compromise or data breaches.

How to Prevent Insecure Design

Establish a secure development lifecycle with multiple security controls.
Prioritize threat modeling for access control, core flow, and application logic. Also, perform risk assessments to identify threats and implement necessary mitigation techniques.
Conduct regular penetration testing from the source code and database to the back-end network.
Stay informed about the latest security updates and create security awareness among your development team.

Broken Access Control

Broken access control, also known as inadequate authorization, is a vulnerability that occurs when authorization controls are not implemented properly. This can allow unauthorized access to sensitive data, account compromise, and damage to application availability, integrity, and confidentiality.

How to Prevent Broken Access Control

Perform comprehensive authorization checks and validations on all requests or actions.
Apply safe coding practices. Implement strong password management and identity verification.
Use secure session management techniques to prevent session hijacking or data leakage.
Monitor and audit access logs regularly and ensure all access control failures are logged and reported to administrators promptly.
Limit access to APIs and controllers to minimize the impact of automated attacks.
Instead of granting users permission to view, modify, or delete data, consider implementing a role-based access control (RBAC) model.

Cryptographic Failures

Cryptographic failures, formerly known as sensitive data exposure, occur when cryptographic algorithms or protocols are not implemented correctly. This can lead to exposure of sensitive information such as passwords, credit card details, or proprietary business secrets. Common examples of cryptographic failures include misuse of hashing algorithms, weak encryption algorithms, and poor key management.

How to Prevent Cryptographic Failures

When transferring sensitive data, use modern and secure protocols like Secure File Transfer Protocol (SFTP) and Hypertext Transfer Protocol Secure (HTTPS).
Use strong and adaptive hashing algorithms such as PBKDF2 or Script to store passwords securely.
Rather than using simple encryption, opt for authenticated encryption.
When generating keys, use cryptographically random bytes to create strong keys.
Update cryptographic libraries and systems regularly.

Security Misconfiguration

Security misconfiguration happens when safety protocols are not configured correctly, leaving your system vulnerable to attacks. It's similar to leaving a window unlocked or forgetting to set up a password for your Wi-Fi network, leaving you open to unwanted guests.

How to Prevent Security Misconfiguration

Synchronize development, operational, and QA environments for consistent security settings.
Follow security best practices when deploying applications, servers, or cloud services.
Create a solid platform by removing unnecessary features, components, and services.
Harden default configurations to mitigate vulnerabilities.
Document and maintain a secure baseline configuration for all your systems.

Server-Side Request Forgery (SSRF)

Server-Side Request Forgery (SSRF) is a dangerous cyber exploit that tricks a server into sending malicious requests. An attacker can use this vulnerability to bypass access controls, gain unauthorized access to sensitive information, or even take control of the server. Due to its ability to exploit the server's trust, SSRF can even penetrate robust security controls like firewalls and VPNs.

How to Prevent SSRF

Configure the firewall to deny all incoming web traffic by default and only allow necessary internal traffic.
Use network segmentation to isolate different segments and reduce the spread of breaches.
Secure API endpoints with proper authentication, authorization, and input validation.
Stay vigilant and question the legitimacy of any URLs you encounter to avoid being redirected to malicious domains and protect against "time of check, time of use" situations.

Vulnerable and Outdated Components

Vulnerable and outdated components refer to software, frameworks, libraries, and plugins that are out-of-date or known to have security vulnerabilities. Using such components increases the risk of security breaches. It's like having an important part of your fortress made of weaker materials, leaving an entry point for attackers.

How to Prevent Outdated Components Vulnerabilities

Always obtain components from trusted and official sources.
Use automated dependency management tools to track, manage, and update the dependencies.
Get rid of unnecessary features, files, and directories to make it easier to identify vulnerable components.
Stay up-to-date with security updates and patches. Apply them promptly to keep your system protected.

Software and Data Integrity Failures

Software and data integrity failures occur when software or data is corrupted, altered, or deleted without authorization. This vulnerability often happens in web applications that obtain resources from untrusted sources. When these resources are compromised, it can lead to unauthorized access, loss of data and functionality, and malicious code execution.

How to Prevent Software and Data Integrity Failures

Ensure that data and software sources are trusted and digitally signed.
Set up robust access controls and segmentation in your CI/CD workflow to secure your code.
Validate your data and use checksums to verify its integrity. Use strong checks and hash values for critical data.
Implement version control to track code changes and digital signatures to verify software package integrity.

Security Logging and Monitoring Failures

Security logging and monitoring failures happen when a system's logging or monitoring features don't function properly, making it difficult to detect security incidents. Without adequate logging, monitoring, or reporting, a web application can become an open target for attackers.

How to Prevent Logging and Monitoring Failures

Log all critical information like access security and authentication details, and include sufficient user information to identify suspicious accounts. Store the logs long enough to conduct any necessary investigations.
Generate logs in a standard format for streamlined management and analysis.
Implement a robust recovery and incident response strategy (like NIST 800-61r2) to reduce the impact of security issues.
Set up proper monitoring, alerting, and notifications to quickly detect and address security incidents.
Encrypt log data to protect against cyber threats. Regularly review and analyze logs for anomalies and suspicious activities.

Identification and Authentication Failures

Identification and authentication failures occur when a system does not verify the identity or credentials of users. This can lead to serious security incidents like data leaks, password cracking, and prolonged sessions caused by poorly set timeouts.

How to Prevent Authentication Failures

Use multi-factor authentication (MFA) for an extra layer of security. This can be done by asking users to provide multiple verifications, such as a password and a temporary code sent to their mobile device.
Implement strong password rules that combine numbers, symbols, and uppercase and lowercase letters.
Encourage users to create unique, complex passwords and to change them periodically.
Secure your sessions by setting an appropriate session timeout and password security in your database. Always invalidate sessions after logging out.

While the OWASP Top 10 is a valuable resource, it's important to remember that it does not encompass everything. The list primarily emphasizes server-side security, while many attacks target the client side. Therefore, you need to take a more comprehensive approach. The OWASP Top 10 is a good starting point, but you should supplement it with additional strategies based on your specific needs.

Conclusion

While software application development has become more secure over time, attackers are constantly looking for new ways to exploit weaknesses. To keep your web applications secure, following industry best practices and staying up to date on the latest cyber threats is essential.

It's also important to have a plan in place to quickly detect and respond to security incidents. Don't forget to educate your team about the best practices for web application security to prevent accidental security breaches. If you lack the resources to handle these in-house, you may consider outsourcing to a managed security service provider.

Resources

Easy Way to Build a Sign-Up Form with Validation Using React

Azeezat Adebola — Sat, 02 Dec 2023 11:33:59 +0000

Building a sign-up form is a common task in web development, and the React framework provides an excellent platform to accomplish this easily. With React, you can create a functional and user-friendly sign-up form by using its features for form creation, management, and validation.

There are two approaches to handling forms in React: controlled components and uncontrolled components.

Controlled components use the React hook useState to manage state variables and handle form input. This gives you complete control over the form data.
Uncontrolled components let the Document Object Model (DOM) handle the form data internally. This can make development easier, but you lose some control over the form data.

This guide focuses on using controlled components to build a sign-up form. It provides step-by-step instructions for setting up your React project, creating the form component, managing the form state, handling validation, and form submission.

Prerequisites

To get the most out of this guide, it is recommended to have a basic understanding of HTML, CSS, JavaScript, and some React concepts such as components, props, and state. If any of these technologies are not familiar to you, take some time to learn them before proceeding.

Setting Up the React Project

The first thing we need to do for this project is to set up our development environment. Make sure you have Node.js installed on your PC. If you don't have it yet, you can visit https://nodejs.org and download the LTS version for your operating system.

Now, let's create a new project folder and navigate to it in the terminal or command prompt. Once we're in the project folder, we'll use the following command to create a new React project:

npx create-react-app sign-up-form

The above command will create a sign-up-form directory that includes essential files and configuration for a basic React project. Then, we'll enter the following command to navigate to the new project directory:

cd sign-up-form

The next step to start the development server. We'll do this by running the following command:

npm start

This will open a new browser tab at http://localhost:3000 for the React application. After creating the React app, your file structure looks like this:

Creating the Form Component

To create the form component, we'll start by creating a folder called components inside the src folder. Next, we'll create a file called SignUpForm.js inside the components folder.

Copy the following code snippet and paste it into the SignUpForm.js file to create the input fields for name, email, password, confirm password, newsletter, and the sign-up button:

import React from 'react';

function SignUpForm() {
  return (
    <div className='form-container'>
       <form className='form'>
            <input 
                type="name" 
                placeholder="Your name"
                className="input"
            />
            <input 
                type="email" 
                placeholder="Email address"
                className="input"
            />
            <input 
                type="password" 
                placeholder="Password"
                className="input"
            />
            <input 
                type="password" 
                placeholder="Confirm password"
                className="input"
            />

            <div className='marketing'>
                <input
                    id="allowEmail"
                    type="checkbox"
                />
                <label htmlFor="allowEmail">I want to join the newsletter</label>
            </div>
            <button className='submit'>
                Sign Up
            </button>
        </form>
    </div>
  )
}

export default SignUpForm;

The next step is to clean up the App.js file and import the SignUpForm
component into it:

import React from 'react'
import './App.css'
import SignUpForm from './components/SignUpForm';

function App() {
  return (
    <div>
      <SignUpForm />
    </div>
  );
}

export default App;

Styling the Form

To style our sign-up form, we'll start by cleaning up the App.css file and replacing its contents with the following CSS styles. These styles will make our form appealing and user-friendly.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #1c247a;
  height: 100vh;
  font-family: 'Inter', sans-serif;
}

.form-container {
  height: 100vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form {
  background-color: white;
  padding: 50px 70px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.75);
}

.input {
  width: 120%;
  margin-top: 20px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid gray;
  padding: 5px;
  font-family: 'Inter', sans-serif;
}

.marketing {
  display: flex;
  margin-bottom: 20px;
  margin-top: 20px;
  align-items: center;
}

.marketing > input {
  margin-right: 10px;
}

.submit {
  width: 50%;
  padding: 10px;
  border-radius: 5px;
  color: white;
  background-color: #1c247a;
  border: none;   
  cursor: pointer; 
}

.messages {
  display: flex;
  justify-content: center;
}

.success {
  display: block;
  color: white;
  width: fit-content;
  height: 100px;
  padding: 5px;
}

.error {
  font-size: 12px;
  color: red;
  margin-top: 10px;
  margin-left: -20px;
  align-self: flex-start;
}

State Management in the Form

It's time to make the form interactive. We'll use the React useState hook to define the state variables and their initial values. So, let's start by importing useState from React:

import React, { useState } from 'react'

Next, we'll define the initial state as an object and set the input values to empty strings. We'll also set the joinedNewsLetter checkbox value to false.

export default function SignUpForm() {
    const [formData, setFormData] = useState({
        name: "", 
        email: "", 
        password: "", 
        confirmPassword: "", 
        joinedNewsLetter: false
    })

   // ... other code
}

The formData object will store the current values of the form inputs, while setFormData is a function that we can use to update the form data.

Handling Form Input

To handle input changes and update the states as users interact with the form, we'll assign an onChange event handler called handleChange to each input field. This event will be triggered when users make changes to the input fields.

In addition, we will give each input field a name property to distinguish the input that triggers the handleChange event. And it's a good practice to use the exact name of the name property saved in the form state.

Using the value property, we will also bind the form input fields to the state variables. This ensures that the state reflects the data a user inputs. But the checkbox inputs will have the checked property.

  <form className='form'>
                <input 
                    type="name" 
                    placeholder="Your name"
                    className='input'
                    name="name"
                    onChange={handleChange}
                    value={formData.name}
                />
                <input 
                    type="email" 
                    placeholder="Email address"
                    className='input'
                    name="email"
                    onChange={handleChange}
                    value={formData.email}

                />
                <input 
                    type="password" 
                    placeholder="Password"
                    className='input'
                    name="password"
                    onChange={handleChange}
                    value={formData.password}
                />
                <input 
                    type="password" 
                    placeholder="Confirm password"
                    className='input'
                    name="confirmPassword"
                    onChange={handleChange}
                    value={formData.confirmPassword}
                />

                <div className='marketing'>
                    <input
                        id="allowEmail"
                        type="checkbox"
                        name="joinedNewsletter"
                        onChange={handleChange}
                        checked={formData.joinedNewsletter}

                    />
                    <label htmlFor="allowEmail">I want to join the newsletter</label>
                </div>
                <button className='submit'>
                    Sign up
                </button>
   </form>

Now, let's create the handleChange function to run the event handler when triggered:

const handleChange = (event) => {
        const {name, value, type, checked} = event.target
        setFormData(prevFormData => ({
            ...prevFormData,
            [name]: type === "checkbox" ? checked : value
        }))
    }

In the above code snippet, the handleChange function receives an event as an argument, which represents the input change event. The function extracts the name, value, type, and checked properties of the form element that was interacted with.

The setFormData function is then used to update the form data with new values. It takes a callback function as an argument, which receives the previous form data as an argument (prevFormData). Inside this callback, the form data object is spread (...prevFormData), creating a new object that inherits the previous form data.

The value of the property specified by [name] is updated based on the type of input. If the input type is a checkbox, the value is set to the checked value of the checkbox. Otherwise, it is set to the value of the input field. This way, the form data is updated based on the input field's name and type, ensuring that the component state represents the most recent form input values.

Form Validation and Submission

It's time to set up the onSubmit event handler on the form tag to execute the handleSubmit function.

<form className="form" onSubmit={handleSubmit}>
   // ... other code
</form>

To handle input errors, we'll add some validation logic. This logic will ensure that no input field is left empty. If any field is not validated, an error message will be displayed when a user clicks the sign-up button. Clicking the sign up button will trigger the submit event on the form and run the handleSubmit function.

Next, let's set up the states for checking errors and submitting the form data:

 const [formData, setFormData] = useState({
        name: "", 
        email: "", 
        password: "", 
        confirmPassword: "", 
        joinedNewsLetter: false
    })
// states for errors and submission
const [error, setError] = useState(false);
const [submitted, setSubmitted] = useState(false);

Then, we'll create the handleSubmit function to handle the form submission:

const handleSubmit = (event) => {
        event.preventDefault()
        if (formData.name === '' || formData.email === '' || formData.password === '' || formData.confirmPassword === '') {
            setError(true);
        } else {
            setSubmitted(true);
            setError(false);
        }
}

Inside the handleSubmit function, the event.preventDefault() prevents the default behavior of a form submission, which is to refresh the page.

The function then checks if the required fields such as name, email, password, and confirmPassword are filled. If any field is empty, it sets the error state to true. If all fields have values, it marks the form as submitted without any error.

To display an error message when any of the inputs are left empty, we'll add some logic to each input field.

<form className='form' onSubmit={handleSubmit}>
        <input 
            type="name" 
            placeholder="Your name"
            className='input'
            name="name"
            onChange={handleChange}
            value={formData.name}
        />
        {error && !formData.name && <span className="error">*Please enter your name</span>}

        <input 
            type="email" 
            placeholder="Email address"
            className='input'
            name="email"
            onChange={handleChange}
            value={formData.email}
        />
        {error && !formData.email && <span className="error">*Please enter your email</span>}

        <input 
            type="password" 
            placeholder="Password"
            className='input'
            name="password"
            onChange={handleChange}
            value={formData.password}
            />  
        {error && !formData.password && <span className="error">*Please enter your password</span>}

        <input 
            type="password" 
            placeholder="Confirm password"
            className='input'
            name="confirmPassword"
            onChange={handleChange}
            value={formData.confirmPassword}
        />
        {error && !formData.confirmPassword && <span className="error">*Please confirm your password</span>}

        <div className='marketing'>
            <input
                id="allowEmail"
                type="checkbox"
                name="joinedNewsletter"
                onChange={handleChange}
                value={formData.joinedNewsletter}
            />
            <label htmlFor="allowEmail">I want to join the newsletter</label>
        </div>

        <button className='submit'>Sign Up</button>
</form>

Let's set up the state variables for the password and confirm password. Next, we'll write a conditional statement to check if the two values match. If they don't match, an error message will appear when a user tries to submit the form:

const [passwordMatch, setPasswordMatch] = useState(true);

const handleSubmit = (event) => {
        event.preventDefault()
        if (formData.name === '' || formData.email === '' || formData.password === '' || formData.confirmPassword === '') {
            setError(true);
        } else {
            setSubmitted(true);
            setError(false);
        }
        // for password match
        if (formData.password === formData.confirmPassword) {
            setPasswordMatch(true)
        } else if (formData.confirmPassword === '') {
            setError(true)    
        } else {
               setPasswordMatch(false)
               setSubmitted(false)
        }
    }

To handle the confirmPassword input and display the passwordMatch error message, we will add the following line to the confirm password input:

{!passwordMatch && <span className="error">Passwords do not match!</span>}

Lastly, to show a success message when the sign-up form is submitted successfully, let's add the following code:

const successMessage = () => {
        return (
            <div className='success' style={{display: submitted ? '' : 'none'}}>
                <h1>Successfully signed up!!!</h1>
            </div>
        )
    }

return (
    <div className='form-container'>

        <div className='messages'>
            {successMessage()} 
        </div>

       <form className='form' onSubmit={handleSubmit}>
           // ... other code
       </form> 
    </div>
  )

If you'd like to explore the entire code for this project, simply click the CodeSandbox editor below:

Conclusion

Throughout this guide, we have covered all the essential steps needed to create a functional sign-up form, including setting up the React project, creating the form component, managing state using the useState hook, handling input changes, and form validation and submission.

While the guide focuses on the basics, you can continue to experiment and add more features to enhance the form based on your project's requirements. Happy coding !!!

Mastering CSS Shadows: Techniques, Tips, and Tricks

Azeezat Adebola — Wed, 01 Nov 2023 14:57:18 +0000

Imagine adding depth, dimension, and a touch of creativity to your website. With shadows, you can create captivating visual effects that breathe life into your web designs.

In this concise guide, you will learn about CSS shadows and how to use them to create beautiful effects that will make your web design visually attractive. Whether you are a beginner or an experienced front-end developer, this detailed guide will show you how to effectively use shadows to transform ordinary elements into eye-catching ones, making your webpage more interactive and engaging.

What are CSS Shadows?
The Importance of Understanding Shadows
Box Shadow
Inner Shadow
Text Shadow
Filter: drop-shadow()
Pseudo Elements
Layering Shadows
Neumorphism
Neon Shadow Effects
Animating Shadows
Browser Support for Shadows
Tips for Using Shadow
Conclusion

Prerequisites

To understand shadows effectively, you should have a basic understanding of HTML and CSS. If any of these concepts are new or unfamiliar, take some time to review them before proceeding.

What are CSS shadows?

CSS shadows are visual effects that are created by adding shadows to elements on a website using CSS. Shadows can convey the illusion of elevation, giving the impression that different components on a page are floating above the background at various levels. When used properly, shadows add depth and dimension to components, enhancing the overall aesthetic and user experience of a webpage.

In the image above, the first box has no shadow while the second one has a box shadow. The second box seems to be popping out of the screen making it stand out compared to the first box. In short, shadows can make your elements pop, hover elegantly, or cast an enchanting ambiance over your content.

The Importance of Understanding Shadows

With a solid understanding of shadows, you can elevate your website design with beautiful visual effects that capture users' attention. You'll be able to create shadow effects ranging from subtle drop shadows to floating elements and layered shadows, creating an immersive user experience.

However, it's not just about creating pretty visuals. When you understand how to use shadows, you can add extra value to your user interface by guiding the user's attention to the most important elements. This makes it easier for them to navigate your website.

Box Shadow

With the CSS box-shadow property, you can add shadow effects around an element's frame. This property creates a drop shadow that makes an element appear raised above a page or hovering over it. You can apply the box-shadow property to many elements, such as cards, buttons, and any other elements where the shadow needs to conform to the shape of the element's box. The syntax for box-shadow is as follows:

.box {
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.5);
}

.box {
    box-shadow: [x-offset] [y-offset] [blur-radius] [spread-radius] [color];
}

The properties of box-shadow include:

X-offset: This is the horizontal position of the box shadow of an element. This property specifies how far right or left the shadow goes. The shadow moves to the right with a positive value but moves to the left with a negative value.
Y-offset: This is the vertical position of the box shadow of an element. This property specifies how far up or down the shadow goes. The shadow moves down with a positive value but moves up with a negative value.
Blur radius: This is an optional property that determines the blurriness or softness of the shadow edges. The blur radius determines how much the shadow spreads out from its origin. Adding a lower value will make the shadow look more defined and sharper, while a higher value will make the shadow softer and more diffused.
Spread radius: This is also an optional property that specifies the shadow size of an element. The spread radius contracts and expands the shadow size from its origin. To make the shadow larger, use a positive value and a negative value to make it smaller.
Color: This property is used to set the color of the shadow. If the color value is not specified, the shadow will inherit the foreground color (text color). You can use various formats to specify the color. For instance:
- Named colors such as blue
- Hexadecimal values such as #FF0000
- RGBA values such as rgba(0, 0, 0, 0.12)
- HSL values such as hsl(0, 50%, 70%)

Check out Chris Coyier's box shadow examples:

Inner Shadow

The box-shadow property can also be used to create an inner shadow for a sunken effect. Instead of casting a shadow around an element's frame to make it look elevated, the shadow appears inside the element, making it look pressed in. To create an inner shadow, use the inset keyword as part of the box-shadow property. This keyword can be placed at the beginning or end of the syntax. For example:

box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5) inset

box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, 0.5)

The result:

See another example:

Text Shadow

The text-shadow property allows you to add a shadow effect to text elements on a webpage. This property creates a shadow behind the text, adding depth and enhancing its visual appeal. The properties include x-offset, y-offset, blur radius, color, and inset.

.text {
    text-shadow: 5px 5px #9b0707;
}

The result:

To achieve a 3D-like effect for the text above, you can add multiple shadows separated by commas:

.text {
    text-shadow: 1px 1px #9b0707,
                 2px 2px #9b0707,
                 3px 3px #9b0707,
                 4px 4px #9b0707,
                 5px 5px #9b0707,
                 6px 6px #9b0707,
                 7px 7px #9b0707,
                 8px 8px #9b0707,
                 9px 9px #9b0707,
                 10px 10px #9b0707;
}

The result:

 .text {
    text-shadow: 0px 0px 10px #9b0707;
 }

The result:

Notice the subtle, soft shadow around the text above.

Check more examples below:

Filter: drop-shadow()

The CSS "drop-shadow" filter is a powerful tool that can be used to create drop shadow effects on images, text, and other elements. Unlike the box-shadow property, this filter actually contours the shape of an element, giving you more flexibility in creating a wide range of effects, such as realistic shadows, glows, and outlines.

.box1 {
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
}

.box2 {
    filter: drop-shadow(5px 10px 10px rgba(0, 0, 0, 0.5));
}

The result:

From the example above, we can see that the syntax for the box-shadow and drop-shadow() filter looks similar, however, they produce different shadows. This is due to the fact that the drop-shadow() filter adheres to the rendered shape of any element. For example:

And another example:

Pseudo Elements

You can also create shadows with the ::before and ::after pseudo-elements. These selectors enable you to add extra content to your webpage without changing the HTML structure, giving you more flexibility. Other pseudo-elements, such as ::first-letter and ::first-line, also support shadows, but ::before and ::after are the most commonly used.

See Ramsey Njire's shadows with pseudo elements:

And Jhey's box-shadow pseudo loaders:

Layering Shadows

Using a single box shadow is fantastic, but you can layer multiple shadows on each other, separated by commas. This technique enables you to create a more realistic or three-dimensional look. By stacking shadows, you can achieve the illusions of different opacity levels, light sources, and even reflections.

.single-box {
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.3);
}

.layered-box {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075),
                0 2px 2px rgba(0, 0, 0, 0.075),
                0 4px 4px rgba(0, 0, 0, 0.075),
                0 8px 8px rgba(0, 0, 0, 0.075),
                0 16px 16px rgba(0, 0, 0, 0.075);
}

The result:

You can also stack shadows for the drop-shadow() filter by separating them with space instead of commas. For example:

.box {
    filter:
        drop-shadow(0 2px 2px #555) 
        drop-shadow(0 6px 5px #777)
        drop-shadow(0 12px 10px #999);
}

When layering shadows, you can adjust the properties of each shadow layer to create an intriguing effect. Additionally, it is essential to consider the stacking order of the shadows, as they will be arranged in the sequence in which they are defined.

Neumorphism

Neumorphism is a design trend characterized by minimal and real-looking UI elements. It's often referred to as a modern approach to skeuomorphism that replicates real-life objects within a digital interface. Neumorphism aims to create digital elements that resemble tangible objects, giving them a sense of depth while avoiding complexity and cluttered designs. For example:

.box1 {
    box-shadow: -5px -5px 9px #ffffff73, 
                 5px 5px 9px #6e7a8f4d;
}

.box2 {
    box-shadow: inset -5px -5px 9px #ffffff73, 
                inset 5px 5px 9px #6e7a8f4d; 
}

The result:

Neumorphic UI elements are designed to have a 3D-like effect, appearing connected to the background. They create the illusion of an element protruding from or embedded into the background, achieved through soft shadows. That's why they're sometimes called "soft UI" elements. The overall result is a subtle yet eye-catching design.

In neumorphic design, elements are typically placed against a neutral background, allowing them to stand out and providing a more realistic and tactile feel to the digital interface.

A neumorphic preloader:

Neon Shadow Effects

The neon shadow is a popular CSS technique that allows you to create stunning, eye-catching visuals using bright neon colors. This technique can be applied to elements and text for vibrant and glowing effects.

.box1 {
    box-shadow: 0px 10px 15px 0 rgba(0, 255, 98, 0.7);
}

.box2 {
    box-shadow: inset 0px 10px 15px 0 rgba(0, 255, 98, 0.7);
}

The result:

A dark background will make the shadow stand out more prominently, while a light background will create a more subtle effect. When creating a neon shadow effect, you can use the box-shadow or text-shadowproperty.

Neon shadow effect using the box-shadow property:

Another one with the text-shadow property:

Animating Shadows

Animating shadows can add a dynamic and lively touch to your user interface or webpage. With CSS animations such as keyframes, transforms, and transitions, you can create shadows that move, expand/shrink, or change color over time.

When you animate shadows, it catches users' attention and highlights the interactive elements on your page, making it easier to navigate and understand your interface. For example, you could create a button that appears to press down when clicked or a card that seems to rise when hovered over.

For optimal performance, avoid animating the box-shadow property directly. However, you can achieve a similar effect by animating the filter: drop-shadow() property. Also, using the ::after pseudo-element with a box-shadow and animating its opacity will give you the smoothest animation possible. While there are many elements you can animate, remember that the key to effective animation is to strike a balance between creativity and usability. Don't hesitate to experiment with shadow animations, as the possibilities are endless.

Browser Support for Shadows

It's essential to note that browser support for shadows can vary. While most modern browsers support shadows, some earlier versions may only partially support them or not support them at all. Browsers that do not support shadows will simply omit them without displaying any effect. Examples of browser versions that do not support shadows include Chrome 9, Internet Explorer 8, Firefox 3.6, and Safari 3, as well as their earlier versions.

To ensure proper rendering of your shadows across all platforms, you may use the vendor prefixes such as:

webkit for Chrome and Safari
moz for Firefox
o for Opera
ms for Internet Explorer (IE)

.card {
    -webkit-box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3);
}

Tips for Using Shadows

Before diving into shadows or incorporating them into your designs, it's crucial to consider a few points to make the most of them:

Keep it Subtle: When using shadows, it's important to prioritize visual balance and accessibility. Applying too many shadows can make an element appear cluttered or make text hard to read. Therefore, use shadows sparingly to add depth and value, and avoid creating overly complex or chaotic designs.
Layering Shadows: Layered shadows are undoubtedly stunning, but they come with a cost. Adding too many layers of shadows or applying them to multiple elements can impact performance, especially on mobile devices and older browsers. So, layer shadows minimally to enhance performance.
Blurring Shadows: When using the blur radius, it's essential to strike the right balance. Too much blurring can make the shadow look fuzzy and lose definition, while too little may not create the effect you desire. Additionally, shadows with heavy blur tend to render slowly.
Performance Optimization: It's always a good practice to test your designs on different browsers and devices to ensure smooth performance. You can use the DevTools in your browser to identify any performance issues and make necessary adjustments to your shadows.
Use a Shadow Layering Tool: A shadow-generating tool can be a helpful resource for experimenting with different shadow effects and creating complex shadow styles. You may check out Philipp Brumm's shadow generator - shadows.brumm.af.

Conclusion

It's fascinating to see how something as simple as a shadow can make a big difference in creating captivating designs. Throughout this guide, we covered various aspects of CSS shadows, including box shadow, inner shadow, text shadow, drop-shadow filter, pseudo-elements, layering shadows, neumorphism, neon shadows, animating shadows, browser support, and tips for efficient use. By mastering these techniques, you can unleash your creativity in web design.

Remember, the key is to experiment and explore new possibilities. When you put in the extra effort to create unique shadows, your designs will truly stand out. I hope you found this guide both beneficial and enjoyable.

DEV Community: Azeezat Adebola

Securing Web Applications: Identifying and Mitigating Common Vulnerabilities

Table of Content

What is Web Application Security?

Common Web Application Vulnerabilities - OWASP Top 10

Injection

Insecure Design

Broken Access Control

Cryptographic Failures

Security Misconfiguration

Server-Side Request Forgery (SSRF)

Vulnerable and Outdated Components

Software and Data Integrity Failures

Security Logging and Monitoring Failures

Identification and Authentication Failures

Conclusion

Resources

Easy Way to Build a Sign-Up Form with Validation Using React

Prerequisites

Setting Up the React Project

Creating the Form Component

Styling the Form

State Management in the Form

Handling Form Input

Form Validation and Submission

Conclusion

Mastering CSS Shadows: Techniques, Tips, and Tricks

Table of Contents

Prerequisites

What are CSS shadows?

The Importance of Understanding Shadows

Box Shadow

Inner Shadow

Text Shadow

Filter: drop-shadow()

Pseudo Elements

Layering Shadows

Neumorphism

Neon Shadow Effects

Animating Shadows

Browser Support for Shadows

Tips for Using Shadows

Conclusion

Resources