HTML · Best Practices

What is HTML Security?

Learn how to protect your website from common security threats

Find videos you like?

Save to resource drawer for future reference!

HTML Security Best Practices

Protecting against XSS, CSRF, and other threats

Security Examples

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Security Best Practices</title>
    <!-- Content Security Policy -->
    <meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';">
      <!-- Prevent MIME type sniffing -->
      <meta http-equiv="X-Content-Type-Options" content="nosniff">
      <!-- Prevent clickjacking -->
      <meta http-equiv="X-Frame-Options" content="DENY">
    </head>
    <body>
      <div class="container">
        <h1>🔒 HTML Security</h1>
        <!-- XSS Protection -->
        <div class="threat-card">
          <h2>1. Cross-Site Scripting (XSS)</h2>
          <p style="color: #6b7280; margin-bottom: 15px;">
            Malicious scripts injected into web pages
          </p>
          <h3 style="color: #ef4444; margin-top: 20px; margin-bottom: 10px;">
            ❌ Vulnerable Code
          </h3>
          <div class="vulnerability">
            &lt;!-- Never insert user input directly --&gt;
            &lt;div&gt;Welcome &lt;script&gt;document.write(userInput)&lt;/script&gt;&lt;/div&gt;
            &lt;!-- Dangerous innerHTML --&gt;
            element.innerHTML = userInput;
          </div>
          <h3 style="color: #10b981; margin-top: 20px; margin-bottom: 10px;">
            ✅ Secure Code
          </h3>
          <div class="solution">
            &lt;!-- Escape user input --&gt;
            &lt;div&gt;Welcome &lt;span id="username"&gt;&lt;/span&gt;&lt;/div&gt;
            &lt;script&gt;
            // Use textContent, not innerHTML
            document.getElementById('username').textContent = userInput;
            &lt;/script&gt;
          </div>
        </div>
        <!-- CSRF Protection -->
        <div class="threat-card">
          <h2>2. Cross-Site Request Forgery (CSRF)</h2>
          <p style="color: #6b7280; margin-bottom: 15px;">
            Unauthorized commands from trusted users
          </p>
          <h3 style="color: #10b981; margin-top: 20px; margin-bottom: 10px;">
            ✅ Protection
          </h3>
          <div class="solution">
            &lt;!-- Include CSRF token in forms --&gt;
            &lt;form method="POST" action="/transfer"&gt;
            &lt;input type="hidden" name="csrf_token" value="random_token"&gt;
            &lt;input type="text" name="amount"&gt;
            &lt;button type="submit"&gt;Transfer&lt;/button&gt;
            &lt;/form&gt;
          </div>
        </div>
        <!-- Security Headers -->
        <h2 style="color: #dc2626; margin-top: 40px; margin-bottom: 20px;">
          🛡️ Security Headers
        </h2>
        <div class="security-grid">
          <div class="security-item">
            <h4>Content Security Policy</h4>
            <p style="font-size: 0.85rem; color: #6b7280; margin-bottom: 10px;">
              Prevents XSS by restricting resource sources
            </p>
            <code style="font-size: 0.7rem; background: #e5e7eb; padding: 4px; border-radius: 4px; display: block;">
              Content-Security-Policy: default-src 'self'
            </code>
          </div>
          <div class="security-item">
            <h4>X-Frame-Options</h4>
            <p style="font-size: 0.85rem; color: #6b7280; margin-bottom: 10px;">
              Prevents clickjacking attacks
            </p>
            <code style="font-size: 0.7rem; background: #e5e7eb; padding: 4px; border-radius: 4px; display: block;">
              X-Frame-Options: DENY
            </code>
          </div>
          <div class="security-item">
            <h4>X-Content-Type-Options</h4>
            <p style="font-size: 0.85rem; color: #6b7280; margin-bottom: 10px;">
              Prevents MIME type sniffing
            </p>
            <code style="font-size: 0.7rem; background: #e5e7eb; padding: 4px; border-radius: 4px; display: block;">
              X-Content-Type-Options: nosniff
            </code>
          </div>
          <div class="security-item">
            <h4>Strict-Transport-Security</h4>
            <p style="font-size: 0.85rem; color: #6b7280; margin-bottom: 10px;">
              Forces HTTPS connections
            </p>
            <code style="font-size: 0.7rem; background: #e5e7eb; padding: 4px; border-radius: 4px; display: block;">
              Strict-Transport-Security: max-age=31536000
            </code>
          </div>
        </div>
        <div style="background: #dcfce7; padding: 20px; border-radius: 12px; border-left: 4px solid #10b981; margin-top: 30px;">
          <h3 style="color: #065f46; margin-bottom: 10px;">🔐 Security Checklist</h3>
          <ul style="list-style: none; line-height: 2; color: #166534;">
            <li>✓ Validate and sanitize all user input</li>
            <li>✓ Use HTTPS everywhere</li>
            <li>✓ Implement Content Security Policy</li>
            <li>✓ Add CSRF tokens to forms</li>
            <li>✓ Escape output (textContent not innerHTML)</li>
            <li>✓ Set security headers</li>
            <li>✓ Keep dependencies updated</li>
            <li>✓ Use SameSite cookies</li>
          </ul>
        </div>
      </div>
    </body>
  </html>

