Master HTML Escaping for Secure Web Development

Introduction to HTML Escaping

HTML escaping is a crucial technique in web development to prevent injection attacks by properly encoding special characters. This helps ensure that user input does not break the structure of your web pages or execute malicious scripts.

Essential HTML Escape APIs

1. JavaScript

JavaScript provides several methods to escape HTML characters. Here are some of the most commonly used:

escape()

    
      function escapeHTML(str) {
        return str.replace(/&/g, "&")
                  .replace(//g, ">")
                  .replace(/"/g, """)
                  .replace(/'/g, "'");
      }
      console.log(escapeHTML(''));

HTML Entities

    
      function escapeHTMLUsingEntities(unsafe) {
        return unsafe.replace(/[&<>"']/g, function(m) {
          return {
            '&': '&',
            '<': '<',
            '>': '>',
            '"': '"',
            "'": '''
          }[m];
        });
      }
      console.log(escapeHTMLUsingEntities(''));

2. Python

For Python developers, escaping HTML can be done using the standard library:

cgi.escape

    
      import cgi
      text = ''
      escaped_text = cgi.escape(text)
      print(escaped_text)

html.escape

    
      import html
      text = ''
      escaped_text = html.escape(text)
      print(escaped_text)

3. PHP

In PHP, you can use the following functions:

htmlspecialchars

    
      <?php
      $string = '<script>alert("Hello")</script>';
      $escaped_string = htmlspecialchars($string, ENT_QUOTES, 'UTF-8');
      echo $escaped_string;
      ?>

htmlentities

    
      <?php
      $string = '<script>alert("Hello")</script>';
      $escaped_string = htmlentities($string, ENT_QUOTES, 'UTF-8');
      echo $escaped_string;
      ?>

Application Example

Below is a simple web application that takes user input and safely displays it with HTML escaping.

index.html

    
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Secure Input Display</title>
      </head>
      <body>
          <h1>Enter some text</h1>
          <form action="display.php" method="post">
              <textarea name="user_input"></textarea>
              <button type="submit">Submit</button>
          </form>
      </body>
      </html>

display.php

    
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST') {
          $user_input = htmlentities($_POST['user_input'], ENT_QUOTES, 'UTF-8');
      }
      ?>
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Secure Display</title>
      </head>
      <body>
          <h1>Your Input</h1>
          <p><?php echo $user_input; ?></p>
      </body>
      </html>

This application takes the user input from a textarea in a form and displays it safely on another page using htmlentities.

With these techniques, you can ensure that your web applications are secure from common injection attacks.

Hash: bf11602e700a638ec1e05dea7e7246ed30380ae610e6c19a96033e1827cf3d88