1407  Attack Visualization Suite: Core Interactive Tool

Interactive Step-by-Step IoT Attack Animations with Playback Controls

1407.1 Learning Objectives

After using this visualization tool, you will be able to:

1. Identify six common IoT attack types and their characteristics
2. Explain the step-by-step progression of each attack
3. Control attack animations using playback features
4. Toggle protection modes to compare attack success vs. mitigation

WarningEducational Purpose Only

These visualizations are for educational purposes only to help security professionals and developers understand attack vectors and implement proper defenses. Never use this knowledge for malicious purposes.

TipFor Beginners: What Are Security Attacks?

Security attacks are ways that bad actors try to break into systems, steal data, or cause problems. Think of it like understanding how a burglar might break into a house - by knowing their methods, you can install better locks and alarms. In IoT, devices like smart thermostats, cameras, and sensors can be targets, so we need to understand the threats to protect them.

---

TipHow to Use This Tool

1. Select Attack Type: Click any of the six attack cards (MITM, Replay, DoS, Side-Channel, Firmware, Downgrade) to load that visualization
2. Control Playback: Use Play/Pause to auto-advance through attack phases, or Step Forward/Back to examine each phase in detail
3. Toggle Protection: Enable “Protection ON” to see how security controls mitigate each attack
4. Adjust Speed: Use the speed slider (0.5x to 3x) to control animation pace
5. Track Progress: Click the progress bar segments to jump to any attack phase

Tips: - Watch the “Attacker Gains” panel to understand what information is compromised at each step - Check “Detection Indicators” for signs that security teams can monitor

1407.2 Attack Visualization Suite

ieeeColors = ({
  navy: "#2C3E50",
  teal: "#16A085",
  orange: "#E67E22",
  gray: "#7F8C8D",
  red: "#E74C3C",
  green: "#27AE60",
  purple: "#8E44AD",
  blue: "#3498DB",
  yellow: "#F1C40F",
  darkGray: "#34495E",
  lightGray: "#BDC3C7",
  white: "#FFFFFF",
  lightRed: "#FADBD8",
  lightGreen: "#D5F4E6",
  lightBlue: "#D6EAF8",
  lightOrange: "#FDEBD0"
})

