top of page

How HTML Code can be Compromised

HTML can be compromised through HTML Injection, a vulnerability where malicious actors inject unauthorized HTML into a web application. This can lead to attacks such as defacement, phishing, or even Cross-Site Scripting (XSS).

​

Vulnerable HTML Code:

Imagine a simple feedback page where users can submit their names and comments. The page dynamically displays the feedback without proper sanitization.

<!DOCTYPE html>
<html>
<head>
    <title>Feedback Page</title>
</head>
<body>
    <h1>Submit Your Feedback</h1>
    <form method="GET" action="/feedback">
        <input type="text" name="name" placeholder="Your name">
        <textarea name="comment" placeholder="Your comment"></textarea>
        <button type="submit">Submit</button>
    </form>

    <h2>Feedback:</h2>
    <div id="feedback">
        <!-- User input is directly embedded here -->
        <script>
            const urlParams = new URLSearchParams(window.location.search);
            const name = urlParams.get('name');
            const comment = urlParams.get('comment');
            if (name && comment) {
                document.write('<p><strong>' + name + ':</strong> ' + comment + '</p>');
            }
        </script>
    </div>
</body>
</html>

How the Attack Works:

​

  1. Malicious Input: An attacker submits the following values in the form:

    • Name: <img src="x" onerror="alert('Hacked!')">

    • Comment: <iframe src="https://phishing-site.com" style="width:100%;height:300px;"></iframe>

  2. Result: The malicious input is directly rendered on the page, leading to:

    • Alert Execution: The <img> tag triggers a JavaScript alert when the src fails to load.

    • Phishing Attack: The <iframe> embeds a fake login page, tricking users into entering credentials.

Thus HTML is Exploited:

​

  1. Defacement: Attackers can modify the webpage to display offensive or misleading content.

  2. Phishing: Malicious actors can embed login forms or fake pages to steal user credentials.

  3. Session Hijacking or Data Theft: If combined with JavaScript, attackers can steal sensitive user data.

  4. Browser Exploits: Advanced payloads may exploit vulnerabilities in the browser itself.

How to Mitigate:

​

1. Sanitize User Input: Escape all HTML special characters to prevent injection. Use a library like DOMPurify for secure input sanitization.

    javascript

​

    const sanitizeHTML = (str) => str.replace(/</g, "&lt;").replace(/>/g, "&gt;"); const safeName = sanitizeHTML(name); const safeComment =      sanitizeHTML(comment); document.write('<p><strong>' + safeName + ':</strong> ' + safeComment + '</p>');

​​

​

2. Use Secure Rendering Methods: Avoid directly injecting HTML. Instead, use methods like textContent to render text safely:

    javascript

​

    const feedbackDiv = document.getElementById('feedback');

    const feedbackP = document.createElement('p');

    feedbackP.textContent = `${name}: ${comment}`;

    feedbackDiv.appendChild(feedbackP);

 

3. ​Validate and Sanitize on the Server: Always validate and sanitize user input on the server side before saving or rendering iit.

​

4. Implement Content Security Policy (CSP): Add a CSP header to restrict what content can be loaded or executed on the page:

    http

​

      Content-Security-Policy: default-src 'self'; frame-src 'none'; img-src 'self';

​

 

5. ​Encode Output: Ensure all dynamic content is properly encoded for its context (e.g., HTML, JavaScript, or CSS).

bottom of page