security: replace innerHTML with textContent and DOM API to prevent XSS

Author: myoshi2891

JavaScript/2630. Memoize II/Claude Code Sonnet 4.6 extended/README_react.html

@@ -2190,12 +2190,16 @@ <h3 className="text-teal-800 text-lg font-bold m-0">
             document.querySelectorAll('header nav').forEach((nav) => {
                 const labels = ['概要', '解説', 'コード', 'フロー', '計算量'];
                 const ids = ['overview', 'steps', 'code', 'diagram', 'complexity'];
-                nav.innerHTML = labels
-                    .map(
-                        (l, i) =>
-                            `<a href="#${ids[i]}" class="inline-block px-5 py-2 font-semibold text-slate-700 no-underline rounded-xl border-2 border-slate-200 bg-white/80 transition-all hover:shadow-[0_8px_20px_rgba(15,118,110,0.20)] hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,#e8fff6,#c8f1e1)] hover:border-teal-600">${l}</a>`,
-                    )
-                    .join('');
+                const frag = document.createDocumentFragment();
+                labels.forEach((label, i) => {
+                    const link = document.createElement('a');
+                    link.href = `#${ids[i]}`;
+                    link.className =
+                        'inline-block px-5 py-2 font-semibold text-slate-700 no-underline rounded-xl border-2 border-slate-200 bg-white/80 transition-all hover:shadow-[0_8px_20px_rgba(15,118,110,0.20)] hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,#e8fff6,#c8f1e1)] hover:border-teal-600';
+                    link.textContent = label;
+                    frag.appendChild(link);
+                });
+                nav.replaceChildren(frag);
             });
             Prism.highlightAll();
         </script>

public/JavaScript/2630. Memoize II/Claude Code Sonnet 4.6 extended/README_react.html

@@ -2190,12 +2190,16 @@ <h3 className="text-teal-800 text-lg font-bold m-0">
             document.querySelectorAll('header nav').forEach((nav) => {
                 const labels = ['概要', '解説', 'コード', 'フロー', '計算量'];
                 const ids = ['overview', 'steps', 'code', 'diagram', 'complexity'];
-                nav.innerHTML = labels
-                    .map(
-                        (l, i) =>
-                            `<a href="#${ids[i]}" class="inline-block px-5 py-2 font-semibold text-slate-700 no-underline rounded-xl border-2 border-slate-200 bg-white/80 transition-all hover:shadow-[0_8px_20px_rgba(15,118,110,0.20)] hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,#e8fff6,#c8f1e1)] hover:border-teal-600">${l}</a>`,
-                    )
-                    .join('');
+                const frag = document.createDocumentFragment();
+                labels.forEach((label, i) => {
+                    const link = document.createElement('a');
+                    link.href = `#${ids[i]}`;
+                    link.className =
+                        'inline-block px-5 py-2 font-semibold text-slate-700 no-underline rounded-xl border-2 border-slate-200 bg-white/80 transition-all hover:shadow-[0_8px_20px_rgba(15,118,110,0.20)] hover:-translate-y-0.5 hover:bg-[linear-gradient(180deg,#e8fff6,#c8f1e1)] hover:border-teal-600';
+                    link.textContent = label;
+                    frag.appendChild(link);
+                });
+                nav.replaceChildren(frag);
             });
             Prism.highlightAll();
         </script>

public/index.html

@@ -789,7 +789,7 @@ <h1 class="site-title">
 
     <footer>
         <span class="footer-icon">🧪</span>
-        Generated on 2026-02-23 03:29:42 UTC
+        Generated on 2026-02-23 03:38:33 UTC
     </footer>
 
     <script>