// Attack type definitions
attackTypes = [
  {
    id: "mitm",
    name: "Man-in-the-Middle (MITM)",
    icon: "🕵️",
    severity: "Critical",
    owaspMapping: "I3: Insecure Ecosystem Interfaces",
    description: "Attacker intercepts communications between two parties, potentially reading and modifying data in transit.",
    realWorldExample: "In 2020, researchers demonstrated MITM attacks on smart home devices by exploiting weak TLS implementations, allowing interception of commands sent to smart locks.",
    steps: [
      { phase: "Reconnaissance", description: "Attacker identifies target network and devices", attackerGains: "Network topology, device information", detection: "Unusual network scanning activity" },
      { phase: "ARP Spoofing", description: "Attacker sends fake ARP responses to poison victim's ARP cache", attackerGains: "Traffic redirection capability", detection: "ARP table changes, duplicate MAC addresses" },
      { phase: "Traffic Interception", description: "All traffic between device and server flows through attacker", attackerGains: "Full visibility of communications", detection: "Increased latency, route changes" },
      { phase: "Certificate Substitution", description: "Attacker presents fake certificate to victim for TLS connections", attackerGains: "Ability to decrypt TLS traffic", detection: "Certificate warnings, unknown CA" },
      { phase: "Data Exfiltration/Modification", description: "Attacker reads sensitive data or modifies commands", attackerGains: "Credentials, sensor data, control capability", detection: "Data integrity failures, unexpected behavior" }
    ],
    mitigations: [
      { technique: "Certificate Pinning", description: "Device only accepts specific known certificates", effectiveness: 90 },
      { technique: "Mutual TLS (mTLS)", description: "Both client and server authenticate with certificates", effectiveness: 95 },
      { technique: "Network Segmentation", description: "Isolate IoT devices on separate VLANs", effectiveness: 70 },
      { technique: "ARP Inspection", description: "Dynamic ARP inspection on network switches", effectiveness: 85 }
    ]
  },
  {
    id: "replay",
    name: "Replay Attack",
    icon: "🔁",
    severity: "High",
    owaspMapping: "I7: Insecure Data Transfer and Storage",
    description: "Attacker captures legitimate messages and retransmits them later to achieve unauthorized actions.",
    realWorldExample: "In 2017, researchers showed that certain smart garage door openers could be attacked by recording and replaying the RF signals used to open the door.",
    steps: [
      { phase: "Passive Monitoring", description: "Attacker monitors network traffic for valid commands", attackerGains: "Knowledge of communication patterns", detection: "Difficult - passive attack" },
      { phase: "Message Capture", description: "Attacker captures legitimate authentication or command message", attackerGains: "Valid message copy", detection: "Network monitoring tools may detect" },
      { phase: "Message Storage", description: "Attacker stores captured message for later use", attackerGains: "Persistent attack capability", detection: "Not detectable at this phase" },
      { phase: "Replay Transmission", description: "Attacker sends captured message at opportune time", attackerGains: "Unauthorized action execution", detection: "Duplicate sequence numbers, timestamp anomalies" },
      { phase: "Action Execution", description: "System accepts replayed message as legitimate", attackerGains: "Achieved malicious goal", detection: "Audit logs show duplicate actions" }
    ],
    mitigations: [
      { technique: "Nonces (Number Used Once)", description: "Include random values that can only be used once", effectiveness: 95 },
      { technique: "Timestamps", description: "Messages expire after short time window", effectiveness: 80 },
      { technique: "Sequence Numbers", description: "Track message order, reject out-of-sequence", effectiveness: 85 },
      { technique: "Challenge-Response", description: "Server sends challenge that must be answered", effectiveness: 90 }
    ]
  },
  {
    id: "dos",
    name: "Denial of Service (DoS)",
    icon: "🚫",
    severity: "High",
    owaspMapping: "I9: Insecure Default Settings",
    description: "Attacker overwhelms target with traffic or requests, making it unavailable to legitimate users.",
    realWorldExample: "The Mirai botnet (2016) compromised over 600,000 IoT devices to launch massive DDoS attacks, taking down major internet services including Twitter, Netflix, and Reddit.",
    steps: [
      { phase: "Target Selection", description: "Attacker identifies vulnerable IoT devices or services", attackerGains: "Attack surface knowledge", detection: "Unusual scanning activity" },
      { phase: "Botnet Assembly", description: "Attacker compromises multiple IoT devices for amplification", attackerGains: "Distributed attack capability", detection: "Devices showing unusual outbound traffic" },
      { phase: "Attack Initiation", description: "Coordinated flood of traffic begins", attackerGains: "Service disruption started", detection: "Traffic spike, unusual patterns" },
      { phase: "Resource Exhaustion", description: "Target's resources (CPU, memory, bandwidth) depleted", attackerGains: "Service unavailability", detection: "High resource utilization, timeouts" },
      { phase: "Service Failure", description: "Target becomes unresponsive to all requests", attackerGains: "Complete denial of service", detection: "Service monitoring alerts, user complaints" }
    ],
    mitigations: [
      { technique: "Rate Limiting", description: "Restrict requests per source per time period", effectiveness: 75 },
      { technique: "Traffic Filtering", description: "Block known malicious IPs and patterns", effectiveness: 70 },
      { technique: "CDN/DDoS Protection", description: "Use services like Cloudflare to absorb attacks", effectiveness: 90 },
      { technique: "Resource Scaling", description: "Auto-scale resources to handle traffic spikes", effectiveness: 65 }
    ]
  },
  {
    id: "sidechannel",
    name: "Side-Channel Attack",
    icon: "📡",
    severity: "Medium",
    owaspMapping: "I5: Use of Insecure or Outdated Components",
    description: "Attacker extracts secret information by analyzing physical characteristics like power consumption, timing, or electromagnetic emissions.",
    realWorldExample: "Researchers demonstrated extracting AES keys from smart cards by analyzing power consumption patterns during encryption operations, a technique called Differential Power Analysis (DPA).",
    steps: [
      { phase: "Equipment Setup", description: "Attacker sets up measurement equipment near target", attackerGains: "Observation capability", detection: "Physical security monitoring" },
      { phase: "Signal Acquisition", description: "Attacker captures physical signals during operations", attackerGains: "Raw measurement data", detection: "RF monitoring may detect probes" },
      { phase: "Signal Processing", description: "Attacker filters and processes captured signals", attackerGains: "Clean signal patterns", detection: "Not detectable remotely" },
      { phase: "Statistical Analysis", description: "Attacker correlates signals with cryptographic operations", attackerGains: "Partial key information", detection: "Not detectable" },
      { phase: "Key Extraction", description: "Attacker reconstructs secret key from analysis", attackerGains: "Full cryptographic key", detection: "Only if key is used maliciously" }
    ],
    mitigations: [
      { technique: "Constant-Time Operations", description: "Ensure operations take same time regardless of data", effectiveness: 80 },
      { technique: "Power Noise Injection", description: "Add random noise to power consumption", effectiveness: 75 },
      { technique: "Hardware Countermeasures", description: "Use security-hardened chips with shielding", effectiveness: 90 },
      { technique: "Masking", description: "Randomize intermediate values during computation", effectiveness: 85 }
    ]
  },
  {
    id: "firmware",
    name: "Firmware Extraction",
    icon: "💾",
    severity: "Critical",
    owaspMapping: "I4: Lack of Secure Update Mechanism",
    description: "Attacker extracts firmware from device to analyze vulnerabilities, extract secrets, or create malicious versions.",
    realWorldExample: "In 2019, researchers extracted firmware from a popular IP camera via UART interface, discovering hardcoded credentials and command injection vulnerabilities.",
    steps: [
      { phase: "Physical Access", description: "Attacker gains physical access to target device", attackerGains: "Hardware examination capability", detection: "Physical tampering signs" },
      { phase: "Interface Discovery", description: "Attacker identifies debug interfaces (UART, JTAG, SPI)", attackerGains: "Access points to firmware", detection: "Tamper detection if implemented" },
      { phase: "Memory Dumping", description: "Attacker reads firmware from flash memory", attackerGains: "Raw firmware binary", detection: "Not detectable without hardware security" },
      { phase: "Firmware Analysis", description: "Attacker reverse engineers firmware code", attackerGains: "Code structure, vulnerabilities", detection: "Not detectable" },
      { phase: "Secret Extraction", description: "Attacker finds hardcoded keys, credentials, APIs", attackerGains: "Authentication bypass capability", detection: "Only when secrets are used" }
    ],
    mitigations: [
      { technique: "Secure Boot", description: "Verify firmware signature before execution", effectiveness: 90 },
      { technique: "Encrypted Firmware", description: "Store firmware encrypted on flash", effectiveness: 85 },
      { technique: "Disable Debug Interfaces", description: "Fuse-blow JTAG/UART in production", effectiveness: 80 },
      { technique: "Hardware Security Module", description: "Store secrets in tamper-resistant HSM", effectiveness: 95 }
    ]
  },
  {
    id: "downgrade",
    name: "Protocol Downgrade Attack",
    icon: "⬇️",
    severity: "High",
    owaspMapping: "I3: Insecure Ecosystem Interfaces",
    description: "Attacker forces systems to use older, weaker protocol versions that have known vulnerabilities.",
    realWorldExample: "The POODLE attack (2014) forced servers to downgrade from TLS to SSL 3.0, which had vulnerabilities allowing decryption of encrypted data.",
    steps: [
      { phase: "Connection Interception", description: "Attacker positions to intercept connection setup", attackerGains: "Ability to modify handshake", detection: "Network monitoring" },
      { phase: "Version Manipulation", description: "Attacker modifies version negotiation messages", attackerGains: "Control over protocol version", detection: "Protocol analysis tools" },
      { phase: "Downgrade Forcing", description: "Attacker blocks newer versions, only allows weak version", attackerGains: "Weaker encryption in use", detection: "Unexpected protocol version alerts" },
      { phase: "Vulnerability Exploitation", description: "Attacker exploits known weakness in old protocol", attackerGains: "Ability to decrypt or modify", detection: "Anomaly detection systems" },
      { phase: "Data Compromise", description: "Attacker accesses supposedly secure communications", attackerGains: "Decrypted sensitive data", detection: "Data breach indicators" }
    ],
    mitigations: [
      { technique: "Disable Legacy Protocols", description: "Only allow modern secure versions", effectiveness: 95 },
      { technique: "TLS_FALLBACK_SCSV", description: "Signal to prevent downgrade attacks", effectiveness: 85 },
      { technique: "Version Pinning", description: "Require minimum protocol version", effectiveness: 90 },
      { technique: "Certificate Transparency", description: "Monitor for suspicious certificates", effectiveness: 70 }
    ]
  }
]