Live Preview

Loading preview...

Common Security Threats

Vulnerabilities to watch out for

Cross-Site Scripting (XSS)

Attacker injects malicious scripts into web pages

❌ element.innerHTML = userInput;

✅ element.textContent = userInput;

Cross-Site Request Forgery (CSRF)

Unauthorized actions performed on behalf of authenticated users

✅ Include CSRF token in all forms

Clickjacking

Tricking users into clicking hidden elements

✅ X-Frame-Options: DENY

Open Redirects

Redirecting users to malicious sites

✅ Validate redirect URLs against whitelist

Essential Security Headers

HTTP headers that enhance security

Content-Security-Policy (CSP)

Controls which resources can be loaded

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.com;

X-Frame-Options

Prevents site from being embedded in iframe

X-Frame-Options: DENY or SAMEORIGIN

X-Content-Type-Options

Prevents MIME-sniffing attacks

X-Content-Type-Options: nosniff

Strict-Transport-Security (HSTS)

Forces HTTPS connections

Strict-Transport-Security: max-age=31536000; includeSubDomains

Referrer-Policy

Controls referrer information sent

Referrer-Policy: strict-origin-when-cross-origin

HTML Security Best Practices

Validate all user input - Server-side validation is required
Escape output - Use textContent, not innerHTML for user data
Use HTTPS everywhere - Encrypt all traffic
Implement CSP - Content Security Policy headers
CSRF tokens - Include in all state-changing forms
SameSite cookies - Prevent CSRF attacks
Security headers - X-Frame-Options, X-Content-Type-Options, etc.
Keep dependencies updated - Patch security vulnerabilities

Common Security Mistakes

Trusting user input - All input is potentially malicious
Using innerHTML with user data - Opens XSS vulnerabilities
No CSRF protection - Forms vulnerable to cross-site attacks
Missing security headers - No CSP, X-Frame-Options, etc.
Not using HTTPS - Data transmitted in plain text
Inline scripts without CSP - Allows script injection
Outdated dependencies - Known vulnerabilities unpatched
Client-side validation only - Easily bypassed

Security Resources

OWASP - Open Web Application Security Project (owasp.org)
MDN Security - Mozilla Developer Network security guides
SecurityHeaders.com - Test your security headers
CSP Evaluator - Google's CSP validation tool
Snyk - Find vulnerabilities in dependencies
Helmet.js - Set security headers in Node.js apps

Previous Topic

HTML Minification

Reducing HTML file size for production.

Ask a Question

Have a question about HTML Security? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Best Practices

What is HTML Security?

Learn how to protect your website from common security threats

Find videos you like?

Save to resource drawer for future reference!

HTML Security Best Practices

Protecting against XSS, CSRF, and other threats

