chore: readme 수정

2026-07-29 18:03:21 +09:00
parent 8daa568746
commit 741c79b69f
180 changed files with 62890 additions and 13 deletions
@@ -0,0 +1,104 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="1411" height="392" viewBox="0 0 1411 392" role="img" aria-labelledby="diagram-title diagram-description">
+<title id="diagram-title">AP3의 masked CSRF 응답과 raw POST credential</title>
+<desc id="diagram-description">왼쪽의 BFF CSRF endpoint에서 두 결과가 갈라진다. XSRF-TOKEN cookie에는 raw token이 저장되고 JSON body에는 XOR와 Base64로 masked된 token 및 headerName이 담긴다. 두 결과는 SPA의 POST 조립 단계로 모이지만, JSON에서는 headerName만 사용하고 실제 X-XSRF-TOKEN 값은 document.cookie에서 읽은 raw token이다. POST에는 같은 raw 값을 가진 cookie와 header가 함께 도달하고 Spring CSRF filter가 일치 여부를 확인한다.</desc>
+<metadata>{&quot;techviz&quot;:{&quot;spec_version&quot;:&quot;1.1&quot;,&quot;id&quot;:&quot;ap3-csrf-boundary&quot;,&quot;profile&quot;:&quot;component-flow&quot;},&quot;source_context&quot;:{&quot;document&quot;:&quot;document.md&quot;,&quot;document_sha256&quot;:&quot;df4d1a604c74e756672b5b40510abfedb8c67b39af280a5f51985ea9972f5371&quot;,&quot;anchor&quot;:{&quot;kind&quot;:&quot;marker&quot;,&quot;value&quot;:&quot;ap3-csrf-boundary&quot;,&quot;line&quot;:858}},&quot;evidence_policy&quot;:&quot;Each factual element cites source lines or is marked assumption.&quot;,&quot;diagram_only&quot;:true}</metadata>
+<defs>
+  <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+    <path d="M 0 0 L 10 5 L 0 10 z" />
+  </marker>
+  <style>
+    :root { color-scheme: light; }
+    text { font-family: Inter, Pretendard, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; fill: #111827; }
+    .canvas { fill: #ffffff; }
+    .group-box { fill: #ffffff; stroke: #9ca3af; stroke-width: 1.4; stroke-dasharray: 7 5; }
+    .group-label-bg { fill: #ffffff; }
+    .group-label { font-size: 13px; font-weight: 650; fill: #374151; }
+    .edge { fill: none; stroke: #374151; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; marker-end: url(#arrow); }
+    .edge.style-dashed, .edge.semantic-dashed, .edge.assumption { stroke-dasharray: 7 5; }
+    .edge.style-dotted { stroke-dasharray: 2 5; }
+    .edge.emphasis-primary { stroke: #2563eb; stroke-width: 2.2; }
+    .edge.emphasis-muted { stroke: #9ca3af; }
+    .edge.emphasis-warning, .edge.kind-failure, .edge.kind-error { stroke: #dc2626; stroke-width: 2.2; }
+    .edge-label-bg { fill: #ffffff; }
+    .edge-label { font-size: 12px; font-weight: 560; text-anchor: middle; }
+    .node-shape { fill: #ffffff; stroke: #4b5563; stroke-width: 1.7; }
+    .node-shape.emphasis-primary { stroke: #2563eb; stroke-width: 2.2; }
+    .node-shape.emphasis-muted { stroke: #9ca3af; fill: #f9fafb; }
+    .node-shape.emphasis-warning { stroke: #d97706; stroke-width: 2; fill: #fffdf5; }
+    .node-shape.kind-database, .node-shape.kind-datastore, .node-shape.kind-storage { fill: #f8fafc; }
+    .node-shape.kind-queue, .node-shape.kind-event, .node-shape.kind-topic { fill: #fafafa; }
+    .node-shape.assumption { stroke-dasharray: 4 4; }
+    .storage-bottom, .controller-divider { fill: none; stroke: #4b5563; stroke-width: 1.4; }
+    .controller-led { fill: #4b5563; }
+    .actor-symbol { fill: none; stroke: #4b5563; stroke-width: 1.8; stroke-linecap: round; }
+    .actor-symbol.emphasis-primary { stroke: #2563eb; stroke-width: 2.2; }
+    .node-label { font-size: 14px; font-weight: 650; text-anchor: middle; }
+    .node-role { font-size: 10px; letter-spacing: 0.04em; text-anchor: middle; fill: #6b7280; }
+    .node-detail-divider { stroke: #d1d5db; stroke-width: 1; }
+    .node-detail { font-size: 11px; fill: #374151; }
+    .assumption-badge { font-size: 9px; font-weight: 700; fill: #92400e; }
+    .failure-mark { stroke: #dc2626; stroke-width: 4; stroke-linecap: round; }
+    .lifeline { stroke: #9ca3af; stroke-width: 1.2; stroke-dasharray: 5 5; }
+    .timeline-axis { stroke: #374151; stroke-width: 1.8; marker-end: url(#arrow); }
+    .timeline-stem { stroke: #6b7280; stroke-width: 1.3; }
+    .timeline-marker { fill: #ffffff; stroke: #374151; stroke-width: 1.7; }
+    .timeline-marker.primary { fill: #2563eb; stroke: #2563eb; }
+    .timeline-marker.warning { fill: #dc2626; stroke: #dc2626; }
+    .timeline-label { font-size: 13px; font-weight: 650; text-anchor: middle; }
+    .timeline-detail { font-size: 11px; fill: #4b5563; text-anchor: middle; }
+  </style>
+</defs>
+<rect class="canvas" width="1411" height="392" />
+<polyline class="edge kind-request style-solid emphasis-primary" points="990.0,203.5 1070.0,203.5 1070.0,203.5 1150.0,203.5" data-evidence="848-873" />
+<rect class="edge-label-bg" x="984.0" y="161.5" width="172.1" height="22" rx="3" />
+<text class="edge-label" x="1070.0" y="176.5">Cookie raw = Header raw</text>
+<polyline class="edge kind-response style-solid emphasis-normal semantic-dashed" points="220.0,194.5 300.0,194.5 300.0,115.0 380.0,115.0" data-evidence="836-844" />
+<rect class="edge-label-bg" x="278.1" y="140.8" width="91.7" height="22" rx="3" />
+<text class="edge-label" x="324.0" y="155.8">masked JSON</text>
+<polyline class="edge kind-response style-solid emphasis-normal semantic-dashed" points="220.0,212.5 309.8,212.5 309.8,294.5 399.5,294.5" data-evidence="827-834" />
+<rect class="edge-label-bg" x="271.1" y="239.5" width="125.2" height="22" rx="3" />
+<text class="edge-label" x="333.8" y="254.5">Set-Cookie · raw</text>
+<polyline class="edge kind-data style-solid emphasis-normal" points="600.0,115.0 680.0,115.0 680.0,194.5 760.0,194.5" data-evidence="846-856" />
+<rect class="edge-label-bg" x="644.8" y="140.8" width="118.5" height="22" rx="3" />
+<text class="edge-label" x="704.0" y="155.8">headerName only</text>
+<polyline class="edge kind-data style-solid emphasis-primary" points="580.5,294.5 670.2,294.5 670.2,212.5 760.0,212.5" data-evidence="846-856" />
+<rect class="edge-label-bg" x="614.9" y="239.5" width="158.7" height="22" rx="3" />
+<text class="edge-label" x="694.2" y="254.5">document.cookie · raw</text>
+<g id="node-csrf-endpoint">
+<rect class="node-shape kind-service emphasis-normal role-source" data-evidence="819-844" x="70.0" y="171.5" width="150.0" height="64.0" rx="7" />
+<text class="node-label" x="145.0" y="201.5">BFF · /bff/csrf</text>
+</g>
+<g id="node-masked-json">
+<path class="node-shape kind-data emphasis-normal role-store" data-evidence="836-846" d="M 380.0 60.0 H 569.2 L 600.0 90.8 V 170.0 H 380.0 Z M 569.2 60.0 V 90.8 H 600.0" />
+<text class="node-label" x="490.0" y="89.0">JSON body · masked</text>
+<line class="node-detail-divider" x1="394.0" y1="110.0" x2="586.0" y2="110.0" />
+<text class="node-detail" x="396.0" y="127.0">token = XOR/Base64</text>
+<text class="node-detail" x="396.0" y="143.0">headerName metadata</text>
+<text class="node-detail" x="396.0" y="159.0">POST token 값으로 미사용</text>
+</g>
+<g id="node-raw-cookie">
+<rect class="node-shape kind-credential emphasis-primary role-store" data-evidence="827-834,844-856" x="399.5" y="242.0" width="181.0" height="105.0" rx="7" />
+<text class="node-label" x="490.0" y="269.0">Browser cookie · raw</text>
+<line class="node-detail-divider" x1="413.5" y1="290.0" x2="566.5" y2="290.0" />
+<text class="node-detail" x="415.5" y="307.0">XSRF-TOKEN</text>
+<text class="node-detail" x="415.5" y="323.0">JavaScript-readable</text>
+<text class="node-detail" x="415.5" y="339.0">실제 header data source</text>
+</g>
+<g id="node-post-assembler">
+<rect class="node-shape kind-component emphasis-normal role-service" data-evidence="846-856,862-870" x="760.0" y="151.0" width="230.0" height="105.0" rx="7" />
+<text class="node-label" x="875.0" y="178.0">SPA POST 조립</text>
+<line class="node-detail-divider" x1="774.0" y1="199.0" x2="976.0" y2="199.0" />
+<text class="node-detail" x="776.0" y="216.0">Cookie 자동 첨부</text>
+<text class="node-detail" x="776.0" y="232.0">document.cookie raw → header</text>
+<text class="node-detail" x="776.0" y="248.0">JSON headerName만 사용</text>
+</g>
+<g id="node-csrf-filter">
+<rect class="node-shape kind-security emphasis-normal role-sink" data-evidence="854-854,873-873,897-904" x="1150.0" y="151.0" width="216.0" height="105.0" rx="7" />
+<text class="node-label" x="1258.0" y="178.0">Spring CSRF filter</text>
+<line class="node-detail-divider" x1="1164.0" y1="199.0" x2="1352.0" y2="199.0" />
+<text class="node-detail" x="1166.0" y="216.0">raw cookie = raw header 비교</text>
+<text class="node-detail" x="1166.0" y="232.0">일치 → controller</text>
+<text class="node-detail" x="1166.0" y="248.0">부재·불일치 → 403</text>
+</g>
+</svg>