// State management
mutable selectedAttack = attackTypes[0]
mutable currentStep = 0
mutable isPlaying = false
mutable animationSpeed = 1
mutable showProtection = false
mutable playInterval = null

// Attack selector
viewof attackSelector = {
  const container = htl.html`<div style="
    background: linear-gradient(135deg, ${ieeeColors.navy} 0%, ${ieeeColors.darkGray} 100%);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
  ">
    <h3 style="color: ${ieeeColors.white}; margin: 0 0 16px 0; font-size: 1.3em;">
      Select Attack Type
    </h3>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;">
      ${attackTypes.map((attack, i) => htl.html`
        <button onclick=${() => {
          mutable selectedAttack = attack;
          mutable currentStep = 0;
          mutable isPlaying = false;
        }} style="
          background: ${selectedAttack.id === attack.id ? ieeeColors.teal : ieeeColors.darkGray};
          color: ${ieeeColors.white};
          border: 2px solid ${selectedAttack.id === attack.id ? ieeeColors.orange : 'transparent'};
          border-radius: 8px;
          padding: 16px;
          cursor: pointer;
          text-align: left;
          transition: all 0.3s ease;
          font-family: inherit;
        ">
          <div style="font-size: 1.8em; margin-bottom: 8px;">${attack.icon}</div>
          <div style="font-weight: 600; font-size: 0.95em;">${attack.name}</div>
          <div style="
            display: inline-block;
            margin-top: 8px;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75em;
            background: ${attack.severity === 'Critical' ? ieeeColors.red :
                         attack.severity === 'High' ? ieeeColors.orange : ieeeColors.yellow};
            color: ${attack.severity === 'Medium' ? ieeeColors.navy : ieeeColors.white};
          ">${attack.severity}</div>
        </button>
      `)}
    </div>
  </div>`;
  return container;
}

// Display current attack info header
attackInfoHeader = {
  const attack = selectedAttack;
  return htl.html`<div style="
    background: ${ieeeColors.lightBlue};
    border-left: 4px solid ${ieeeColors.navy};
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
  ">
    <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 12px;">
      <span style="font-size: 2.5em;">${attack.icon}</span>
      <div>
        <h2 style="margin: 0; color: ${ieeeColors.navy};">${attack.name}</h2>
        <div style="display: flex; gap: 12px; margin-top: 4px;">
          <span style="
            background: ${attack.severity === 'Critical' ? ieeeColors.red :
                         attack.severity === 'High' ? ieeeColors.orange : ieeeColors.yellow};
            color: ${attack.severity === 'Medium' ? ieeeColors.navy : ieeeColors.white};
            padding: 2px 10px;
            border-radius: 4px;
            font-size: 0.85em;
            font-weight: 600;
          ">Severity: ${attack.severity}</span>
          <span style="
            background: ${ieeeColors.purple};
            color: ${ieeeColors.white};
            padding: 2px 10px;
            border-radius: 4px;
            font-size: 0.85em;
          ">OWASP: ${attack.owaspMapping}</span>
        </div>
      </div>
    </div>
    <p style="margin: 0; color: ${ieeeColors.darkGray}; line-height: 1.6;">${attack.description}</p>
  </div>`;
}

1407.2.1 Attack Animation Visualization