Security Examples

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Security Best Practices</title>
    <!-- Content Security Policy -->
    <meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';">
      <!-- Prevent MIME type sniffing -->
      <meta http-equiv="X-Content-Type-Options" content="nosniff">
      <!-- Prevent clickjacking -->
      <meta http-equiv="X-Frame-Options" content="DENY">
    </head>
    <body>
      <div class="container">
        <h1>🔒 HTML Security</h1>
        <!-- XSS Protection -->
        <div class="threat-card">
          <h2>1. Cross-Site Scripting (XSS)</h2>
          <p style="color: #6b7280; margin-bottom: 15px;">
            Malicious scripts injected into web pages
          </p>
          <h3 style="color: #ef4444; margin-top: 20px; margin-bottom: 10px;">
            ❌ Vulnerable Code
          </h3>
          <div class="vulnerability">
            &lt;!-- Never insert user input directly --&gt;
            &lt;div&gt;Welcome &lt;script&gt;document.write(userInput)&lt;/script&gt;&lt;/div&gt;
            &lt;!-- Dangerous innerHTML --&gt;
            element.innerHTML = userInput;
          </div>
          <h3 style="color: #10b981; margin-top: 20px; margin-bottom: 10px;">
            ✅ Secure Code
          </h3>
          <div class="solution">
            &lt;!-- Escape user input --&gt;
            &lt;div&gt;Welcome &lt;span id="username"&gt;&lt;/span&gt;&lt;/div&gt;
            &lt;script&gt;
            // Use textContent, not innerHTML
            document.getElementById('username').textContent = userInput;
            &lt;/script&gt;
          </div>
        </div>
        <!-- CSRF Protection -->
        <div class="threat-card">
          <h2>2. Cross-Site Request Forgery (CSRF)</h2>
          <p style="color: #6b7280; margin-bottom: 15px;">
            Unauthorized commands from trusted users
          </p>
          <h3 style="color: #10b981; margin-top: 20px; margin-bottom: 10px;">
            ✅ Protection
          </h3>
          <div class="solution">
            &lt;!-- Include CSRF token in forms --&gt;
            &lt;form method="POST" action="/transfer"&gt;
            &lt;input type="hidden" name="csrf_token" value="random_token"&gt;
            &lt;input type="text" name="amount"&gt;
            &lt;button type="submit"&gt;Transfer&lt;/button&gt;
            &lt;/form&gt;
          </div>
        </div>
        <!-- Security Headers -->
        <h2 style="color: #dc2626; margin-top: 40px; margin-bottom: 20px;">
          🛡️ Security Headers
        </h2>
        <div class="security-grid">
          <div class="security-item">
            <h4>Content Security Policy</h4>
            <p style="font-size: 0.85rem; color: #6b7280; margin-bottom: 10px;">
              Prevents XSS by restricting resource sources
            </p>
            <code style="font-size: 0.7rem; background: #e5e7eb; padding: 4px; border-radius: 4px; display: block;">
              Content-Security-Policy: default-src 'self'
            </code>
          </div>
          <div class="security-item">
            <h4>X-Frame-Options</h4>
            <p style="font-size: 0.85rem; color: #6b7280; margin-bottom: 10px;">
              Prevents clickjacking attacks
            </p>
            <code style="font-size: 0.7rem; background: #e5e7eb; padding: 4px; border-radius: 4px; display: block;">
              X-Frame-Options: DENY
            </code>
          </div>
          <div class="security-item">
            <h4>X-Content-Type-Options</h4>
            <p style="font-size: 0.85rem; color: #6b7280; margin-bottom: 10px;">
              Prevents MIME type sniffing
            </p>
            <code style="font-size: 0.7rem; background: #e5e7eb; padding: 4px; border-radius: 4px; display: block;">
              X-Content-Type-Options: nosniff
            </code>
          </div>
          <div class="security-item">
            <h4>Strict-Transport-Security</h4>
            <p style="font-size: 0.85rem; color: #6b7280; margin-bottom: 10px;">
              Forces HTTPS connections
            </p>
            <code style="font-size: 0.7rem; background: #e5e7eb; padding: 4px; border-radius: 4px; display: block;">
              Strict-Transport-Security: max-age=31536000
            </code>
          </div>
        </div>
        <div style="background: #dcfce7; padding: 20px; border-radius: 12px; border-left: 4px solid #10b981; margin-top: 30px;">
          <h3 style="color: #065f46; margin-bottom: 10px;">🔐 Security Checklist</h3>
          <ul style="list-style: none; line-height: 2; color: #166534;">
            <li>✓ Validate and sanitize all user input</li>
            <li>✓ Use HTTPS everywhere</li>
            <li>✓ Implement Content Security Policy</li>
            <li>✓ Add CSRF tokens to forms</li>
            <li>✓ Escape output (textContent not innerHTML)</li>
            <li>✓ Set security headers</li>
            <li>✓ Keep dependencies updated</li>
            <li>✓ Use SameSite cookies</li>
          </ul>
        </div>
      </div>
    </body>
  </html>

