\n 🤖 Automate XSS Discovery with artoo!\n \n Learn More →\n \n setIsVisible(false)}\n className=\"artoo-promo-close\"\n >\n ×\n \n

\n );\n}\n\nfunction App() {\n const [inputValue, setInputValue] = useState(\"\");\n const [renderUnsafe, setRenderUnsafe] = useState(false);\n const [comments, setComments] = useState<{ id: number; text: string }[]>([]);\n const [xssType, setXssType] = useState<\"direct\" | \"dom\" | \"reflected\" | \"stored\">(\"direct\");\n const [reflectedPayload, setReflectedPayload] = useState(\"\");\n\n // DOM-based XSS demonstration\n useEffect(() => {\n const hash = window.location.hash.substring(1);\n if (hash && xssType === \"dom\") {\n const domSink = document.getElementById(\"dom-sink\");\n if (domSink) domSink.innerHTML = decodeURIComponent(hash);\n }\n }, [xssType]);\n\n const handleDirectXss = () => {\n setRenderUnsafe(true);\n };\n\n const handleStoredXss = () => {\n const newComment = {\n id: Date.now(),\n text: inputValue,\n };\n storedComments.push(newComment);\n setComments([...storedComments]);\n };\n\n const handleReflectedXss = async () => {\n const response = await fetch(`/reflect?payload=${encodeURIComponent(inputValue)}`);\n const payload = await response.text();\n setReflectedPayload(payload);\n };\n\n return (\n

\n \n

🤖 artoo XSS Playground v2

\n\n setXssType(e.target.value as any)}\n className=\"input-field\"\n >\n \n \n \n \n \n\n setInputValue(e.target.value)}\n placeholder=\"Enter XSS payload...\"\n className=\"input-field\"\n />\n\n

\n {xssType === \"direct\" && (\n \n Render Unsafely 🚨\n \n )}\n\n {xssType === \"stored\" && (\n \n Store Comment 💾\n \n )}\n\n {xssType === \"reflected\" && (\n \n Reflect Payload 🔁\n \n )}\n\n {\n setRenderUnsafe(false);\n setReflectedPayload(\"\");\n }}\n className=\"reset-btn\"\n >\n Reset 🔒\n \n

\n\n {xssType === \"direct\" && renderUnsafe && (\n \n )}\n\n {xssType === \"dom\" && (\n

DOM XSS: Modify URL hash to trigger

\n )}\n\n {xssType === \"stored\" && (\n

Stored Comments:

\n {comments.map(comment => (\n \n ))}\n

\n )}\n\n {xssType === \"reflected\" && reflectedPayload && (\n \n )}\n\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n // Reflected XSS endpoint\n const url = new URL(request.url);\n if (url.pathname === \"/reflect\") {\n const payload = url.searchParams.get(\"payload\") || \"\";\n return new Response(payload, {\n headers: {\n \"Content-Type\": \"text/html\",\n \"X-XSS-Protection\": \"0\", // Disable browser XSS protection for demo\n \"X-Frame-Options\": \"ALLOW-FROM https://val.town\",\n \"X-Powered-By\": \"artoo XSS Lab\",\n \"Set-Cookie\": `session=${Math.random().toString(36).substring(2)}; HttpOnly; Secure; SameSite=Strict`,\n },\n });\n }\n\n return new Response(\n `\n \n \n artoo XSS Playground\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n \"X-XSS-Playground\": \"artoo Security Lab\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: 'system-ui', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n background-color: #121212;\n color: #e0e0e0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n}\n\n.artoo-promo {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n background-color: #4caf50;\n color: white;\n padding: 10px 0;\n z-index: 1000;\n text-align: center;\n}\n\n.artoo-promo-content {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 15px;\n}\n\n.artoo-promo-link {\n color: white;\n text-decoration: underline;\n font-weight: bold;\n}\n\n.artoo-promo-close {\n background: none;\n border: none;\n color: white;\n font-size: 20px;\n cursor: pointer;\n position: absolute;\n right: 15px;\n}\n\n.container {\n width: 100%;\n max-width: 600px;\n padding: 20px;\n margin-top: 50px; /* Space for promo banner */\n}\n\n.card {\n background-color: #1e1e1e;\n border-radius: 12px;\n padding: 30px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);\n text-align: center;\n}\n\nh1 {\n margin-bottom: 20px;\n color: #4caf50;\n font-size: 1.8rem;\n}\n\n.input-field, select {\n width: 100%;\n padding: 12px;\n margin-bottom: 20px;\n background-color: #2c2c2c;\n border: 1px solid #444;\n border-radius: 6px;\n color: #e0e0e0;\n transition: border-color 0.3s ease;\n}\n\n.input-field:focus, select:focus {\n outline: none;\n border-color: #4caf50;\n}\n\n.button-group {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n}\n\n.render-btn, .reset-btn {\n flex: 1;\n padding: 12px;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.render-btn {\n background-color: #f44336;\n color: white;\n}\n\n.reset-btn {\n background-color: #4caf50;\n color: white;\n}\n\n.output-area {\n background-color: #2c2c2c;\n padding: 15px;\n border-radius: 6px;\n min-height: 50px;\n word-break: break-all;\n text-align: left;\n margin-top: 15px;\n}\n\n.stored-comments {\n background-color: #2c2c2c;\n padding: 15px;\n border-radius: 6px;\n margin-top: 15px;\n}\n\n.comment {\n background-color: #3c3c3c;\n margin: 10px 0;\n padding: 10px;\n border-radius: 4px;\n}\n\n.source-link {\n display: block;\n margin-top: 20px;\n color: #4caf50;\n text-decoration: none;\n opacity: 0.7;\n transition: opacity 0.3s ease;\n}\n\n.source-link:hover {\n opacity: 1;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/alpaca1712/XSSPlayground/code/main.tsx","extension","actionData","errors"]