弱点補強: Next.js CSP設計 × dangerouslySetInnerHTML XSS対策 — CMS入稿HTML/代理店タグを無検証でDOM挿入し、CSPがdefault-src * unsafe-inline unsafe-evalで実質無効化されている状態から、DOMPurifyサニタイズ×nonceベースCSP×iframe sandbox実行分離×report-to違反監視の4点セットで多層防御を組み直す（MOps 販促システムチーム キャンペーンLP配信サービス Bad→Good 7点）

📋 コピー// lib/sanitize-campaign-html.ts
import DOMPurify from "isomorphic-dompurify";

const ALLOWED_TAGS = [
  "p", "b", "strong", "em", "a", "img", "br",
  "span", "div", "ul", "li", "ol", "h1", "h2", "h3",
] as const;
const ALLOWED_ATTR = ["href", "src", "alt", "class", "target", "rel"];

/**
 * CMS入稿のキャンペーン本文HTMLをサニタイズする。
 * onerror/onload/onclick等のイベントハンドラ属性やscriptタグを除去し、
 * ホワイトリスト外のタグ・属性はすべて剥ぎ取る(修正1・修正6)。
 */
export function sanitizeCampaignHtml(rawHtml: string): string {
  return DOMPurify.sanitize(rawHtml, {
    ALLOWED_TAGS: [...ALLOWED_TAGS],
    ALLOWED_ATTR,
    FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover"],
    FORBID_TAGS: ["script", "iframe", "object", "embed"],
  });
}

const ALLOWED_TRACKING_HOSTS: ReadonlySet<string> = new Set([
  "ads.trusted-partner-a.example.com",
  "tag.trusted-partner-b.example.com",
]);

/** 代理店タグURLが許可済みドメインかどうかを判定する(修正2)。 */
export function isAllowedTrackingUrl(url: string): boolean {
  try {
    return ALLOWED_TRACKING_HOSTS.has(new URL(url).host);
  } catch {
    return false;
  }
}

// middleware.ts — nonceベースCSP(修正3・修正4)
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

const CSP_REPORT_GROUP = "csp-endpoint";

export function middleware(request: NextRequest): NextResponse {
  const nonce = crypto.randomUUID(); // リクエスト毎に一意なnonce

  const csp = [
    "default-src 'self'",
    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic'`,
    `style-src 'self' 'nonce-${nonce}'`,
    "img-src 'self' https://cdn.example.com data:",
    "frame-src https://ads.trusted-partner-a.example.com https://tag.trusted-partner-b.example.com",
    "base-uri 'self'",
    "object-src 'none'",
    `report-to ${CSP_REPORT_GROUP}`, // 修正5
  ].join("; ");

  const response = NextResponse.next();
  response.headers.set("Content-Security-Policy", csp);
  response.headers.set("x-nonce", nonce);
  response.headers.set(
    "Report-To",
    JSON.stringify({
      group: CSP_REPORT_GROUP,
      max_age: 10886400,
      endpoints: [{ url: "/api/csp-report" }],
    })
  );
  return response;
}

export const config = { matcher: "/campaign/:path*" };

// app/campaign/[id]/page.tsx — サニタイズ済みHTML + iframe分離(修正1・2・7)
import { sanitizeCampaignHtml, isAllowedTrackingUrl } from "@/lib/sanitize-campaign-html";
import { cmsClient } from "@/lib/cms-client";

export default async function CampaignPage({ params }: { params: { id: string } }) {
  const campaign = await cmsClient.getCampaign(params.id);

  // SSRの時点(ハイドレーション前のHTMLソース)で既にサニタイズ済みにする(修正7)
  const safeHtml = sanitizeCampaignHtml(campaign.bodyHtml);
  const trackingUrl = isAllowedTrackingUrl(campaign.trackingScriptUrl)
    ? campaign.trackingScriptUrl
    : null; // 許可外ドメインは埋め込み自体を拒否

  return (
    <>
      <div dangerouslySetInnerHTML={{ __html: safeHtml }} />
      {trackingUrl && (
        <iframe
          src={trackingUrl}
          sandbox="allow-scripts allow-same-origin"
          referrerPolicy="no-referrer"
          title="campaign-tracking"
          style={{ display: "none" }}
        />
      )}
    </>
  );
}

// app/api/csp-report/route.ts — CSP違反をDataDogへ(修正5)
import { logger } from "@/lib/logger";

export async function POST(request: Request): Promise<Response> {
  const report = await request.json().catch(() => null);
  if (report) logger.warn("csp_violation", { report });
  return new Response(null, { status: 204 });
}