[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FH30NPJAXM30VB2RAPKB19":3,"skill-same:01M6FH30NPJAXM30VB2RAPKB19":59},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":21,"linkOnly":22,"markdownContent":23,"markdownBody":24,"frontMatter":25,"refName":26,"commitSha":27,"skillDirectory":28,"forksCount":29,"repositoryHtmlUrl":30,"repositoryHomepageUrl":31,"ownerHtmlUrl":32,"ownerBlogUrl":6,"ownerDescription":33,"updatedAt":34,"install":35,"resources":48},"01M6FH30NPJAXM30VB2RAPKB19","xss-prevention",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fsecondsky\u002Fclaude-skills\u002Fxss-prevention\u002FSKILL.md",[],[18,19,20],"xss","prevention","xss prevention","2026-11-10 10:12:30",false,"---\nname: xss-prevention\ndescription: XSS attack prevention with input sanitization, output encoding, Content Security Policy. Use for user-generated content, rich text editors, web application security, or encountering stored XSS, reflected XSS, DOM manipulation, script injection errors.\n\n  Keywords: sanitization, HTML-encoding, DOMPurify, CSP, Content-Security-Policy, rich-text-editor, user-input, escaping, innerHTML, DOM-manipulation, stored-XSS, reflected-XSS, input-validation, output-encoding, trusted-types, XSS-attacks, web-security, user-generated-content, secure-coding, script-injection, DOM-based-XSS\nlicense: MIT\n---\n\n# XSS Prevention\n\n## Overview\n\nImplement comprehensive Cross-Site Scripting attack prevention through input sanitization, output encoding, Content Security Policy headers, and secure coding practices.\n\n## When to Use\n\n- User-generated content display\n- Rich text editors\n- Comment systems\n- Search functionality\n- Dynamic HTML generation\n- Template rendering scenarios\n\n## XSS Attack Types\n\n| Type | Vector | Defense |\n|------|--------|---------|\n| Reflected | URL parameters | Output encoding |\n| Stored | Database content | Input sanitization |\n| DOM-based | Client-side JS | Safe DOM APIs |\n| Mutation | HTML parser quirks | Strict sanitization |\n\n## Output Encoding (Node.js)\n\n```javascript\nfunction encodeHTML(str) {\n  return str\n    .replace(\u002F&\u002Fg, '&')\n    .replace(\u002F\u003C\u002Fg, '<')\n    .replace(\u002F>\u002Fg, '>')\n    .replace(\u002F\"\u002Fg, '"')\n    .replace(\u002F'\u002Fg, ''');\n}\n\nfunction encodeForAttribute(str) {\n  return str.replace(\u002F[^\\w.-]\u002Fg, char =>\n    `&#x${char.charCodeAt(0).toString(16)};`\n  );\n}\n\n\u002F\u002F Usage in templates\napp.get('\u002Fprofile', (req, res) => {\n  const username = encodeHTML(req.query.name);\n  res.send(`\u003Ch1>Welcome, ${username}\u003C\u002Fh1>`);\n});\n```\n\n## DOMPurify Sanitization\n\n```javascript\nimport DOMPurify from 'dompurify';\n\nconst config = {\n  ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br'],\n  ALLOWED_ATTR: ['href', 'title'],\n  ALLOW_DATA_ATTR: false\n};\n\nfunction sanitizeHTML(dirty) {\n  return DOMPurify.sanitize(dirty, config);\n}\n\n\u002F\u002F React component\nfunction RichContent({ html }) {\n  return (\n    \u003Cdiv dangerouslySetInnerHTML={{ __html: sanitizeHTML(html) }} \u002F>\n  );\n}\n```\n\n## Content Security Policy\n\n```javascript\n\u002F\u002F Express middleware\napp.use((req, res, next) => {\n  const nonce = crypto.randomBytes(16).toString('base64');\n  res.locals.nonce = nonce;\n\n  res.setHeader('Content-Security-Policy', [\n    \"default-src 'self'\",\n    `script-src 'self' 'nonce-${nonce}'`,\n    \"style-src 'self' 'unsafe-inline'\",\n    \"img-src 'self' data: https:\",\n    \"connect-src 'self' https:\u002F\u002Fapi.example.com\",\n    \"frame-ancestors 'none'\",\n    \"base-uri 'self'\",\n    \"form-action 'self'\"\n  ].join('; '));\n\n  next();\n});\n```\n\n## Safe DOM APIs\n\n```javascript\n\u002F\u002F DANGEROUS - avoid these\nelement.innerHTML = userInput;        \u002F\u002F XSS risk\nelement.outerHTML = userInput;        \u002F\u002F XSS risk\ndocument.write(userInput);            \u002F\u002F XSS risk\neval(userInput);                      \u002F\u002F Code injection\n\n\u002F\u002F SAFE - use these instead\nelement.textContent = userInput;      \u002F\u002F Escaped automatically\nelement.setAttribute('data-id', id);  \u002F\u002F Safe for attributes\ndocument.createTextNode(userInput);   \u002F\u002F Creates safe text node\n```\n\n## URL Validation\n\n```javascript\nfunction isSafeURL(url) {\n  try {\n    const parsed = new URL(url);\n    return ['http:', 'https:'].includes(parsed.protocol);\n  } catch {\n    return false;\n  }\n}\n\n\u002F\u002F Usage\nconst href = isSafeURL(userURL) ? userURL : '#';\n```\n\n## Context-Specific Encoding\n\nDifferent contexts require different encoding approaches:\n\n- **HTML Entity Encoding**: Safest option for text content\n- **Attribute Encoding**: For HTML attributes\n- **JavaScript Escaping**: For script contexts\n- **URL Encoding**: For URL parameters\n- **CSS Escaping**: For stylesheet contexts\n\nAlways encode output by the specific context where data will be rendered.\n\n## Additional Implementations\n\nSee [references\u002Fpython-sanitization.md](references\u002Fpython-sanitization.md) for:\n- Python bleach library usage\n- Flask\u002FDjango template escaping\n- Server-side validation patterns\n\nSee [references\u002Fnodejs-advanced.md](references\u002Fnodejs-advanced.md) for:\n- Complete XSSPrevention class with all methods\n- Express middleware (xssProtection)\n- React components (SafeText, SafeHTML, SafeLink, useSanitizedInput)\n- Helmet CSP configuration\n\n## Best Practices\n\n**✅ DO:**\n- Encode output by default\n- Use templating engines with auto-escaping\n- Implement CSP headers\n- Sanitize rich content with allowlists\n- Validate URLs with protocol whitelisting\n- Use HTTPOnly cookies\n- Conduct regular security testing\n- Leverage secure frameworks\n\n**❌ DON'T:**\n- Trust user input\n- Use unsafe functions (eval, innerHTML)\n- Disable security features for convenience\n- Rely solely on client-side validation\n- Use blocklists instead of allowlists\n- Skip context-specific encoding\n- Allow arbitrary script execution\n\n## Security Checklist\n\n- [ ] Encode all output by context (HTML, attribute, JS)\n- [ ] Sanitize HTML with allowlist (not blocklist)\n- [ ] Implement strict CSP headers\n- [ ] Use HTTPOnly cookies for sessions\n- [ ] Validate and sanitize URLs\n- [ ] Avoid innerHTML with user content\n- [ ] Regular security testing\n\n## Resources\n\n- [OWASP XSS Prevention Cheat Sheet](https:\u002F\u002Fcheatsheetseries.owasp.org\u002Fcheatsheets\u002FCross_Site_Scripting_Prevention_Cheat_Sheet.html)\n- [DOMPurify Documentation](https:\u002F\u002Fgithub.com\u002Fcure53\u002FDOMPurify)\n- [Content Security Policy Reference](https:\u002F\u002Fcontent-security-policy.com\u002F)\n- [Web Security by Mozilla](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FSecurity)\n","# XSS Prevention\n\n## Overview\n\nImplement comprehensive Cross-Site Scripting attack prevention through input sanitization, output encoding, Content Security Policy headers, and secure coding practices.\n\n## When to Use\n\n- User-generated content display\n- Rich text editors\n- Comment systems\n- Search functionality\n- Dynamic HTML generation\n- Template rendering scenarios\n\n## XSS Attack Types\n\n| Type | Vector | Defense |\n|------|--------|---------|\n| Reflected | URL parameters | Output encoding |\n| Stored | Database content | Input sanitization |\n| DOM-based | Client-side JS | Safe DOM APIs |\n| Mutation | HTML parser quirks | Strict sanitization |\n\n## Output Encoding (Node.js)\n\n```javascript\nfunction encodeHTML(str) {\n  return str\n    .replace(\u002F&\u002Fg, '&')\n    .replace(\u002F\u003C\u002Fg, '<')\n    .replace(\u002F>\u002Fg, '>')\n    .replace(\u002F\"\u002Fg, '"')\n    .replace(\u002F'\u002Fg, ''');\n}\n\nfunction encodeForAttribute(str) {\n  return str.replace(\u002F[^\\w.-]\u002Fg, char =>\n    `&#x${char.charCodeAt(0).toString(16)};`\n  );\n}\n\n\u002F\u002F Usage in templates\napp.get('\u002Fprofile', (req, res) => {\n  const username = encodeHTML(req.query.name);\n  res.send(`\u003Ch1>Welcome, ${username}\u003C\u002Fh1>`);\n});\n```\n\n## DOMPurify Sanitization\n\n```javascript\nimport DOMPurify from 'dompurify';\n\nconst config = {\n  ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br'],\n  ALLOWED_ATTR: ['href', 'title'],\n  ALLOW_DATA_ATTR: false\n};\n\nfunction sanitizeHTML(dirty) {\n  return DOMPurify.sanitize(dirty, config);\n}\n\n\u002F\u002F React component\nfunction RichContent({ html }) {\n  return (\n    \u003Cdiv dangerouslySetInnerHTML={{ __html: sanitizeHTML(html) }} \u002F>\n  );\n}\n```\n\n## Content Security Policy\n\n```javascript\n\u002F\u002F Express middleware\napp.use((req, res, next) => {\n  const nonce = crypto.randomBytes(16).toString('base64');\n  res.locals.nonce = nonce;\n\n  res.setHeader('Content-Security-Policy', [\n    \"default-src 'self'\",\n    `script-src 'self' 'nonce-${nonce}'`,\n    \"style-src 'self' 'unsafe-inline'\",\n    \"img-src 'self' data: https:\",\n    \"connect-src 'self' https:\u002F\u002Fapi.example.com\",\n    \"frame-ancestors 'none'\",\n    \"base-uri 'self'\",\n    \"form-action 'self'\"\n  ].join('; '));\n\n  next();\n});\n```\n\n## Safe DOM APIs\n\n```javascript\n\u002F\u002F DANGEROUS - avoid these\nelement.innerHTML = userInput;        \u002F\u002F XSS risk\nelement.outerHTML = userInput;        \u002F\u002F XSS risk\ndocument.write(userInput);            \u002F\u002F XSS risk\neval(userInput);                      \u002F\u002F Code injection\n\n\u002F\u002F SAFE - use these instead\nelement.textContent = userInput;      \u002F\u002F Escaped automatically\nelement.setAttribute('data-id', id);  \u002F\u002F Safe for attributes\ndocument.createTextNode(userInput);   \u002F\u002F Creates safe text node\n```\n\n## URL Validation\n\n```javascript\nfunction isSafeURL(url) {\n  try {\n    const parsed = new URL(url);\n    return ['http:', 'https:'].includes(parsed.protocol);\n  } catch {\n    return false;\n  }\n}\n\n\u002F\u002F Usage\nconst href = isSafeURL(userURL) ? userURL : '#';\n```\n\n## Context-Specific Encoding\n\nDifferent contexts require different encoding approaches:\n\n- **HTML Entity Encoding**: Safest option for text content\n- **Attribute Encoding**: For HTML attributes\n- **JavaScript Escaping**: For script contexts\n- **URL Encoding**: For URL parameters\n- **CSS Escaping**: For stylesheet contexts\n\nAlways encode output by the specific context where data will be rendered.\n\n## Additional Implementations\n\nSee [references\u002Fpython-sanitization.md](references\u002Fpython-sanitization.md) for:\n- Python bleach library usage\n- Flask\u002FDjango template escaping\n- Server-side validation patterns\n\nSee [references\u002Fnodejs-advanced.md](references\u002Fnodejs-advanced.md) for:\n- Complete XSSPrevention class with all methods\n- Express middleware (xssProtection)\n- React components (SafeText, SafeHTML, SafeLink, useSanitizedInput)\n- Helmet CSP configuration\n\n## Best Practices\n\n**✅ DO:**\n- Encode output by default\n- Use templating engines with auto-escaping\n- Implement CSP headers\n- Sanitize rich content with allowlists\n- Validate URLs with protocol whitelisting\n- Use HTTPOnly cookies\n- Conduct regular security testing\n- Leverage secure frameworks\n\n**❌ DON'T:**\n- Trust user input\n- Use unsafe functions (eval, innerHTML)\n- Disable security features for convenience\n- Rely solely on client-side validation\n- Use blocklists instead of allowlists\n- Skip context-specific encoding\n- Allow arbitrary script execution\n\n## Security Checklist\n\n- [ ] Encode all output by context (HTML, attribute, JS)\n- [ ] Sanitize HTML with allowlist (not blocklist)\n- [ ] Implement strict CSP headers\n- [ ] Use HTTPOnly cookies for sessions\n- [ ] Validate and sanitize URLs\n- [ ] Avoid innerHTML with user content\n- [ ] Regular security testing\n\n## Resources\n\n- [OWASP XSS Prevention Cheat Sheet](https:\u002F\u002Fcheatsheetseries.owasp.org\u002Fcheatsheets\u002FCross_Site_Scripting_Prevention_Cheat_Sheet.html)\n- [DOMPurify Documentation](https:\u002F\u002Fgithub.com\u002Fcure53\u002FDOMPurify)\n- [Content Security Policy Reference](https:\u002F\u002Fcontent-security-policy.com\u002F)\n- [Web Security by Mozilla](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FSecurity)\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fsecondsky\u002Fclaude-skills\u002Fxss-prevention",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":36,"prompt":46,"zipAvailable":47},[37,40,43],{"tool":38,"command":39},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill xss-prevention",{"tool":41,"command":42},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill xss-prevention",{"tool":44,"command":45},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill xss-prevention","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fsecondsky\u002Fclaude-skills\u002Fxss-prevention\u002FSKILL.md",true,[49,55],{"path":50,"resourceType":51,"resourceTypeDesc":52,"sizeBytes":53,"sourceHtmlUrl":54},"references\u002Fnodejs-advanced.md","REFERENCE","参考文档",8846,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fsecondsky\u002Fclaude-skills\u002Fxss-prevention\u002Freferences\u002Fnodejs-advanced.md",{"path":56,"resourceType":51,"resourceTypeDesc":52,"sizeBytes":57,"sourceHtmlUrl":58},"references\u002Fpython-sanitization.md",4747,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fsecondsky\u002Fclaude-skills\u002Fxss-prevention\u002Freferences\u002Fpython-sanitization.md",[60,74,84,93,99,106],{"skillNo":61,"name":62,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":70,"publishedAt":21},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[65],{"categoryNo":66,"categoryName":67,"taxonomyType":68,"taxonomyTypeDesc":69},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[71,72,73],"model","model hierarchy","model hierarchy skill",{"skillNo":75,"name":76,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":80,"publishedAt":21},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[79],{"categoryNo":66,"categoryName":67,"taxonomyType":68,"taxonomyTypeDesc":69},[81,82,83],"MCP","zoom","zoom mcp",{"skillNo":85,"name":86,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":21},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[90,91,92,82],"sdk","zoom apps sdk","apps",{"skillNo":94,"name":95,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":98,"publishedAt":21},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[95],{"skillNo":100,"name":101,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":105,"publishedAt":21},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[104],{"categoryNo":66,"categoryName":67,"taxonomyType":68,"taxonomyTypeDesc":69},[101],{"skillNo":107,"name":108,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":111,"publishedAt":21},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[108]]