File size: 21,891 Bytes
473994f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'">
<title>HIR × OAM Authorized Red-Team Map for LLM Defense</title>
<style>
:root{
--bg:#08090d; --panel:#111722; --panel2:#171f2b; --ink:#f7efe3; --muted:#c5baa5;
--gold:#e2b44f; --amber:#f3a63a; --red:#e35a5a; --green:#68c77b; --blue:#6bb8ff;
--line:rgba(226,180,79,.22); --glass:rgba(255,255,255,.055);
}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at 15% 0%,rgba(226,180,79,.16),transparent 28rem),radial-gradient(circle at 85% 12%,rgba(227,90,90,.14),transparent 30rem),radial-gradient(circle at 50% 100%,rgba(107,184,255,.10),transparent 34rem),var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55} .wrap{width:min(1180px,calc(100% - 32px));margin:auto}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.noise{position:fixed;inset:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
header{padding:70px 0 42px}.kicker{display:inline-flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--glass);border-radius:999px;padding:8px 12px;color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:.16em}.dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 22px var(--amber);animation:p 1.5s infinite}@keyframes p{50%{transform:scale(1.25);opacity:1}0%,100%{opacity:.45}}h1{font-size:clamp(40px,7vw,84px);line-height:.96;letter-spacing:-.055em;margin:22px 0 18px}h1 span{color:var(--gold)}.sub{max-width:860px;color:var(--muted);font-size:clamp(17px,2vw,22px)}.warning{margin-top:24px;display:grid;grid-template-columns:74px 1fr;gap:18px;background:linear-gradient(135deg,rgba(227,90,90,.12),rgba(226,180,79,.055));border:1px solid rgba(227,90,90,.28);border-radius:24px;padding:18px;max-width:920px}.warning .ico{display:grid;place-items:center;border-radius:18px;background:rgba(227,90,90,.12);border:1px solid rgba(227,90,90,.22);font-size:30px;color:var(--red)}.warning p{margin:0;color:var(--muted)}.warning strong{color:var(--ink)}
nav{position:sticky;top:0;z-index:10;background:rgba(8,9,13,.8);backdrop-filter:blur(14px);border-bottom:1px solid rgba(226,180,79,.12)}nav .wrap{display:flex;gap:10px;overflow-x:auto;padding:12px 0}nav a{white-space:nowrap;text-decoration:none;color:var(--muted);border:1px solid rgba(226,180,79,.16);border-radius:999px;padding:8px 12px;font-size:13px}nav a:hover{color:var(--ink);border-color:var(--gold)}section{padding:54px 0}.title{display:flex;gap:14px;align-items:center;margin-bottom:22px}.num{color:var(--gold);border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--glass);font-size:12px}h2{font-size:clamp(28px,4vw,44px);margin:0;letter-spacing:-.035em}.lead{max-width:900px;color:var(--muted);font-size:18px}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.four{grid-template-columns:repeat(4,1fr)}@media(max-width:900px){.grid.two,.grid.three,.grid.four{grid-template-columns:1fr}.warning{grid-template-columns:1fr}}@media(max-width:360px){nav{position:relative}}
.card{background:linear-gradient(180deg,rgba(255,255,255,.062),rgba(255,255,255,.028));border:1px solid rgba(226,180,79,.16);border-radius:24px;padding:22px;box-shadow:0 18px 70px rgba(0,0,0,.28);position:relative;overflow:hidden}.card:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.34}.card h3{margin:0 0 8px;font-size:20px}.card p{margin:0;color:var(--muted)}.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.tag{font-size:11px;text-transform:uppercase;letter-spacing:.08em;border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:5px 8px;color:var(--muted);background:rgba(255,255,255,.055)}.tag.red{color:var(--red);border-color:rgba(227,90,90,.25)}.tag.green{color:var(--green);border-color:rgba(104,199,123,.25)}.tag.blue{color:var(--blue);border-color:rgba(107,184,255,.25)}.tag.gold{color:var(--gold);border-color:rgba(226,180,79,.28)}
.matrix{display:grid;grid-template-columns:1fr 1.15fr 1.2fr;gap:1px;background:rgba(226,180,79,.18);border:1px solid rgba(226,180,79,.18);border-radius:22px;overflow:hidden}.cell{background:rgba(17,23,34,.96);padding:16px;min-height:105px}.cell.head{background:rgba(226,180,79,.13);color:var(--gold);font-weight:800;min-height:auto}.cell p{margin:5px 0 0;color:var(--muted);font-size:14px}@media(max-width:820px){.matrix{grid-template-columns:1fr}.cell.head:nth-child(n+2){display:none}}
.timeline{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:24px}.phase{border:1px solid rgba(226,180,79,.18);background:rgba(255,255,255,.045);border-radius:20px;padding:18px 14px;min-height:165px}.phase .n{color:var(--gold);font-size:12px}.phase strong{display:block;margin:8px 0}.phase span{color:var(--muted);font-size:14px}@media(max-width:980px){.timeline{grid-template-columns:1fr}}
.switcher{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.switcher button{cursor:pointer;border:1px solid rgba(226,180,79,.22);background:rgba(255,255,255,.045);color:var(--muted);padding:10px 12px;border-radius:999px;transition:all .2s}.switcher button:hover{color:var(--ink);border-color:var(--gold)}.switcher button:focus{outline:2px solid var(--gold);outline-offset:2px}.switcher button:active{transform:scale(0.97);background:rgba(226,180,79,.15)}.switcher button.active{color:var(--ink);border-color:var(--gold);background:rgba(226,180,79,.11)}.scenario{border:1px solid rgba(226,180,79,.18);background:rgba(255,255,255,.04);border-radius:24px;padding:24px}.scenario h3{margin-top:0}.scenario p{color:var(--muted)}.callout{border-left:5px solid var(--gold);background:rgba(226,180,79,.09);border-radius:0 20px 20px 0;padding:18px 22px;color:var(--muted)}.callout strong{color:var(--ink)}footer{border-top:1px solid rgba(226,180,79,.14);padding:44px 0 80px;color:var(--muted)}footer strong{color:var(--ink)}
.error-state{color:var(--red);padding:20px;background:rgba(227,90,90,.15);border:1px solid rgba(227,90,90,.3);border-radius:12px;margin:20px 0}
</style>
</head>
<body>
<noscript>
<div style="padding:20px;background:rgba(227,90,90,.2);color:#e35a5a;border-radius:12px;margin:20px;max-width:800px;margin-left:auto;margin-right:auto;">
<strong>⚠️ JavaScript Required</strong><br>
This interactive defensive map requires JavaScript to display scenario simulations. Please enable JavaScript in your browser to view the full content.
</div>
</noscript>
<div class="noise"></div>
<header class="wrap">
<div class="kicker"><span class="dot"></span> Authorized Red-Team · Defensive Use Only</div>
<h1>Offensive-View Map<br><span>for LLM Defense</span></h1>
<p class="sub">A safe adversary-emulation architecture: think like an attacker enough to defend, without publishing attack recipes, bypass instructions, malware logic, credential-theft methods, or operational playbooks.</p>
<div class="warning"><div class="ico">⛔</div><p><strong>Hard boundary:</strong> This is not a black-hat manual. It is an authorized red-team / blue-team translation layer. It maps attacker intent, pressure points, and defensive checks at a high level only.</p></div>
</header>
<nav><div class="wrap"><a href="#premise">Premise</a><a href="#hirbreak">What attackers target</a><a href="#lifecycle">Lifecycle</a><a href="#scenarios">Safe scenarios</a><a href="#rules">Rules of engagement</a><a href="#outputs">Defensive outputs</a></div></nav>
<main>
<section id="premise" class="wrap">
<div class="title"><span class="num mono">01</span><h2>The Safe Offensive View</h2></div>
<p class="lead">A useful defense team must understand the shape of abuse. The goal is not to empower abuse. The goal is to recognize how malicious LLM use degrades truth contact, corrupts execution integrity, and violates human boundaries.</p>
<div class="grid three">
<div class="card"><h3>Adversary View</h3><p>What pressure point is the attacker trying to exploit?</p><div class="tags"><span class="tag red">Intent</span><span class="tag red">Pressure</span></div></div>
<div class="card"><h3>HIR Failure</h3><p>Which part of Honesty, Integrity, or Respect is being attacked?</p><div class="tags"><span class="tag gold">Diagnosis</span><span class="tag blue">Boundary</span></div></div>
<div class="card"><h3>Defensive Control</h3><p>What must the runtime, team, or institution do to contain it?</p><div class="tags"><span class="tag green">Protect</span><span class="tag green">Repair</span></div></div>
</div>
</section>
<section id="hirbreak" class="wrap">
<div class="title"><span class="num mono">02</span><h2>What an Attacker Tries to Break</h2></div>
<div class="matrix">
<div class="cell head">Targeted HIR Layer</div><div class="cell head">Offensive Pressure</div><div class="cell head">Defensive Translation</div>
<div class="cell"><strong>Honesty</strong><p>Reality contact, source truth, identity truth, evidence boundary.</p></div>
<div class="cell"><strong>False context pressure</strong><p>Impersonation, fake urgency, fake authority, synthetic evidence, forged consensus.</p></div>
<div class="cell"><strong>Verify reality</strong><p>Identity checks, source provenance, fact separation, uncertainty labels, slower decisions.</p></div>
<div class="cell"><strong>Integrity</strong><p>Role fidelity, internal consistency, tool boundaries, audit structure.</p></div>
<div class="cell"><strong>Boundary-collapse pressure</strong><p>Tries to turn the system into a contradictory actor that violates its own role.</p></div>
<div class="cell"><strong>Preserve structure</strong><p>Scope limits, tool firewalling, policy consistency, logging, reproducible triage.</p></div>
<div class="cell"><strong>Respect</strong><p>Agency boundaries, privacy, informed consent, dignity preservation, vulnerability protection.</p></div>
<div class="cell"><strong>Manipulation pressure</strong><p>Tries to exploit power asymmetry, emotional state, urgency, shame, fear, or dependency.</p></div>
<div class="cell"><strong>Protect agency</strong><p>Refuse exploitative help, escalate severe risk, slow harmful flows, provide protective resources.</p></div>
</div>
</section>
<section id="lifecycle" class="wrap">
<div class="title"><span class="num mono">03</span><h2>Defensive Lifecycle</h2></div>
<p class="lead">How a defensive red-team operates without becoming an attack vector.</p>
<div class="timeline">
<div class="phase"><div class="n mono">01</div><strong>Map pressure</strong><span>Identify attack intent without building the attack.</span></div>
<div class="phase"><div class="n mono">02</div><strong>Classify HIR break</strong><span>Which protective invariant fails under this pressure?</span></div>
<div class="phase"><div class="n mono">03</div><strong>Test abstract</strong><span>Safe, logged, dummy-data simulation, no real targets.</span></div>
<div class="phase"><div class="n mono">04</div><strong>Detect gap</strong><span>Find where defense did not hold.</span></div>
<div class="phase"><div class="n mono">05</div><strong>Design control</strong><span>Build fix, escalation, or structural limit.</span></div>
<div class="phase"><div class="n mono">06</div><strong>Deploy & log</strong><span>Ship change, monitor effectiveness, preserve audit trail.</span></div>
<div class="phase"><div class="n mono">07</div><strong>Re-test</strong><span>Confirm improvement without degrading legitimate user help or dignity.</span></div>
</div>
</section>
<section id="scenarios" class="wrap">
<div class="title"><span class="num mono">04</span><h2>Safe Scenario Lens</h2></div>
<p class="lead">Click each scenario type. These are abstract test cards for defenders, not attack instructions.</p>
<div class="switcher" role="tablist">
<button role="tab" aria-selected="true" aria-controls="scenario" class="active" data-s="fraud">Fraud pressure</button>
<button role="tab" aria-selected="false" aria-controls="scenario" data-s="impersonation">Impersonation</button>
<button role="tab" aria-selected="false" aria-controls="scenario" data-s="tool">Tool misuse</button>
<button role="tab" aria-selected="false" aria-controls="scenario" data-s="data">Data exposure</button>
<button role="tab" aria-selected="false" aria-controls="scenario" data-s="swarm">Automation swarm</button>
<button role="tab" aria-selected="false" aria-controls="scenario" data-s="vulnerable">Human targeting</button>
</div>
<div class="scenario" id="scenario" role="tabpanel" aria-live="polite"></div>
</section>
<section id="rules" class="wrap">
<div class="title"><span class="num mono">05</span><h2>Rules of Engagement</h2></div>
<div class="grid two">
<div class="card"><h3>Allowed</h3><p>High-level abuse classification, policy testing, benign red-team prompts, dummy data, synthetic users, mock infrastructure, detection improvement, user-safety training.</p><div class="tags"><span class="tag green">Authorized</span><span class="tag green">Synthetic</span><span class="tag green">Logged</span></div></div>
<div class="card"><h3>Not Allowed</h3><p>Real target exploitation, bypass recipes, malware logic, credential theft, phishing kits, evasion methods, private data extraction, instructions that improve abuse capability.</p><div class="tags"><span class="tag red">No Real Targets</span><span class="tag red">No Attack Recipes</span></div></div>
<div class="card"><h3>Containment</h3><p>Every test should have scope, owner, time window, dataset boundary, rollback path, review channel, and escalation route.</p><div class="tags"><span class="tag blue">Scope</span><span class="tag blue">Audit</span></div></div>
<div class="card"><h3>Respect Constraint</h3><p>Do not use real victims, real private data, or emotional manipulation against uninformed people. Respect is a hard boundary, not branding.</p><div class="tags"><span class="tag gold">Dignity</span><span class="tag gold">Consent</span></div></div>
</div>
</section>
<section id="outputs" class="wrap">
<div class="title"><span class="num mono">06</span><h2>Defensive Outputs</h2></div>
<div class="grid three">
<div class="card"><h3>Risk Taxonomy</h3><p>A categorized list of abuse patterns mapped to HIR failures and OAM degradation signals.</p></div>
<div class="card"><h3>Control Gaps</h3><p>Where detection, refusal, tool permissions, memory boundaries, or escalation did not hold.</p></div>
<div class="card"><h3>Patch Plan</h3><p>Concrete defensive changes: stronger gates, better logging, safer transformations, clearer escalation.</p></div>
<div class="card"><h3>User Education</h3><p>Plain-language warnings that help people slow down, verify, and preserve agency under pressure.</p></div>
<div class="card"><h3>Runtime Metrics</h3><p>False positives, false negatives, refusal quality, safe-completion quality, escalation latency.</p></div>
<div class="card"><h3>Retest Evidence</h3><p>Before/after test notes showing whether controls improved without blocking legitimate use.</p></div>
</div>
<div class="callout" style="margin-top:24px"><strong>Final invariant:</strong> The only legitimate "offensive" use here is authorized emulation that improves defense. If the map increases abuse capability, it has failed HIR.</div>
</section>
</main>
<footer class="wrap"><strong>HIR × OAM Authorized Red-Team LLM Emulation Map</strong><br>Created and Developed by Collin D. Weber · Defensive adversary-emulation architecture · No operational abuse instructions included · <em>Patched version with security improvements</em></footer>
<script>
// Global error handler for robustness
window.addEventListener('error', function(e) {
console.error('Runtime error:', e.error);
const scenarioBox = document.getElementById('scenario');
if (scenarioBox) {
scenarioBox.innerHTML = '<div class="error-state"><strong>⚠️ Error</strong><br>An error occurred loading this scenario. Please refresh the page.</div>';
}
});
// Wait for DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Scenario data
const cards = {
fraud: {
t: 'Fraud pressure',
p: 'The attacker tries to create urgency, false authority, or false evidence so a person makes a rushed decision.',
h: 'HIR break: Honesty collapses through false context; Respect collapses when the person becomes a target.',
d: 'Defense: slow decision flow, verify identity/source, label uncertainty, block transaction-enabling help, route to protective guidance.'
},
impersonation: {
t: 'Impersonation',
p: 'The attacker tries to borrow another identity, role, institution, or trusted relationship.',
h: 'HIR break: Honesty fails at identity; Integrity fails when the system accepts a false role.',
d: 'Defense: provenance checks, role verification, signed channels, cautious output, and refusal to strengthen deception.'
},
tool: {
t: 'Tool misuse',
p: 'The attacker tries to make the model use tools, code, data, or automation outside legitimate authorization.',
h: 'HIR break: Integrity fails when execution boundaries are crossed.',
d: 'Defense: tool firewall, authorization checks, read/write separation, least privilege, sandboxing, and audit logs.'
},
data: {
t: 'Data exposure',
p: 'The attacker tries to make private, secret, or context-bound information leave its proper boundary.',
h: 'HIR break: Respect fails through privacy violation; Integrity fails through provenance breach.',
d: 'Defense: secret detection, access scoping, redaction, memory isolation, and escalation for suspected exposure.'
},
swarm: {
t: 'Automation swarm',
p: 'The attacker scales low-cost generated variants to overwhelm review, moderation, support, or public attention.',
h: 'HIR break: Honesty degrades through signal flooding; Integrity degrades through volume pressure.',
d: 'Defense: rate limits, anomaly detection, provenance tagging, batch review, friction, and coordinated response.'
},
vulnerable: {
t: 'Human targeting',
p: 'The attacker tries to pressure, shame, groom, extort, isolate, or exploit a vulnerable person.',
h: 'HIR break: Respect collapses completely; OAM converts a person into an object of manipulation.',
d: 'Defense: refuse exploitative assistance, provide safety resources, preserve dignity, escalate severe risk, and protect agency.'
}
};
const scenarioBox = document.getElementById('scenario');
// Validate scenario box exists
if (!scenarioBox) {
console.error('Scenario container not found');
return;
}
/**
* Render scenario content with validation
* @param {string} key - Scenario key to render
*/
function render(key) {
// Critical: validate key exists
if (!cards[key]) {
console.error(`Invalid scenario key: ${key}`);
scenarioBox.innerHTML = '<div class="error-state"><strong>⚠️ Invalid Scenario</strong><br>The requested scenario could not be found.</div>';
return;
}
const card = cards[key];
// Build content safely
scenarioBox.innerHTML = `
<h3>${escapeHtml(card.t)}</h3>
<p><strong>Abstract pressure:</strong> ${escapeHtml(card.p)}</p>
<p><strong>${escapeHtml(card.h)}</strong></p>
<p><strong>Defensive translation:</strong> ${escapeHtml(card.d)}</p>
`;
// Update aria-label for screen readers
scenarioBox.setAttribute('aria-label', `Scenario: ${card.t}`);
}
/**
* Escape HTML to prevent injection (defense in depth)
* @param {string} unsafe - String to escape
* @returns {string} Escaped string
*/
function escapeHtml(unsafe) {
if (typeof unsafe !== 'string') return '';
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
/**
* Set active scenario with full state management
* @param {string} scenario - Scenario key to activate
*/
function setActiveScenario(scenario) {
// Validate input
if (!scenario || typeof scenario !== 'string') {
console.error('Invalid scenario parameter');
return;
}
// Update button states
document.querySelectorAll('.switcher button').forEach(function(btn) {
const isActive = btn.dataset.s === scenario;
btn.classList.toggle('active', isActive);
btn.setAttribute('aria-selected', isActive ? 'true' : 'false');
});
// Render scenario
render(scenario);
}
// Initialize event handlers
document.querySelectorAll('.switcher button').forEach(function(btn) {
btn.addEventListener('click', function() {
const scenario = btn.dataset.s;
// Validate dataset attribute exists
if (!scenario) {
console.error('Button missing data-s attribute');
return;
}
setActiveScenario(scenario);
});
});
// Initialize with default scenario
render('fraud');
});
</script>
</body>
</html>
|