```{ojs}
//| echo: false
//| label: attack-animation-canvas
//| fig-alt: "Animated visualization showing the step-by-step progression of the selected security attack with attacker, victim, and server components"

// Main attack visualization canvas
attackVisualization = {
  const width = 900;
  const height = 500;
  const attack = selectedAttack;
  const step = currentStep;
  const protected = showProtection;

  const svg = d3.create("svg")
    .attr("viewBox", `0 0 ${width} ${height}`)
    .attr("width", "100%")
    .attr("height", height)
    .style("background", "linear-gradient(180deg, #1a1a2e 0%, #16213e 100%)")
    .style("border-radius", "12px")
    .style("box-shadow", "0 4px 20px rgba(0,0,0,0.3)");

  // Add grid pattern for tech feel
  const defs = svg.append("defs");

  const gridPattern = defs.append("pattern")
    .attr("id", "grid")
    .attr("width", 40)
    .attr("height", 40)
    .attr("patternUnits", "userSpaceOnUse");

  gridPattern.append("path")
    .attr("d", "M 40 0 L 0 0 0 40")
    .attr("fill", "none")
    .attr("stroke", "rgba(255,255,255,0.03)")
    .attr("stroke-width", 1);

  svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", "url(#grid)");

  // Glow filter for active elements
  const glowFilter = defs.append("filter")
    .attr("id", "glow")
    .attr("x", "-50%")
    .attr("y", "-50%")
    .attr("width", "200%")
    .attr("height", "200%");

  glowFilter.append("feGaussianBlur")
    .attr("stdDeviation", "3")
    .attr("result", "coloredBlur");

  const glowMerge = glowFilter.append("feMerge");
  glowMerge.append("feMergeNode").attr("in", "coloredBlur");
  glowMerge.append("feMergeNode").attr("in", "SourceGraphic");

  // Attack-specific entity positions
  const entities = getEntityPositions(attack.id, width, height);

  // Draw entities
  entities.forEach((entity, i) => {
    const group = svg.append("g")
      .attr("transform", `translate(${entity.x}, ${entity.y})`);

    // Entity shadow
    group.append("ellipse")
      .attr("cx", 0)
      .attr("cy", 50)
      .attr("rx", 40)
      .attr("ry", 10)
      .attr("fill", "rgba(0,0,0,0.3)");

    // Entity body based on type
    if (entity.type === "device") {
      // IoT Device
      group.append("rect")
        .attr("x", -30)
        .attr("y", -35)
        .attr("width", 60)
        .attr("height", 70)
        .attr("rx", 8)
        .attr("fill", entity.active && step >= entity.activeStep ? ieeeColors.orange : ieeeColors.teal)
        .attr("stroke", ieeeColors.white)
        .attr("stroke-width", 2)
        .attr("filter", entity.active && step >= entity.activeStep ? "url(#glow)" : "none");

      // Antenna
      group.append("line")
        .attr("x1", 0)
        .attr("y1", -35)
        .attr("x2", 0)
        .attr("y2", -55)
        .attr("stroke", ieeeColors.white)
        .attr("stroke-width", 2);

      group.append("circle")
        .attr("cx", 0)
        .attr("cy", -58)
        .attr("r", 4)
        .attr("fill", ieeeColors.green);

      // Screen
      group.append("rect")
        .attr("x", -20)
        .attr("y", -25)
        .attr("width", 40)
        .attr("height", 25)
        .attr("rx", 3)
        .attr("fill", "#0f1923");

    } else if (entity.type === "attacker") {
      // Attacker (hooded figure)
      group.append("circle")
        .attr("cx", 0)
        .attr("cy", -20)
        .attr("r", 25)
        .attr("fill", ieeeColors.red)
        .attr("filter", step >= entity.activeStep ? "url(#glow)" : "none");

      // Hood
      group.append("path")
        .attr("d", "M -25 -10 Q -30 -45 0 -50 Q 30 -45 25 -10")
        .attr("fill", ieeeColors.red)
        .attr("stroke", "#a93226")
        .attr("stroke-width", 2);

      // Mask eyes
      group.append("rect")
        .attr("x", -15)
        .attr("y", -25)
        .attr("width", 30)
        .attr("height", 8)
        .attr("rx", 4)
        .attr("fill", "#0f1923");

      group.append("circle").attr("cx", -8).attr("cy", -21).attr("r", 2).attr("fill", ieeeColors.orange);
      group.append("circle").attr("cx", 8).attr("cy", -21).attr("r", 2).attr("fill", ieeeColors.orange);

      // Body
      group.append("path")
        .attr("d", "M -20 5 L -30 45 L 30 45 L 20 5 Z")
        .attr("fill", ieeeColors.red)
        .attr("stroke", "#a93226")
        .attr("stroke-width", 2);

    } else if (entity.type === "server") {
      // Server
      group.append("rect")
        .attr("x", -35)
        .attr("y", -45)
        .attr("width", 70)
        .attr("height", 90)
        .attr("rx", 5)
        .attr("fill", entity.active && step >= entity.activeStep ? ieeeColors.orange : ieeeColors.navy)
        .attr("stroke", ieeeColors.white)
        .attr("stroke-width", 2)
        .attr("filter", entity.active && step >= entity.activeStep ? "url(#glow)" : "none");

      // Server slots
      for (let j = 0; j < 4; j++) {
        group.append("rect")
          .attr("x", -28)
          .attr("y", -38 + j * 20)
          .attr("width", 56)
          .attr("height", 14)
          .attr("rx", 2)
          .attr("fill", "#0f1923");

        // Blinking lights
        for (let k = 0; k < 3; k++) {
          group.append("circle")
            .attr("cx", -22 + k * 8)
            .attr("cy", -31 + j * 20)
            .attr("r", 2)
            .attr("fill", j === step % 4 ? ieeeColors.green : ieeeColors.gray);
        }
      }
    } else if (entity.type === "shield") {
      // Protection shield (only shown in protected mode)
      if (protected) {
        group.append("path")
          .attr("d", "M 0 -50 L 35 -35 L 35 15 Q 35 45 0 55 Q -35 45 -35 15 L -35 -35 Z")
          .attr("fill", `${ieeeColors.green}40`)
          .attr("stroke", ieeeColors.green)
          .attr("stroke-width", 3)
          .attr("filter", "url(#glow)");

        group.append("text")
          .attr("x", 0)
          .attr("y", 5)
          .attr("text-anchor", "middle")
          .attr("fill", ieeeColors.green)
          .attr("font-size", "24px")
          .text("🛡️");
      }
    }

    // Entity label
    group.append("text")
      .attr("x", 0)
      .attr("y", 70)
      .attr("text-anchor", "middle")
      .attr("fill", ieeeColors.white)
      .attr("font-size", "14px")
      .attr("font-weight", "600")
      .text(entity.label);
  });

  // Draw attack flow arrows based on current step
  const flows = getAttackFlows(attack.id, step, protected, entities, width, height);

  flows.forEach((flow, i) => {
    if (flow.visible) {
      const path = svg.append("path")
        .attr("d", flow.path)
        .attr("fill", "none")
        .attr("stroke", flow.blocked ? ieeeColors.red : flow.malicious ? ieeeColors.orange : ieeeColors.teal)
        .attr("stroke-width", flow.blocked ? 4 : 3)
        .attr("stroke-dasharray", flow.malicious ? "10,5" : flow.blocked ? "5,5" : "none")
        .attr("marker-end", flow.blocked ? "none" : `url(#arrow-${flow.malicious ? 'orange' : 'teal'})`);

      // Animate packets along path
      if (flow.animated && !flow.blocked) {
        const pathLength = path.node().getTotalLength();

        for (let p = 0; p < 3; p++) {
          const packet = svg.append("circle")
            .attr("r", 6)
            .attr("fill", flow.malicious ? ieeeColors.orange : ieeeColors.teal)
            .attr("filter", "url(#glow)");

          function animatePacket() {
            packet
              .attr("transform", `translate(${path.node().getPointAtLength(0).x}, ${path.node().getPointAtLength(0).y})`)
              .transition()
              .duration(2000 / animationSpeed)
              .delay(p * 600)
              .ease(d3.easeLinear)
              .attrTween("transform", function() {
                return function(t) {
                  const point = path.node().getPointAtLength(t * pathLength);
                  return `translate(${point.x}, ${point.y})`;
                };
              })
              .on("end", animatePacket);
          }

          animatePacket();
        }
      }

      // Flow label
      if (flow.label) {
        const midPoint = path.node().getPointAtLength(path.node().getTotalLength() / 2);
        svg.append("text")
          .attr("x", midPoint.x)
          .attr("y", midPoint.y - 15)
          .attr("text-anchor", "middle")
          .attr("fill", flow.malicious ? ieeeColors.orange : ieeeColors.lightGray)
          .attr("font-size", "11px")
          .attr("font-weight", "500")
          .text(flow.label);
      }

      // Blocked X mark
      if (flow.blocked) {
        const midPoint = path.node().getPointAtLength(path.node().getTotalLength() / 2);
        svg.append("text")
          .attr("x", midPoint.x)
          .attr("y", midPoint.y + 5)
          .attr("text-anchor", "middle")
          .attr("fill", ieeeColors.red)
          .attr("font-size", "30px")
          .attr("font-weight", "bold")
          .text("✕");
      }
    }
  });

  // Arrow markers
  const arrowColors = [
    { id: "teal", color: ieeeColors.teal },
    { id: "orange", color: ieeeColors.orange }
  ];

  arrowColors.forEach(ac => {
    defs.append("marker")
      .attr("id", `arrow-${ac.id}`)
      .attr("viewBox", "0 -5 10 10")
      .attr("refX", 8)
      .attr("refY", 0)
      .attr("markerWidth", 6)
      .attr("markerHeight", 6)
      .attr("orient", "auto")
      .append("path")
      .attr("d", "M0,-5L10,0L0,5")
      .attr("fill", ac.color);
  });

  // Phase indicator
  const phaseGroup = svg.append("g")
    .attr("transform", `translate(${width/2}, 25)`);

  phaseGroup.append("text")
    .attr("text-anchor", "middle")
    .attr("fill", ieeeColors.orange)
    .attr("font-size", "18px")
    .attr("font-weight", "bold")
    .text(`Phase ${step + 1}: ${attack.steps[step].phase}`);

  // Step description
  svg.append("foreignObject")
    .attr("x", 20)
    .attr("y", height - 90)
    .attr("width", width - 40)
    .attr("height", 80)
    .append("xhtml:div")
    .style("background", "rgba(0,0,0,0.7)")
    .style("padding", "12px 16px")
    .style("border-radius", "8px")
    .style("border-left", `4px solid ${ieeeColors.orange}`)
    .html(`
      <div style="color: ${ieeeColors.white}; font-size: 14px; line-height: 1.5;">
        <strong>${attack.steps[step].description}</strong>
        ${protected ? `<br><span style="color: ${ieeeColors.green};">🛡️ Protection: Attack mitigated by security controls</span>` : ''}
      </div>
    `);

  return svg.node();
}

