Client-Side Web App Security: Top 10 Vulnerabilities and Their Solutions

The client side of a web application is crucial, as it directly interacts with the user. Hence, ensuring its security is paramount. Today, we will delve into common vulnerabilities and provide in-depth explanations and solutions.

1. Cross-Site Scripting (XSS)

Description: XSS vulnerabilities occur when an application contains untrusted data without adequate validation or escaping. This enables attackers to run malicious scripts in the victim's browser, potentially hijacking sessions, changing web content, or redirecting users.

Example: For instance, a blog's commenting system displays user comments without sanitising or validating the inputs. An attacker could include a script that steals session cookies from users who view the comment.

  // Insecure server-side code
  app.post('/addComment', function(req, res) {
    let comment = req.body.comment;
    // Directly inserting the user comment into the database
    database.insertComment(comment);
  });

Solution:
1. Escape special characters in user inputs.
2. Use frameworks or libraries that automatically sanitise inputs.
3. Implement strict Content Security Policies (CSP).

    const sanitizeHtml = require('sanitize-html');

    app.post('/addComment', function(req, res) {
      let comment = sanitizeHtml(req.body.comment);
      database.insertComment(comment);
    });

2. Exposed Client-Side Logic

Description: Moving critical business logic to the client side can be hazardous. To exploit the application, malicious actors can reverse-engineer, tamper with, or bypass the logic, compromising the integrity of application data or processes.
Example: An e-learning platform, for example, uses client-side code to determine whether a student has passed an exam. This could allow a student to manipulate the score.
```
  // Insecure client-side JavaScript
  if(score > 90) {
    displayCertificate();
  }
```
Solution:
1. Shift critical logic to the server side.
2. Employ code obfuscation for deterrence (not foolproof).

    // Secure server-side validation
    app.post('/submitExam', function(req, res){
      let answers = req.body.answers;
      let score = calculateScore(answers);
      if(score > 90) {
        res.send({ certificate: true });
      } else {
        res.send({ certificate: false });
      }
    });

3. Insecure Client-Side Storage

Description: Storing sensitive data in client-side storage mechanisms (such as Local Storage, Session Storage, or indexedDB) is risky. Because these storage methods can be accessed via JavaScript, they are vulnerable to XSS attacks.

Example: An application may save a user's full name and date of birth in local storage for convenience.

  // Insecure storage
  localStorage.setItem('userFullName', fullName);
  localStorage.setItem('userDOB', dateOfBirth);

Solution:
1. Avoid storing sensitive data client-side.
2. Use encrypted, HTTP-only cookies for more secure data storage.

    const jwt = require('jsonwebtoken');
    app.post('/saveUserData', function(req, res) {
      const encryptedData = jwt.sign({ fullName: req.body.fullName, DOB: req.body.DOB }, 'secret_key');
      res.cookie('userData', encryptedData, { httpOnly: true });
      res.send({ success: true });
    });

4. DOM XSS

Description: DOM XSS attacks involve manipulating a webpage's Document Object Model (DOM) without necessarily storing a payload on the server. Attackers can modify a web page, execute scripts, and steal data by manipulating the DOM.

Example: A website retrieves and displays the user's profile name from the URL, making it vulnerable to malicious manipulation.

  // Vulnerable client-side code
  let profileName = decodeURIComponent(window.location.search.split('=')[1]);
  document.getElementById("profileName").textContent = profileName;

Solution:
1. Avoid directly using data from untrusted sources (URLs, user inputs) to manipulate the DOM.
2. Use modern frameworks that auto-escape content, like React or Vue.js.

    // Safer approach with frameworks
    let profileName = this.props.profileName; // Using React as an example

5. Cross-Site Script Inclusion (XSSI)

Description: XSSI flaws take advantage of the trust that websites place in third-party scripts. Attackers can circumvent security measures such as the Same Origin Policy, resulting in unauthorised access and data theft.

Example: For instance, a web app may include an analytics script without first validating its authenticity.

  <!-- Vulnerable script inclusion -->
  <script src="https://trusted-analytics.com/script.js"></script>

