refactor(csp): #176 B 案 PR 8 (scope 縮小) — Gs1Databar SVG cleanup + Astro 検出網 + setProperty CSP3 制約記録 ([067])

[fumtas1k]

概要

#176 B 案 PR 8 — scope 縮小版。当初は style-src 'unsafe-inline' 削除の最終 flip を予定していたが、実装後の親直接 E2E で ResultTable の el.style.setProperty('--col-width', ...) (PR 1.5 由来) が CSP3 仕様で style-src の制御対象であることが判明し、strict 化で 11 件 violation。連続値ゆえ hash 列挙不可のため、ResultTable refactor を別 PR に分離して延期 することにした。

詳細経緯と対応方針は docs/decisions.md [067] を参照。

主な変更 (4 commit)

1. Gs1Databar SVG currentColor 化 (commit 1/4): dangerouslySetInnerHTML 経由で DOM 注入される SVG <text> の style="fill:var(--color-text)" を fill="currentColor" + 親 .gs1-svg-container { color: var(--color-text) } に置換。将来の strict 化時に silent drop されるのを防ぐ事前 refactor。
2. Astro inline style 検出網追加 (commit 2/4): inline-style-migration.test.ts に src/{components,layouts,pages}/**/*.astro glob を並列追加 + 陽性対照 1 件。新規 .astro ファイルで style="..." 属性を持ち込むと検出。
3. docs/decisions.md [067] 追加 (commit 3/4): ResultTable setProperty の CSP3 制約発覚 + B 案最終 flip を別 PR に延期する design decision を記録。3 つの解 (Constructable Stylesheets / CSS class swap / 'unsafe-hashes') の評価と採用方針 (PR 9 で Constructable Stylesheets 検証 → PR 10 で B 案最終 flip) を含む。
4. SoT 進捗 table 同期 (commit 4/4): docs/projects/issue-176-b-plan-progress.md を更新し PR 7b ✅ merged + PR 8 (scope 縮小) + 新規 PR 9 (ResultTable refactor) / PR 10 (B 案最終 flip) を追加。

当初計画から削除 (rebase で除外)

backup/pr8-full-original branch で保全 (push しないので消える可能性に注意):

• _headers + csp.ts の style-src 'unsafe-inline' 削除 → PR 10 へ延期
• astro.config.mjs から stripMetaStyleSrc() integration 撤去 → PR 10 へ延期
• headers.test.ts / meta-csp.test.ts / astro-config-csp.test.ts 群の strict 化 → PR 10 へ延期

関連 PR / issue

#176 B 案進捗 (PR 1〜7b 完了 / PR 8 部分達成):