// Helper function for entity positions
function getEntityPositions(attackId, width, height) {
  const baseEntities = {
    mitm: [
      { type: "device", label: "IoT Device", x: 150, y: height/2 - 30, active: true, activeStep: 2 },
      { type: "attacker", label: "Attacker", x: width/2, y: height/2 - 30, active: true, activeStep: 1 },
      { type: "server", label: "Cloud Server", x: width - 150, y: height/2 - 30, active: true, activeStep: 2 },
      { type: "shield", label: "", x: width/2, y: height/2 - 30, active: true, activeStep: 0 }
    ],
    replay: [
      { type: "device", label: "Victim Device", x: 150, y: height/2 - 30, active: true, activeStep: 0 },
      { type: "attacker", label: "Attacker", x: width/2, y: height/2 + 80, active: true, activeStep: 1 },
      { type: "server", label: "Target Server", x: width - 150, y: height/2 - 30, active: true, activeStep: 3 },
      { type: "shield", label: "", x: width - 150, y: height/2 - 30, active: true, activeStep: 0 }
    ],
    dos: [
      { type: "device", label: "Botnet Device 1", x: 100, y: 120, active: true, activeStep: 2 },
      { type: "device", label: "Botnet Device 2", x: 100, y: height/2, active: true, activeStep: 2 },
      { type: "device", label: "Botnet Device 3", x: 100, y: height - 140, active: true, activeStep: 2 },
      { type: "attacker", label: "C&C Server", x: width/2, y: height/2, active: true, activeStep: 1 },
      { type: "server", label: "Target Server", x: width - 120, y: height/2, active: true, activeStep: 3 },
      { type: "shield", label: "", x: width - 120, y: height/2, active: true, activeStep: 0 }
    ],
    sidechannel: [
      { type: "device", label: "Target Device", x: width/2, y: height/2 - 30, active: true, activeStep: 1 },
      { type: "attacker", label: "Attacker + Probe", x: width/2 + 180, y: height/2 - 30, active: true, activeStep: 1 },
      { type: "shield", label: "", x: width/2, y: height/2 - 30, active: true, activeStep: 0 }
    ],
    firmware: [
      { type: "device", label: "Target Device", x: width/2, y: 150, active: true, activeStep: 0 },
      { type: "attacker", label: "Attacker", x: width/2, y: height - 150, active: true, activeStep: 1 },
      { type: "shield", label: "", x: width/2, y: 150, active: true, activeStep: 0 }
    ],
    downgrade: [
      { type: "device", label: "IoT Client", x: 150, y: height/2 - 30, active: true, activeStep: 0 },
      { type: "attacker", label: "Attacker", x: width/2, y: height/2 - 30, active: true, activeStep: 1 },
      { type: "server", label: "Server", x: width - 150, y: height/2 - 30, active: true, activeStep: 0 },
      { type: "shield", label: "", x: width/2, y: height/2 - 30, active: true, activeStep: 0 }
    ]
  };

  return baseEntities[attackId] || baseEntities.mitm;
}