Solution:
1. Validate and whitelist third-party scripts.
2. Use Subresource Integrity (SRI) to ensure the integrity of included scripts.

    <!-- Secure script inclusion with SRI -->
    <script src="https://trusted-analytics.com/script.js" integrity="sha384-xxxxxx" crossorigin="anonymous"></script>

6. Broken Client-Side Authentication

Description: Client-side authentication flaws can allow unauthorised users to gain access to restricted resources or act on behalf of authenticated users.
Example: For instance, suppose an application saves JWT tokens in local storage, making them accessible via JavaScript and potentially vulnerable to XSS attacks.
```
  // Insecure token storage
  localStorage.setItem('authToken', jwtToken);
```
Solution:
1. Use HTTP-only cookies for storing tokens.
2. Incorporate token expiration and revocation mechanisms.

    // Secure token storage
    app.post('/login', function(req, res) {
      const token = jwt.sign({ user: req.body.user }, 'secret_key', { expiresIn: '1h' });
      res.cookie('authToken', token, { httpOnly: true });
      res.send({ success: true });
    });

7. Inadequate Content Security Policy (CSP)

Description: A weak or non-existent CSP allows attackers to run malicious scripts, potentially resulting in data theft, session hijacking, and other attacks.

Example: A web page, for example, allows scripts from any domain to be loaded.

  <!-- Weak CSP -->
  <meta http-equiv="Content-Security-Policy" content="script-src *;">

Solution:
1. Set a strict CSP, allowing only trusted sources.
2. Regularly review and update the CSP as necessary.

    // Express.js example with helmet
    app.use(helmet.contentSecurityPolicy({
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "trusted.com"],
        // ... more directives ...
      }
    }));

8. Session Hijacking

Description: Session hijacking, also known as session sidejacking, is the act of an attacker taking over a user's session to impersonate them and gain unauthorised access to protected resources.

Example: Session tokens transmitted over unencrypted connections can be intercepted.

  // Insecure session token transmission
  res.cookie('session', sessionToken);

Solution:
1. Always use HTTPS for transmitting session tokens.
2. Implement token expiration and regeneration strategies.

    // Secure session management
    app.use(session({
      secret: 'my_secret',
      resave: false,
      saveUninitialized: true,
      cookie: { secure: true, httpOnly: true }
    }));

9. Cross-Site Request Forgery (CSRF)

Description: CSRF deceives a victim into performing actions they did not intend to perform, potentially resulting in data loss, corruption, or unauthorised actions.

Example: For instance, an attacker may trick a user into clicking a link that unknowingly changes their email address on another website.

  <!-- Form without CSRF protection -->
  <form action="/changeEmail" method="POST">
    <input type="email" name="newEmail">
    <button type="submit">Change Email</button>
  </form>

Solution:
1. Use anti-CSRF tokens in forms and AJAX requests.
2. Check for the token's presence and validity on the server side before processing requests.

    // Express.js example with csurf
    app.use(csurf());

10. Third-party Dependencies

Description: Outdated or vulnerable client-side libraries can introduce potential security risks.

Example: Using an old version of a library with known vulnerabilities

  <!-- Insecure library version -->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

Solution:
1. Regularly update all dependencies.
2. Use tools to scan for vulnerable libraries.

    # Using npm to check and fix vulnerabilities
    npm audit
    npm audit fix

Conclusion

The digital age has brought forth unprecedented advancements in web technologies, making our lives easier and more interconnected. But with these benefits comes the inherent risk of vulnerabilities, especially on the client side. As we've explored, even seemingly small oversights can lead to significant security breaches, underscoring the importance of vigilant web development.

To safeguard users and ensure the integrity of online platforms, it's paramount for developers to be well-versed in these vulnerabilities, continuously updating their knowledge base to stay ahead of potential threats. As technology evolves, so too will the tactics employed by cyber attackers, making it a perpetual cat-and-mouse game between developers and malicious entities.

In conclusion, proactive security measures, combined with regular audits and adherence to best practises, form the bedrock of a robust client-side defence. After all, in the realm of cybersecurity, the best offence truly is a good defence.

Sandeep's Tech Blog