Security Best Practices

Security is a critical aspect of web development, as it helps to ensure that a website is protected from unauthorized access and data breaches.

In this chapter, we will cover some of the best practices for building secure web applications.

Protect against Cross-Site Scripting (XSS)

Cross-Site Scripting (XSS) is a type of security vulnerability that allows an attacker to inject malicious scripts into a web page. This can lead to a variety of problems, including:

Problem

Attackers inject malicious scripts into your pages (e.g., stealing cookies or user data).

Solution

  • Sanitize all user inputs before rendering
  • Use frameworks that auto-escape by default (React, Vue, Angular)
  • Never use dangerouslySetInnerHTML or innerHTML with untrusted data.
  • Apply Content Security Policy (CSP) headers, e.g.:
Content-Security-Policy: default-src 'self'; script-src 'self'
  • Validate and encode data on both client and server side

Protect Against CSRF

Problem

Attackers trick a logged-in user into making a malicious request.

Solution

  • Use CSRF tokens for state-changing requests
  • Use SameSite=Strict cookies
  • Only accept JSON requests (not form submissions) for API calls

Authentication & Authorization

  • Never Store Secrets on the Client: API keys, passwords, and signing secrets do not belong in frontend code. They can always be discovered by users.
  • Implement Safe Logout: Clearly log the user out by clearing tokens on the client-side and invalidating the session on the server-side.

Protect Against Clickjacking

Use X-Frame-Options or CSP frame-ancestors directive:

X-Frame-Options: DENY

Don’t allow your site to be embedded in iframes unless necessary.

Manage Dependencies

  • Keep dependencies up to date (npm audit, snyk test)
  • Avoid using unknown or low-quality npm packages
  • Lock dependency versions (package-lock.json or pnpm-lock.yaml)
  • Consider using a dependency scanning tool in CI/CD.

Secure API Calls

  • Use HTTPS for all API calls
  • Validate API responses
  • Implement rate limiting and throttling
  • Use a secure API key
  • Use a secure API secret
  • Limit CORS to trusted origins:
Access-Control-Allow-Origin: https://yourdomain.com

Other

  • Adding CSRF Token is a critical security measure for protecting web applications from unauthorized data submissions from other websites
  • Install SSL Certificate
  • Keep all libraries and frameworks up-to-date to avoid vulnerabilities found in older versions.
  • Limit User Permissions and Access
  • Always validate user input to protect against common vulnerabilities like SQL injection, cross-site scripting (XSS), and command injection. This should be done both on the client side for user experience and on the server side for security.
  • Define and enforce a strict CORS policy to prevent unauthorized domains from accessing your resources.
  • Use captcha
  • Utilize content security policies to prevent XSS attacks. Escape user input in HTML output to ensure that any input is rendered harmless.
  • Implement CSP headers to control the sources of various content types and mitigate XSS attacks.
  • Use X-Frame-Options or Content Security Policy (CSP) to prevent your website from being framed by malicious sites.
  • Use the Secure and HttpOnly flags for cookies to prevent access by client-side scripts and to ensure they're sent over HTTPS.
  • Set HTTP headers: "Referrer-Policy": "no-referrer"
  • Disable iframe embedding
  • Implement rate limiting and throttling to prevent brute-force attacks.
  • Regularly conduct security audits and penetration testing to identify and fix vulnerabilities.