Live Preview

Loading preview...

Common Security Threats

Vulnerabilities to watch out for

Cross-Site Scripting (XSS)

Attacker injects malicious scripts into web pages

❌ element.innerHTML = userInput;

✅ element.textContent = userInput;

Cross-Site Request Forgery (CSRF)

Unauthorized actions performed on behalf of authenticated users

✅ Include CSRF token in all forms

Clickjacking

Tricking users into clicking hidden elements

✅ X-Frame-Options: DENY

Open Redirects

Redirecting users to malicious sites

✅ Validate redirect URLs against whitelist

Essential Security Headers

HTTP headers that enhance security

Content-Security-Policy (CSP)

Controls which resources can be loaded

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.com;

X-Frame-Options

Prevents site from being embedded in iframe

X-Frame-Options: DENY or SAMEORIGIN

X-Content-Type-Options

Prevents MIME-sniffing attacks

X-Content-Type-Options: nosniff

Strict-Transport-Security (HSTS)

Forces HTTPS connections

Strict-Transport-Security: max-age=31536000; includeSubDomains

Referrer-Policy

Controls referrer information sent

Referrer-Policy: strict-origin-when-cross-origin

HTML Security Best Practices

Validate all user input - Server-side validation is required
Escape output - Use textContent, not innerHTML for user data
Use HTTPS everywhere - Encrypt all traffic
Implement CSP - Content Security Policy headers
CSRF tokens - Include in all state-changing forms
SameSite cookies - Prevent CSRF attacks
Security headers - X-Frame-Options, X-Content-Type-Options, etc.
Keep dependencies updated - Patch security vulnerabilities

Common Security Mistakes

Trusting user input - All input is potentially malicious
Using innerHTML with user data - Opens XSS vulnerabilities
No CSRF protection - Forms vulnerable to cross-site attacks
Missing security headers - No CSP, X-Frame-Options, etc.
Not using HTTPS - Data transmitted in plain text
Inline scripts without CSP - Allows script injection
Outdated dependencies - Known vulnerabilities unpatched
Client-side validation only - Easily bypassed

Security Resources

OWASP - Open Web Application Security Project (owasp.org)
MDN Security - Mozilla Developer Network security guides
SecurityHeaders.com - Test your security headers
CSP Evaluator - Google's CSP validation tool
Snyk - Find vulnerabilities in dependencies
Helmet.js - Set security headers in Node.js apps

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

HTML Minification

HTML Code Editor

Building Your Learning Module...

What is HTML Security?

Security Examples

Cross-Site Scripting (XSS)

Cross-Site Request Forgery (CSRF)

Clickjacking

Open Redirects

Content-Security-Policy (CSP)

X-Frame-Options

X-Content-Type-Options

Strict-Transport-Security (HSTS)

Referrer-Policy

HTML Security Best Practices

Common Security Mistakes

Security Resources

HTML Minification

HTML Code Editor

What is HTML Security?

Security Examples

Cross-Site Scripting (XSS)

Cross-Site Request Forgery (CSRF)

Clickjacking

Open Redirects

Content-Security-Policy (CSP)

X-Frame-Options

X-Content-Type-Options

Strict-Transport-Security (HSTS)

Referrer-Policy

HTML Security Best Practices

Common Security Mistakes

Security Resources