• PR 0 (ci(vrt): Visual Regression Test 基盤を独立 PR で導入（旧 #253 学習を踏まえた proper sequencing） #254 VRT 独立導入)
• PR 1 (refactor(ui): #176 B 案 PR 1 — ui/* simple 11 ファイル inline style 撤去 + 基礎工事 #256 基礎工事 + ui simple)
• PR 1.5 (refactor(ui): #176 B 案 PR 1.5 — ResultTable + InputField inline style 撤去 + cellStyle API 再設計 #261 ResultTable + InputField + cellStyle API 再設計) ← setProperty 導入元
• PR 2 (refactor(ui): #176 B 案 PR 2 — qr-ticket inline style 撤去 + #225 useMemo/abort 対応 #272 qr-ticket)
• PR 3 (refactor(ui,tools): #176 B 案 PR 3 — JwtDecoder + UuidV7Generator inline style 撤去 + #262 partial #275 JwtDecoder + UuidV7Generator)
• PR 4 (refactor(tools): #176 B 案 PR 4 — Gs1Databar + EncodingConverter + DummyText inline style 撤去 #277 Gs1Databar + EncodingConverter + DummyText)
• PR test(e2e): #276 withProductionCsp ラッパで applyProductionCsp boilerplate を集約 #278 (infra withProductionCsp ラッパ)
• PR 5a (refactor(tools): #176 B 案 PR 5a — ConfigConverter + QrReader + JanCode inline style 撤去 #283 ConfigConverter + QrReader + JanCode)
• PR 5b (refactor(tools): #176 B 案 PR 5b — 残ツール inline style 撤去 + ulid-generator E2E CSP gate 化 (#262 close) #286 残ツール + ulid-generator gate)
• PR 6 (refactor(csp): #176 B 案 PR 6 (scope 縮小) — styles.ts 削除 + migration tracker glob 化、Astro inline 残存は #289 へ委譲 #290 styles.ts 削除 + migration tracker glob 化)
• PR 7a (refactor(ui): #289 PR 7a — Astro layout/ui inline 撤去 (8 ファイル / 23 件 / 新規 7 class) #294 Astro layout/ui)
• PR 7b (refactor(pages): #289 PR 7b — Astro pages inline 撤去 (7 ファイル / 42 件 / 新規 3 class) #299 Astro pages)
• 本 PR (PR 8 scope 縮小)
• 後続: PR 9 (ResultTable refactor) → PR 10 (B 案最終 flip)

検証

• 親直接 npm run test 全 pass (780 tests)
• 親直接 npm run build 成功 (18 pages)
• 親直接 npm run test:e2e 全 pass (146 passed / 1 skipped、style-src 'unsafe-inline' 維持のため violation 不発)
• npx astro check エラーなし
• npx prettier --check . clean
• grep -c "style={{" src/ = 0
• grep -rEn 'style="[^"]*"' src/components/ src/layouts/ src/pages/ = 0

post-mortem (要約、詳細は [067])

• Root cause: PR 1.5 設計時の前提「CSSOM API (setProperty) は CSP style-src 観点で別経路」が誤り。CSP3 仕様 (https://www.w3.org/TR/CSP3/#directive-style-src) では style-src の制御対象に JavaScript 経由の style modification も含まれる。
• 検出が遅れた理由: inline-style-migration.test.ts は文字列 regex で違反を検出するが、これは CSP の実評価とは独立。E2E applyProductionCsp gate を導入していた spec は 11 件あるが、いずれも strict 化 前 の状態で書かれており、strict 化を試みて初めて violation が顕在化した。
• lessons learned (詳細は [067]): (a) CSSOM API ≠ CSP 対象外、(b) migration test の regex は実 violation を保証しない、(c) ブロッカー検出時は「前提崩壊」と overstating せず解決策を冷静に列挙する。

後続作業 (本 PR merge 後)

• follow-up issue 起票: ResultTable setProperty の Constructable Stylesheets 化検証 + 実装 (PR 9)
• follow-up issue 起票: B 案最終 flip 再投入 (PR 10、PR 9 完了後)
• backup/pr8-full-original branch を保全 (PR 10 の reference として使用するか後で判断)

🤖 Generated with Claude Code

[github-actions]

🖼️ Visual Regression Test 結果

• Status: ✅ 全 36 件 pass
• Workflow run: 25539333797
• Artifact (diff 画像 / playwright-report): 上記 workflow run の Artifacts セクションから download

diff が 意図的な visual 変更の場合: Update Visual Regression Baseline workflow を本 PR ブランチで workflow_dispatch trigger して baseline を更新。
diff が 意図しない regression の場合: 該当変更を fix。
本 check は required ではないため fail のままでも merge は可能（reviewer 判断）。

[fumtas1k]

PR #303 レビュー — 多角評価 (security / frontend / logic / 規約)

複数 commit にまたがる変更ですが、実コード差分は実質 3 ファイル / 約 7 行 + テスト 25 行 + ドキュメント大量、という比率です。scope 縮小の判断 + post-mortem の質 が本 PR の主たる価値という認識でレビューしました。

CI: test / e2e / visual-regression 全 green、base = develop 明示済、aria 削除なしを確認済み。結論: approve 寄り、下記の minor 指摘 1〜2 点を任意で取り込み検討。

---

✅ 高く評価する点

1. scope 縮小の意思決定プロセス

ResultTable.setProperty の CSP3 制約発覚 → 7 commit 中 3 commit を rebase で除外 → PR 9 / PR 10 への分割設計、という流れが [067] に詳細記録されており、再現性が高い。memory feedback_blocker_overstating.md の方針 (「前提崩壊」と過剰評価せず解決策 3 案以上を列挙) を [067] 自身が体現している (Constructable Stylesheets / CSS class swap / 'unsafe-hashes' / per-request nonce の評価表) — これは将来の reviewer が判断を辿る上で価値が高い。

2. Gs1Databar SVG の currentColor 化

dangerouslySetInnerHTML 経由で DOM 注入される SVG <text> の inline style="fill:..." を fill="currentColor" + 親 .gs1-svg-container { color: var(--color-text) } に置換する設計は CSP 観点でも UX 観点でも妥当:

• fill="currentColor" は SVG 属性であって style-src の対象外
• currentColor は SVG ↔ CSS 連携の標準パターンで全 modern browser サポート
• VRT で diff ゼロを確認済 = 視覚的同一性が担保

3. Astro 検出網の 正陽性対照付き 追加

memory feedback_positive_control_for_gates.md 方針通り、Astro detector 追加 (line 54-71) と同時に陽性対照 (line 93-96) を併設しており、regex 自体の正しさが回帰しないこと自体を検証している。

4. gs1-databar.ts の XSS 防御は維持

injectCompositeText() 内で escapeHtml(text) 経由で HTML エスケープしている (line 173-180, 194) ことは pre-existing で本 PR は touch していない。dangerouslySetInnerHTML 経由でも text content は escape 済 = XSS 経路は本 PR で widen していない。

---

🟡 minor 指摘 (任意取り込み)

M-1: inline-style-migration.test.ts の Astro detector regex がダブルクォートのみ

src/utils/__tests__/inline-style-migration.test.ts:67 の regex:

expect(content).not.toMatch(/\sstyle\s*=\s*"[^"]*"/);

ダブルクォート "..." のみマッチで、以下は silent skip される:

• style='color: red' (シングルクォート) — Astro / HTML 仕様上は valid
• style={cssExpr} (Astro の JSX 風 expression、frontmatter 由来の文字列で動的注入)

陽性対照 (line 94) もダブルクォート版のみ。

提案 (どれか 1 つ):

(a) regex を拡張: /\sstyle\s*=\s*(["'][^"']*["']|\{[^}]*\})/ + 陽性対照にシングルクォート / {} 版を追加
(b) 現状維持 + JSDoc に「ダブルクォート形式のみ検出。シングルクォート / expression 形式は別途 lint で扱う」と明記
(c) [067] に「将来 ESLint plugin 化で全形式を検出網に統合」と follow-up 記録

PR 7a/7b の実績では Astro inline は全てダブルクォート形式だったため (a) は必須ではない。過去パターンを踏襲した割り切り であれば (b) で十分。

M-2: SVG <text> の fallback color 喪失

src/utils/gs1-databar.ts:229:

- font-size="${fontSize}" fill="#000000" style="fill:var(--color-text)">
+ font-size="${fontSize}" fill="currentColor">

before は fill="#000000" を fallback として残し、style で上書き という多重防御だった。after は currentColor のみ = 親 color が解決できないと SVG <text> のデフォルト (UA 依存、通常 black) にフォールバックする。

実害シナリオ:

• --color-text が未定義になる場合 (現状 :root で必ず定義 ∴ 起こらない)
• .gs1-svg-container が override される CSS 変更
• ユーザースタイル (custom UA stylesheet) で color が極端値に上書き

提案: コメント 1 行で currentColor 採用根拠 (parent の gs1-svg-container で color: var(--color-text) を設定済の前提) を gs1-databar.ts:229 付近 or Gs1Databar.tsx:315 に書いておくと、将来 className を消した瞬間に色が壊れることを防げる。

なお barcode 本体の bars は bwip-js が fill="#000000" で出力するため、本 PR で dark mode / 高コントラストモードでの視認性は変化しない (text のみ変化、bars は不変)。これは pre-existing 仕様。

M-3: docs/superpowers/plans/2026-05-08-issue-176-b8-final-flip.md の archival 配慮

1114 行の plan は 当初の 7 commit 全体 を記述しているが、本 PR で実際に commit されたのは 4 commit (rebase で 3 commit 除外)。reviewer が plan と実装を crossref した時、Task 2-4 (CSP flip / stripMetaStyleSrc 撤去 / test 反転) が実装されていないように見える。

提案 (任意): plan ファイル冒頭に scope 縮小 banner を 1 段落追加:

> **更新 2026-05-08**: 本 plan の Task 2/3/4 は ResultTable `setProperty` の CSP3 制約発覚 ([067]) により本 PR から rebase で除外。PR 9 (ResultTable refactor) → PR 10 (B 案最終 flip) で再投入予定。本 PR は Task 1/5/6/7 (Gs1Databar / Astro 検出網 / decisions / SoT) のみ実施。

merge 後に archive value としてのみ残るドキュメントなので、書き換え工数 ≦ 1 分。

---

🟢 informational (action 不要)

I-1: B 案残作業の前提変化

[067] の評価表で Constructable Stylesheets を「最有力 / 要 Chromium 動作確認」としているが、CSP3 spec の最新 editor draft では adoptedStyleSheets 経由の programmatic stylesheet も style-src に従う方向 で議論が動いている (URL: https://github.com/w3c/webappsec-csp/issues/518)。PR 9 の検証時にこの動向を再確認しておくと、選択肢 (a) が PR 10 段階で機能しない事故を回避できる。fallback の (b) CSS class swap の事前検証も並行で進める価値あり。

I-2: VRT 不発の理由の明示

CI で VRT diff ゼロが green = 視覚的に同一、ということは currentColor 経路でも text の最終色が var(--color-text) と完全一致していることが確認された という意味で、本 PR の最大の検証ゲート。PR description にこの 1 文を追加しておくと、将来の reviewer がこの PR の視覚 risk を 5 秒で把握できる (現状は 「VRT diff ゼロ」という事実は書かれているが、それが「currentColor refactor の正しさ証明」だという意味付けまでは書かれていない)。

I-3: 規約準拠状況の確認結果

項目	状況
base = develop	✅ 明示済
本文 --body-file 経由	✅ (PR description はバックティック化けなし)
言語 = 日本語	✅
aria-* 削除	✅ なし (Gs1Databar.tsx の aria-label / aria-live は維持)
pre-create scope 確認	✅ 8 ファイル全て develop diff 内

---

まとめ

• security: CSP 観点で正しい方向の refactor。dangerouslySetInnerHTML 経路は escape 済で widen なし。
• frontend / UX: currentColor 採用は標準パターン、VRT pass で視覚的同一性担保。
• logic: refactor は意図通り、テストの陽性対照も付加。Astro regex のシングルクォート未対応は 割り切り として許容範囲。
• post-mortem の質: [067] の問題分析・解の評価表・lessons learned は将来の reviewer / 別 PC 作業者にとって reference value が高い。
• PR 規約: 4 点 (base / body-file / 日本語 / aria) いずれも遵守。

approve 推奨。M-1 〜 M-3 は 任意取り込み、merge 前提の指摘ではない。merge 後 PR 9 着手前に I-1 (CSP3 spec の最新動向) は再確認推奨。

[fumtas1k]

レビューありがとうございます。M-1 / M-2 / M-3 の 3 件すべて取り込みました (commit 6d14035)。

対応内容

✅ M-1: Astro detector regex の検出範囲拡張

• regex を ダブルクォート / シングルクォート / {expression} の 3 形式対応に拡張: /\sstyle\s*=\s*("[^"]*"|'[^']*'|\{[^}]*\})/
• 陽性対照を 2 件追加 (シングルクォート / expression 版)、既存陽性対照のテスト名を「ダブルクォート」と明記
• 解決案 (a) を採用。提案された JSDoc / follow-up 記録 ((b) / (c)) は 「将来 frontmatter 由来の動的注入や JSX 風 expression 形式が混入した場合の silent skip を防ぐ」 という防御的価値が regex 拡張で恒久的に確保できるため不要と判断
• 効果: 782 tests pass (180 → 182、陽性対照 2 件追加分)

✅ M-2: SVG <text> の currentColor 採用根拠コメント追加

• src/utils/gs1-databar.ts:226-232 付近にコメント追加。親要素 .gs1-svg-container ({ color: var(--color-text) }) との依存関係を明記
• 配置は reviewer 提案 2 候補 (gs1-databar.ts:229 / Gs1Databar.tsx:315) のうち 生成側 (gs1-databar.ts) を選択。理由: 将来 fill 属性を触る reviewer がまず見るのは生成側で、消費側 (Gs1Databar.tsx) で className を変更する場合は IDE / git blame で生成側のコメントに辿り着ける
• 効果: 将来 Gs1Databar.tsx の親要素 className を変更した瞬間に SVG text デフォルト色にフォールバックする事故を予防

✅ M-3: plan ファイル冒頭の scope 縮小 banner 追加

• docs/superpowers/plans/2026-05-08-issue-176-b8-final-flip.md 冒頭 (line 3) に banner 1 段落追加
• Task 2 / 3 / 4 が rebase で除外された経緯と、PR 9 (refactor(ResultTable): #176 B 案 PR 9 — setProperty を CSP strict 互換 API に refactor #304) / PR 10 (refactor(csp): #176 B 案 PR 10 — style-src strict 化最終 flip 再投入 (PR 9 完了後) #305) / backup/pr8-full-original branch への導線を明示

informational への扱い

• I-1 (CSP3 spec の最新動向): PR 9 (refactor(ResultTable): #176 B 案 PR 9 — setProperty を CSP strict 互換 API に refactor #304) 着手前に Request to Support Dynamic Resource Validation w3c/webappsec-csp#518 の動向を再確認、Constructable Stylesheets fallback として CSS class swap の事前検証を並行で進めるよう、follow-up issue refactor(ResultTable): #176 B 案 PR 9 — setProperty を CSP strict 互換 API に refactor #304 に追記検討。本 PR では action 不要のまま。
• I-2 (VRT 不発の意味付けを PR description に追加): 任意取り込みに含めず。意味付けはこのレビュー本体と [067] で十分文脈化されているため、merge 後 archive 価値の docs を追加修正 → CI 再走の往復コストとの bargain で見送り。reviewer 判断で PR description を直接 edit していただいて問題ありません。
• I-3 (規約準拠): 確認結果ありがとうございます。

検証

• npm run test: 782 pass (43 files / +2 件 = M-1 陽性対照追加)
• npx astro check: 0 errors / 0 warnings / 9 hints (pre-existing)
• npx prettier --check .: clean
• merge ベースとの diff: 5 commit (4 commit + 本 review follow-up 1 commit)

CI 再走を確認後、改めて approve 判断をお願いします。

[fumtas1k]

再レビュー — 6d14035 (M-1 / M-2 / M-3 取り込み) 確認結果

3 件すべて適切に取り込まれており、想定以上の追加対応 (#304 / #305 起票, backup branch 言及) も入っています。新規指摘なし、approve 寄りの判断は変わらず。

---

修正内容の評価

✅ M-1: Astro detector regex 拡張

src/utils/__tests__/inline-style-migration.test.ts:69

expect(content).not.toMatch(/\sstyle\s*=\s*("[^"]*"|'[^']*'|\{[^}]*\})/);

• alternation ("[^"]*"|'[^']*'|\{[^}]*\}) で 3 形式すべてを 1 regex でカバー
• 陽性対照を 3 件 (double / single / expression) に拡張、既存ダブルクォート版もテスト名に「ダブルクォート」明記で読みやすさ向上
• 前置スペース必須 (\s) は維持されているので <style> block (auto-hash 経路) は引き続き対象外 = 期待通り

追加検証 (regex 動作確認):

入力	マッチ	妥当性
<div style="color: red" />	✅	double 検出
<div style='color: red' />	✅	single 検出
<div style={cssExpr} />	✅	expression 検出
<div style={{color: 'red'}} /> (JSX)	✅	nested は \{[^}]*\} で外側まで部分マッチ → toMatch 真
<style>...</style>	❌	前置スペースなし、対象外

意図通り。

✅ M-2: gs1-databar.ts 採用根拠コメント

src/utils/gs1-databar.ts:226-232 の 7 行コメントは「何を / どこに依存 / 壊れたらどうフォールバック / なぜそうしたか」の 4 点を網羅:

• fill="currentColor" が親要素の color を継承する仕組み
• 親要素は Gs1Databar.tsx の dangerouslySetInnerHTML ラッパ <div> で .gs1-svg-container クラス経由
• 維持すべき規約 (className 変更時は同等の color 設定を残す)
• フォールバック挙動 (UA デフォルト = 通常 black)
• 参照 [067] / #176 B 案

将来 Gs1Databar.tsx を他者が触る時、grep で gs1-svg-container を辿るだけで意図が拾える設計。

✅ M-3: plan banner 追加 + 想定外の補強

docs/superpowers/plans/2026-05-08-issue-176-b8-final-flip.md:3 の banner は私の提案を超えて以下まで含める:

• Task 2/3/4 が rebase 除外された経緯 + [067] 参照
• 後続 PR の issue 番号確定値 (#304 / #305) — 確認したところ両 issue とも実在 / OPEN:
  • #304 refactor(ResultTable): #176 B 案 PR 9 — setProperty を CSP strict 互換 API に refactor
  • #305 refactor(csp): #176 B 案 PR 10 — style-src strict 化最終 flip 再投入 (PR 9 完了後)
• backup branch backup/pr8-full-original の存在と push しない方針

これにより plan ↔ 実 issue ↔ [067] の 3 方向 crossref が完成。私の提案は 1 文だったが、実装はその 3 倍の情報密度になっており、archival 価値が大きく増している。

---

状態確認

項目	状態
test CI	✅ SUCCESS
e2e CI	✅ SUCCESS
visual-regression CI	✅ SUCCESS
mergeable	CLEAN
base	develop (規約遵守)
follow-up issue	#304 / #305 起票済 (OPEN)

CI required check は全 green、human review approve まで揃えば merge 可能な状態。残作業 (#304 → #305) も独立 issue 化済で本 PR が release blocker になる経路はなし。

---

結論

• M-1 / M-2 / M-3 はいずれも私の提案範囲を満たしつつ、想定以上の補強あり。
• 新規指摘なし。
• approve 寄りの判断は変わらず。merge は self-review approve + human review の方針に従って判断してください。

[067] post-mortem の質と #304 / #305 への引継ぎが整っているため、本 PR は B 案シリーズの valuable failure case のリファレンス としても機能します。