// Helper function for attack flow visualization
function getAttackFlows(attackId, step, protected, entities, width, height) {
  const flows = {
    mitm: [
      { visible: step >= 0, path: `M 180 ${height/2-30} Q 300 ${height/2-100} ${width/2-30} ${height/2-30}`, label: "Normal Traffic", animated: true, malicious: false, blocked: false },
      { visible: step >= 1, path: `M ${width/2-30} ${height/2-30} Q 300 ${height/2+50} 180 ${height/2-30}`, label: "ARP Poison", animated: true, malicious: true, blocked: protected },
      { visible: step >= 2, path: `M ${width/2+30} ${height/2-30} Q 650 ${height/2-100} ${width-180} ${height/2-30}`, label: "Forwarded (intercepted)", animated: true, malicious: step >= 3, blocked: false },
      { visible: step >= 3, path: `M ${width/2} ${height/2+20} L ${width/2} ${height/2+80}`, label: "Extracted Data", animated: false, malicious: true, blocked: protected },
      { visible: step >= 4, path: `M ${width/2+30} ${height/2-30} Q 650 ${height/2+50} ${width-180} ${height/2-30}`, label: "Modified Data", animated: true, malicious: true, blocked: protected }
    ],
    replay: [
      { visible: step >= 0, path: `M 180 ${height/2-30} Q ${width/2} ${height/2-100} ${width-180} ${height/2-30}`, label: "Legitimate Message", animated: true, malicious: false, blocked: false },
      { visible: step >= 1, path: `M ${width/2} ${height/2-80} L ${width/2} ${height/2+30}`, label: "Capture", animated: false, malicious: true, blocked: false },
      { visible: step >= 2, path: `M ${width/2+30} ${height/2+80} L ${width/2+80} ${height/2+80}`, label: "Store", animated: false, malicious: true, blocked: false },
      { visible: step >= 3, path: `M ${width/2+30} ${height/2+80} Q ${width-200} ${height/2+60} ${width-180} ${height/2-30}`, label: "Replay", animated: true, malicious: true, blocked: protected },
      { visible: step >= 4, path: `M ${width-150} ${height/2+20} L ${width-150} ${height/2+60}`, label: protected ? "Rejected (nonce)" : "Accepted!", animated: false, malicious: !protected, blocked: false }
    ],
    dos: [
      { visible: step >= 2, path: `M 130 120 Q ${width/2+100} 100 ${width-150} ${height/2-50}`, label: "Flood", animated: true, malicious: true, blocked: protected },
      { visible: step >= 2, path: `M 130 ${height/2} L ${width-150} ${height/2}`, label: "Flood", animated: true, malicious: true, blocked: protected },
      { visible: step >= 2, path: `M 130 ${height-140} Q ${width/2+100} ${height-80} ${width-150} ${height/2+50}`, label: "Flood", animated: true, malicious: true, blocked: protected },
      { visible: step >= 1, path: `M ${width/2-30} ${height/2} L 130 ${height/2}`, label: "C&C", animated: true, malicious: true, blocked: false },
      { visible: step >= 1, path: `M ${width/2-30} ${height/2-30} Q 200 100 130 120`, label: "", animated: true, malicious: true, blocked: false },
      { visible: step >= 1, path: `M ${width/2-30} ${height/2+30} Q 200 ${height-100} 130 ${height-140}`, label: "", animated: true, malicious: true, blocked: false }
    ],
    sidechannel: [
      { visible: step >= 1, path: `M ${width/2+50} ${height/2-50} C ${width/2+100} ${height/2-100} ${width/2+150} ${height/2-80} ${width/2+150} ${height/2-50}`, label: "EM Emissions", animated: true, malicious: false, blocked: false },
      { visible: step >= 2, path: `M ${width/2+30} ${height/2} L ${width/2+150} ${height/2}`, label: "Power Trace", animated: true, malicious: false, blocked: protected },
      { visible: step >= 3, path: `M ${width/2+30} ${height/2+30} C ${width/2+100} ${height/2+80} ${width/2+150} ${height/2+60} ${width/2+150} ${height/2+30}`, label: "Timing Data", animated: true, malicious: false, blocked: protected },
      { visible: step >= 4, path: `M ${width/2+210} ${height/2-30} L ${width/2+280} ${height/2-30}`, label: protected ? "Noise Mask" : "Key Extracted!", animated: false, malicious: !protected, blocked: false }
    ],
    firmware: [
      { visible: step >= 1, path: `M ${width/2} 200 L ${width/2} ${height-200}`, label: "UART/JTAG Access", animated: false, malicious: true, blocked: protected },
      { visible: step >= 2, path: `M ${width/2-40} 170 Q ${width/2-100} ${height/2} ${width/2-40} ${height-170}`, label: "Memory Dump", animated: true, malicious: true, blocked: protected },
      { visible: step >= 3, path: `M ${width/2+40} ${height-170} Q ${width/2+100} ${height/2} ${width/2+40} 170`, label: "Analysis", animated: true, malicious: true, blocked: false },
      { visible: step >= 4, path: `M ${width/2} ${height-100} L ${width/2} ${height-60}`, label: protected ? "Encrypted" : "Secrets Found!", animated: false, malicious: !protected, blocked: false }
    ],
    downgrade: [
      { visible: step >= 0, path: `M 180 ${height/2-50} Q ${width/2} ${height/2-120} ${width-180} ${height/2-50}`, label: "TLS 1.3 Hello", animated: true, malicious: false, blocked: false },
      { visible: step >= 1, path: `M ${width-180} ${height/2-30} Q ${width/2} ${height/2-80} ${width/2-30} ${height/2-30}`, label: "Intercept", animated: true, malicious: true, blocked: false },
      { visible: step >= 2, path: `M ${width/2+30} ${height/2-30} Q ${width-200} ${height/2-80} ${width-180} ${height/2-30}`, label: protected ? "TLS 1.3 (enforced)" : "SSL 3.0 (forced)", animated: true, malicious: !protected, blocked: protected },
      { visible: step >= 3, path: `M ${width/2} ${height/2+20} L ${width/2} ${height/2+80}`, label: protected ? "Blocked" : "Exploit Vuln", animated: false, malicious: true, blocked: protected },
      { visible: step >= 4, path: `M ${width/2-30} ${height/2+80} Q 300 ${height/2+100} 180 ${height/2+30}`, label: protected ? "" : "Decrypted!", animated: !protected, malicious: true, blocked: protected }
    ]
  };

  return flows[attackId] || flows.mitm;
}
```

ImportantOJS Syntax Error (line 324, column 9)The keyword ‘protected’ is reserved

1407.2.2 Animation Controls

controlPanel = {
  const container = htl.html`<div style="
    background: ${ieeeColors.darkGray};
    border-radius: 12px;
    padding: 20px;
    margin: 16px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
  ">
    <!-- Playback controls -->
    <div style="display: flex; gap: 8px; align-items: center;">
      <button type="button" onclick=${() => {
        if (currentStep > 0) {
          mutable currentStep = currentStep - 1;
        }
      }} style="
        background: ${ieeeColors.navy};
        color: ${ieeeColors.white};
        border: none;
        border-radius: 8px;
        padding: 12px 16px;
        cursor: pointer;
        font-size: 18px;
        transition: all 0.2s;
      " title="Previous Step" aria-label="Previous Step">⏮️</button>

      <button type="button" onclick=${() => {
        mutable isPlaying = !isPlaying;
        if (isPlaying) {
          startAnimation();
        }
      }} style="
        background: ${isPlaying ? ieeeColors.orange : ieeeColors.teal};
        color: ${ieeeColors.white};
        border: none;
        border-radius: 8px;
        padding: 12px 24px;
        cursor: pointer;
        font-size: 18px;
        min-width: 80px;
        transition: all 0.2s;
      " title="${isPlaying ? 'Pause' : 'Play'}" aria-label="${isPlaying ? 'Pause animation' : 'Play animation'}">${isPlaying ? '⏸️ Pause' : '▶️ Play'}</button>

      <button type="button" onclick=${() => {
        if (currentStep < selectedAttack.steps.length - 1) {
          mutable currentStep = currentStep + 1;
        }
      }} style="
        background: ${ieeeColors.navy};
        color: ${ieeeColors.white};
        border: none;
        border-radius: 8px;
        padding: 12px 16px;
        cursor: pointer;
        font-size: 18px;
        transition: all 0.2s;
      " title="Next Step" aria-label="Next Step">⏭️</button>

      <button type="button" onclick=${() => {
        mutable currentStep = 0;
        mutable isPlaying = false;
      }} style="
        background: ${ieeeColors.gray};
        color: ${ieeeColors.white};
        border: none;
        border-radius: 8px;
        padding: 12px 16px;
        cursor: pointer;
        font-size: 18px;
        transition: all 0.2s;
      " title="Reset" aria-label="Reset animation">🔄</button>
    </div>

    <!-- Step indicator -->
    <div style="
      background: ${ieeeColors.navy};
      padding: 8px 16px;
      border-radius: 8px;
      color: ${ieeeColors.white};
      font-weight: 600;
    ">
      Step ${currentStep + 1} of ${selectedAttack.steps.length}
    </div>

    <!-- Speed control -->
    <div style="display: flex; align-items: center; gap: 8px;">
      <span style="color: ${ieeeColors.white}; font-size: 14px;">Speed:</span>
      <input type="range" min="0.5" max="3" step="0.5" value="${animationSpeed}"
        oninput=${(e) => mutable animationSpeed = parseFloat(e.target.value)}
        style="width: 100px; accent-color: ${ieeeColors.teal};"
        aria-label="Animation speed"
      />
      <span style="color: ${ieeeColors.lightGray}; font-size: 12px; min-width: 30px;">${animationSpeed}x</span>
    </div>

    <!-- Protection toggle -->
    <div style="display: flex; align-items: center; gap: 8px;">
      <label style="
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        padding: 8px 16px;
        background: ${showProtection ? ieeeColors.green : ieeeColors.red}40;
        border: 2px solid ${showProtection ? ieeeColors.green : ieeeColors.red};
        border-radius: 8px;
        transition: all 0.3s;
      ">
        <input type="checkbox" ${showProtection ? 'checked' : ''}
          onchange=${(e) => mutable showProtection = e.target.checked}
          style="width: 18px; height: 18px; accent-color: ${ieeeColors.green};"
          aria-label="Toggle protection mode"
        />
        <span style="color: ${ieeeColors.white}; font-weight: 600;">
          ${showProtection ? '🛡️ Protection ON' : '⚠️ Protection OFF'}
        </span>
      </label>
    </div>
  </div>`;

  return container;
}

// Animation loop function
function startAnimation() {
  if (isPlaying) {
    setTimeout(() => {
      if (isPlaying) {
        if (currentStep < selectedAttack.steps.length - 1) {
          mutable currentStep = currentStep + 1;
          startAnimation();
        } else {
          mutable isPlaying = false;
        }
      }
    }, 3000 / animationSpeed);
  }
}

// Step progress bar
stepProgressBar = {
  const attack = selectedAttack;
  const container = htl.html`<div style="
    display: flex;
    gap: 4px;
    margin: 16px 0;
    padding: 0 20px;
  ">
    ${attack.steps.map((step, i) => htl.html`
      <div onclick=${() => mutable currentStep = i} style="
        flex: 1;
        height: 8px;
        background: ${i < currentStep ? ieeeColors.green : i === currentStep ? ieeeColors.orange : ieeeColors.gray};
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        position: relative;
      " title="${step.phase}">
        ${i === currentStep ? htl.html`<div style="
          position: absolute;
          top: -30px;
          left: 50%;
          transform: translateX(-50%);
          background: ${ieeeColors.orange};
          color: ${ieeeColors.white};
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 11px;
          white-space: nowrap;
        ">${step.phase}</div>` : ''}
      </div>
    `)}
  </div>`;
  return container;
}

1407.2.3 Step Details Panel

// Detailed step information panel
stepDetailsPanel = {
  const attack = selectedAttack;
  const step = attack.steps[currentStep];

  return htl.html`<div style="
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 20px 0;
  ">
    <!-- Step Description -->
    <div style="
      background: ${ieeeColors.lightBlue};
      border-radius: 12px;
      padding: 20px;
      border-left: 4px solid ${ieeeColors.navy};
    ">
      <h4 style="margin: 0 0 12px 0; color: ${ieeeColors.navy}; display: flex; align-items: center; gap: 8px;">
        <span style="
          background: ${ieeeColors.navy};
          color: ${ieeeColors.white};
          width: 28px;
          height: 28px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
        ">${currentStep + 1}</span>
        ${step.phase}
      </h4>
      <p style="margin: 0; color: ${ieeeColors.darkGray}; line-height: 1.6;">${step.description}</p>
    </div>

    <!-- Attacker Gains -->
    <div style="
      background: ${ieeeColors.lightOrange};
      border-radius: 12px;
      padding: 20px;
      border-left: 4px solid ${ieeeColors.orange};
    ">
      <h4 style="margin: 0 0 12px 0; color: ${ieeeColors.orange}; display: flex; align-items: center; gap: 8px;">
        <span style="font-size: 20px;">⚠️</span>
        Attacker Gains
      </h4>
      <p style="margin: 0; color: ${ieeeColors.darkGray}; line-height: 1.6;">
        ${showProtection ? htl.html`<span style="color: ${ieeeColors.green}; font-weight: 600;">🛡️ Protected: Attack mitigated</span>` : step.attackerGains}
      </p>
    </div>

    <!-- Detection Indicators -->
    <div style="
      background: ${ieeeColors.lightGreen};
      border-radius: 12px;
      padding: 20px;
      border-left: 4px solid ${ieeeColors.green};
    ">
      <h4 style="margin: 0 0 12px 0; color: ${ieeeColors.green}; display: flex; align-items: center; gap: 8px;">
        <span style="font-size: 20px;">🔍</span>
        Detection Indicators
      </h4>
      <p style="margin: 0; color: ${ieeeColors.darkGray}; line-height: 1.6;">${step.detection}</p>
    </div>
  </div>`;
}

---

1407.3 Summary

This core visualization tool provides interactive animations for understanding six common IoT security attacks:

1. Man-in-the-Middle (MITM) - Interception and manipulation of communications
2. Replay Attack - Capturing and retransmitting legitimate messages
3. Denial of Service (DoS) - Overwhelming targets with malicious traffic
4. Side-Channel Attack - Extracting secrets via physical characteristics
5. Firmware Extraction - Physical extraction and analysis of device firmware
6. Protocol Downgrade - Forcing use of weaker, vulnerable protocols

Use the playback controls to step through each attack phase and toggle protection mode to see how security controls mitigate threats.

1407.4 What’s Next

Continue learning about attack mitigation and defense strategies:

• Attack Mitigations and Real-World Context - Detailed mitigation techniques and real-world examples
• Attack Reference and Defense Checklist - Comparison matrix, OWASP mapping, and security checklists