1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[856],{38552:(e,i,r)=>{"use strict";r.r(i),r.d(i,{default:()=>s});var n=r(37876),o=r(14232),t=r(81290);function s(){let[e,i]=(0,o.useState)("STANDARD"),[r,s]=(0,o.useState)(!1),[l,a]=(0,o.useState)("Waiting for injection..."),p="\n <div style=\"padding: 20px; background: #fff3cd; border: 2px solid #ffc107; border-radius: 8px; margin: 20px 0;\">\n <h3 style=\"color: #856404; margin-top: 0;\">â ï¸ This is REAL malicious HTML!</h3>\n <p>The image below has an onerror handler that will execute JavaScript:</p>\n <img \n src=\"https://invalid-url-that-will-fail.com/image.jpg\" \n onerror=\"document.getElementById('proof-div').innerHTML = '<strong style=\\'color: red; font-size: 20px;\\'>â
JAVASCRIPT EXECUTED! This proves it\\'s real HTML, not text!</strong>'; document.getElementById('proof-div').style.background = '#ffcdd2'; document.getElementById('proof-div').style.padding = '20px';\"\n style=\"display: none;\"\n />\n <div id=\"proof-div\" style=\"min-height: 60px; border: 2px dashed #666; padding: 15px; background: #f5f5f5; margin-top: 15px; border-radius: 4px;\">\n <em style=\"color: #666;\">If the image's onerror handler executes, this text will be replaced...</em>\n </div>\n </div>\n ";return(0,n.jsxs)("div",{style:{padding:"40px",maxWidth:"1200px",margin:"0 auto",fontFamily:"Arial, sans-serif"},children:[(0,n.jsx)("h1",{style:{color:"#1976d2"},children:"\uD83D\uDEE1ï¸ AEM Content Sanitizer - XSS Injection Demo"}),(0,n.jsxs)("div",{style:{backgroundColor:"#ffebee",padding:"30px",borderRadius:"12px",marginBottom:"40px",border:"3px solid #f44336"},children:[(0,n.jsx)("h2",{style:{marginTop:0,color:"#c62828"},children:"\uD83D\uDD34 PROOF: Actual HTML Injection vs Text"}),(0,n.jsxs)("div",{style:{marginBottom:"30px"},children:[(0,n.jsx)("h3",{children:"Option 1: Rendered as TEXT (what you see in AEM)"}),(0,n.jsx)("p",{style:{fontSize:"14px",color:"#666"},children:"When you type in AEM or a textarea, it becomes text:"}),(0,n.jsx)("div",{style:{backgroundColor:"#e8f5e9",padding:"15px",borderRadius:"8px",border:"2px solid #4caf50"},children:(0,n.jsx)("div",{children:'<img src="x" onerror="alert(\'XSS\')">'})}),(0,n.jsx)("p",{style:{fontSize:"12px",color:"#666",marginTop:"10px"},children:"â This is SAFE - it's just text that looks like HTML"})]}),(0,n.jsxs)("div",{style:{marginBottom:"30px"},children:[(0,n.jsx)("h3",{children:"Option 2: Rendered as ACTUAL HTML (DANGEROUS!)"}),(0,n.jsx)("p",{style:{fontSize:"14px",color:"#666"},children:"Click the button to render the SAME string as actual HTML using dangerouslySetInnerHTML:"}),(0,n.jsx)("button",{onClick:()=>s(!r),style:{padding:"12px 24px",backgroundColor:r?"#d32f2f":"#f44336",color:"#fff",border:"none",borderRadius:"8px",cursor:"pointer",fontSize:"16px",fontWeight:"bold",marginBottom:"20px"},children:r?"\uD83D\uDD12 Hide Unsanitized HTML":"â ï¸ RENDER UNSANITIZED HTML (will execute!)"}),r&&(0,n.jsxs)("div",{children:[(0,n.jsx)("div",{style:{backgroundColor:"#ffcdd2",padding:"15px",borderRadius:"8px",border:"3px solid #d32f2f"},children:(0,n.jsx)("div",{dangerouslySetInnerHTML:{__html:p}})}),(0,n.jsx)("p",{style:{fontSize:"12px",color:"#d32f2f",marginTop:"10px",fontWeight:"bold"},children:'â If you see "JAVASCRIPT EXECUTED!" above, that proves the HTML is REAL and dangerous!'})]})]}),(0,n.jsxs)("div",{children:[(0,n.jsx)("h3",{children:"Option 3: Sanitized HTML (SAFE!)"}),(0,n.jsx)("p",{style:{fontSize:"14px",color:"#666"},children:"The same malicious HTML, but sanitized before rendering:"}),(0,n.jsx)("div",{style:{backgroundColor:"#e8f5e9",padding:"15px",borderRadius:"8px",border:"2px solid #4caf50"},children:(0,n.jsx)("div",{dangerouslySetInnerHTML:{__html:(0,t.pn)(p,e)}})}),(0,n.jsx)("p",{style:{fontSize:"12px",color:"#2e7d32",marginTop:"10px",fontWeight:"bold"},children:"â The script was removed! Only safe content remains."}),(0,n.jsxs)("details",{style:{marginTop:"15px"},children:[(0,n.jsx)("summary",{style:{cursor:"pointer",color:"#1976d2",fontWeight:"bold"},children:"View sanitized HTML code"}),(0,n.jsx)("pre",{style:{backgroundColor:"#f5f5f5",padding:"10px",borderRadius:"4px",overflow:"auto",fontSize:"12px"},children:(0,t.pn)(p,e)})]})]})]}),(0,n.jsxs)("div",{style:{backgroundColor:"#e3f2fd",padding:"20px",borderRadius:"8px",marginBottom:"30px"},children:[(0,n.jsx)("h2",{style:{marginTop:0},children:"Sanitization Profile"}),(0,n.jsx)("div",{style:{display:"flex",gap:"10px",flexWrap:"wrap"},children:Object.keys(t.vW).map(r=>(0,n.jsx)("button",{onClick:()=>i(r),style:{padding:"10px 20px",backgroundColor:e===r?"#1976d2":"#fff",color:e===r?"#fff":"#1976d2",border:"2px s
1olid #1976d2",borderRadius:"4px",cursor:"pointer",fontSize:"14px",fontWeight:"bold"},children:r},r))})]}),(0,n.jsx)("h2",{children:"\uD83C\uDFAF More XSS Attack Examples"}),(0,n.jsx)(d,{name:"Script Tag Injection",malicious:'<p>Hello</p><script>alert("XSS")<\/script><p>World</p>',profile:e}),(0,n.jsx)(d,{name:"Event Handler on Link",malicious:'<a href="#" onclick="alert(\'XSS\')">Click me</a>',profile:e}),(0,n.jsx)(d,{name:"JavaScript Protocol",malicious:"<a href=\"javascript:alert('XSS')\">Malicious Link</a>",profile:e}),(0,n.jsx)(d,{name:"Iframe Injection",malicious:'<iframe src="https://evil.com"></iframe>',profile:e}),(0,n.jsxs)("div",{style:{backgroundColor:"#e8f5e9",padding:"20px",borderRadius:"8px",marginTop:"40px"},children:[(0,n.jsx)("h2",{style:{marginTop:0},children:"\uD83D\uDCA1 Why This Matters for AEM"}),(0,n.jsxs)("p",{style:{fontSize:"14px",lineHeight:"1.8"},children:["When you fetch content from AEM, it comes as a ",(0,n.jsx)("strong",{children:"string"}),". If you use ",(0,n.jsx)("code",{children:"dangerouslySetInnerHTML"})," to render it, that string is interpreted as ",(0,n.jsx)("strong",{children:"actual HTML"})," by the browser. Any malicious scripts in that string will execute."]}),(0,n.jsxs)("p",{style:{fontSize:"14px",lineHeight:"1.8"},children:["The sanitizer processes the string ",(0,n.jsx)("strong",{children:"before"})," it reaches dangerouslySetInnerHTML, removing all dangerous elements while preserving safe HTML formatting."]}),(0,n.jsx)("pre",{style:{backgroundColor:"#fff",padding:"15px",borderRadius:"4px",overflow:"auto",fontSize:"13px",marginTop:"15px"},children:"// â DANGEROUS - Don't do this with AEM content!\n<div dangerouslySetInnerHTML={{ __html: aemContent }}/>\n\n// â SAFE - Always sanitize first\nimport { sanitizeHtml } from '@/utils/authoring/aemContentSanitizer';\nconst safe = sanitizeHtml(aemContent, 'STANDARD');\n<div dangerouslySetInnerHTML={{ __html: safe }}/>"})]})]})}function d(e){let{name:i,malicious:r,profile:o}=e,s=(0,t.pn)(r,o);return(0,n.jsxs)("div",{style:{border:"2px solid #e0e0e0",borderRadius:"8px",padding:"20px",marginBottom:"20px",backgroundColor:"#fafafa"},children:[(0,n.jsxs)("h3",{style:{marginTop:0,color:"#d32f2f"},children:["â ï¸ ",i]}),(0,n.jsxs)("div",{style:{marginTop:"15px"},children:[(0,n.jsx)("h4",{style:{fontSize:"14px"},children:"Original (malicious):"}),(0,n.jsx)("pre",{style:{backgroundColor:"#ffebee",padding:"10px",borderRadius:"4px",overflow:"auto",fontSize:"12px",border:"1px solid #ef5350"},children:r})]}),(0,n.jsxs)("div",{style:{marginTop:"15px"},children:[(0,n.jsx)("h4",{style:{fontSize:"14px"},children:"After sanitization:"}),(0,n.jsx)("pre",{style:{backgroundColor:"#e8f5e9",padding:"10px",borderRadius:"4px",overflow:"auto",fontSize:"12px",border:"1px solid #66bb6a"},children:s||"(completely removed)"})]}),(0,n.jsxs)("div",{style:{marginTop:"15px"},children:[(0,n.jsx)("h4",{style:{fontSize:"14px"},children:"Rendered safely:"}),(0,n.jsx)("div",{style:{backgroundColor:"#fff",padding:"15px",borderRadius:"4px",border:"2px solid #4caf50",minHeight:"40px"},children:(0,n.jsx)("div",{dangerouslySetInnerHTML:{__html:s}})})]})]})}},62384:(e,i,r)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/test/sanitizer-demo",function(){return r(38552)}])}},e=>{e.O(0,[636,6593,8792],()=>e(e.s=62384)),_N_E=e.O()}]); 2//# sourceMappingURL=sanitizer-demo-9ba22196f74a176c.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.