高级技巧：HTML安全防护 - 详细教程与实战指南

<!-- 1. 内容转义 -->
<!-- 错误：直接插入用户输入 -->
<div>搜索结果：<?php echo $_GET['q']; ?></div>

<!-- 正确：转义HTML特殊字符 -->
<!-- < 转为 &lt; -->
<!-- > 转为 &gt; -->
<!-- & 转为 &amp; -->
<!-- " 转为 &quot; -->
<!-- ' 转为 &#x27; -->

<!-- 2. 使用textContent而非innerHTML -->
<script>
// 错误
element.innerHTML = userInput;

// 正确
element.textContent = userInput;
</script>

<!-- 3. 使用安全的API -->
<script>
// 创建元素时设置属性而非HTML
const img = document.createElement('img');
img.src = userImageUrl;  // 浏览器会自动编码
img.alt = userAltText;

// 使用DOMPurify净化HTML
const clean = DOMPurify.sanitize(userHtml);
element.innerHTML = clean;
</script>

<!-- 通过meta标签设置CSP -->
<meta http-equiv="Content-Security-Policy"
      content="default-src 'self';
               script-src 'self' https://cdn.example.com;
               style-src 'self' 'unsafe-inline';
               img-src 'self' data: https:;
               font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com;
               connect-src 'self' https://api.example.com;
               frame-src 'none';
               object-src 'none';
               base-uri 'self';
               form-action 'self';
               frame-ancestors 'none';
               upgrade-insecure-requests;">

<!-- 仅报告模式（不阻止，仅报告违规） -->
<meta http-equiv="Content-Security-Policy-Report-Only"
      content="default-src 'self'; report-uri /csp-report">

<!-- 服务器生成随机nonce -->
<meta http-equiv="Content-Security-Policy"
      content="script-src 'self' 'nonce-r4nd0m123';">

<!-- 内联脚本必须携带nonce -->
<script nonce="r4nd0m123">
    // 这段脚本会被执行
    console.log('安全执行');
</script>

<!-- 不带nonce的内联脚本会被阻止 -->
<script>
    // 这段脚本会被CSP阻止
    console.log('被阻止');
</script>

<!-- 1. CSRF Token -->
<form action="/transfer" method="POST">
    <input type="hidden" name="csrf_token" value="服务器生成的随机Token">
    <input type="text" name="to">
    <input type="number" name="amount">
    <button type="submit">转账</button>
</form>

<!-- 2. SameSite Cookie -->
<!-- 服务器设置Cookie时添加SameSite属性 -->
<!-- Set-Cookie: session=abc123; SameSite=Strict; Secure; HttpOnly -->

<!-- 3. 检查Origin/Referer头 -->
<!-- 服务器验证请求来源是否合法 -->

<!-- 4. 双重Cookie验证 -->
<form action="/transfer" method="POST">
    <input type="hidden" name="csrf_token" value="从Cookie中读取的值">
    <!-- 服务器比较POST中的token与Cookie中的值 -->
</form>

<!-- 1. X-Frame-Options头 -->
<!-- 服务器设置HTTP头 -->
<!-- X-Frame-Options: DENY（完全禁止嵌入） -->
<!-- X-Frame-Options: SAMEORIGIN（仅同源嵌入） -->

<!-- 2. CSP frame-ancestors指令 -->
<meta http-equiv="Content-Security-Policy"
      content="frame-ancestors 'none';">
<!-- 或 -->
<meta http-equiv="Content-Security-Policy"
      content="frame-ancestors 'self';">

<!-- 3. JavaScript防御（后备方案） -->
<script>
    if (window.top !== window.self) {
        window.top.location = window.self.location;
    }
</script>

<!-- integrity属性：子资源完整性（SRI） -->
<script src="https://cdn.example.com/jquery.min.js"
        integrity="sha384-abc123..."
        crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdn.example.com/bootstrap.min.css"
      integrity="sha384-xyz789..."
      crossorigin="anonymous">

<!-- crossorigin属性：跨域资源策略 -->
<!-- anonymous：不发送Cookie -->
<script src="https://cdn.example.com/script.js" crossorigin="anonymous"></script>
<!-- use-credentials：发送Cookie -->
<script src="https://cdn.example.com/script.js" crossorigin="use-credentials"></script>

<!-- referrerpolicy属性：引用策略 -->
<a href="https://example.com" referrerpolicy="no-referrer">不发送Referer</a>
<a href="https://example.com" referrerpolicy="same-origin">仅同源发送Referer</a>
<a href="https://example.com" referrerpolicy="strict-origin-when-cross-origin">跨域只发源（推荐）</a>
<img src="https://example.com/image.jpg" referrerpolicy="no-referrer">

<!-- rel="noopener"：防止新窗口访问window.opener -->
<a href="https://external.com" target="_blank" rel="noopener noreferrer">
    外部链接
</a>

<!-- rel="noreferrer"：不发送Referer -->
<a href="https://external.com" rel="noreferrer">不发送Referer</a>

<!-- 混合内容：HTTPS页面加载HTTP资源 -->

<!-- 主动混合内容（被阻止） -->
<script src="http://cdn.example.com/script.js"></script>
<link rel="stylesheet" href="http://cdn.example.com/style.css">
<iframe src="http://example.com/page.html"></iframe>

<!-- 被动混合内容（可能被阻止） -->
<img src="http://example.com/image.jpg">
<audio src="http://example.com/audio.mp3"></audio>
<video src="http://example.com/video.mp4"></video>

<!-- 正确做法：全部使用HTTPS -->
<script src="https://cdn.example.com/script.js"></script>
<link rel="stylesheet" href="https://cdn.example.com/style.css">
<img src="https://example.com/image.jpg">

<!-- 自动升级不安全请求 -->
<meta http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests;">

<!-- 使用nonce -->
<meta http-equiv="Content-Security-Policy"
      content="script-src 'self' 'nonce-abc123';">
<script nonce="abc123">
    // 合法内联脚本
</script>

<!-- 使用hash -->
<!-- 先计算脚本内容的SHA256哈希 -->
<meta http-equiv="Content-Security-Policy"
      content="script-src 'self' 'sha256-xxx...';">
<script>
    // 哈希匹配的脚本
</script>

# 生成SRI哈希
curl https://cdn.example.com/lib.js | openssl dgst -sha384 -binary | openssl base64 -A

<meta http-equiv="Content-Security-Policy"
      content="script-src 'self' https://cdn.example.com https://analytics.example.com;">

<meta http-equiv="Content-Security-Policy"
      content="upgrade-insecure-requests;">