1409  Attack Visualization Suite: Reference and Defense Checklist

Attack Comparison Matrix, OWASP IoT Top 10 Reference, and Security Defense Checklist

1409.1 Learning Objectives

After completing this section, you will be able to:

1. Compare attack types using severity, detection difficulty, and skill requirements
2. Reference the OWASP IoT Top 10 vulnerability categories
3. Use a comprehensive security defense checklist for IoT deployments
4. Visualize attack timelines and progression patterns

TipFor Beginners: Using Reference Materials

Reference materials like comparison matrices and checklists help security professionals make informed decisions quickly. Instead of memorizing every detail about every attack, you can use these tools to look up information when you need it and ensure you haven’t missed important security controls.

---

1409.2 Attack Comparison Matrix

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",
    steps: [
      { phase: "Reconnaissance" },
      { phase: "ARP Spoofing" },
      { phase: "Traffic Interception" },
      { phase: "Certificate Substitution" },
      { phase: "Data Exfiltration/Modification" }
    ]
  },
  {
    id: "replay",
    name: "Replay Attack",
    icon: "🔁",
    severity: "High",
    owaspMapping: "I7: Insecure Data Transfer and Storage",
    steps: [
      { phase: "Passive Monitoring" },
      { phase: "Message Capture" },
      { phase: "Message Storage" },
      { phase: "Replay Transmission" },
      { phase: "Action Execution" }
    ]
  },
  {
    id: "dos",
    name: "Denial of Service (DoS)",
    icon: "🚫",
    severity: "High",
    owaspMapping: "I9: Insecure Default Settings",
    steps: [
      { phase: "Target Selection" },
      { phase: "Botnet Assembly" },
      { phase: "Attack Initiation" },
      { phase: "Resource Exhaustion" },
      { phase: "Service Failure" }
    ]
  },
  {
    id: "sidechannel",
    name: "Side-Channel Attack",
    icon: "📡",
    severity: "Medium",
    owaspMapping: "I5: Use of Insecure or Outdated Components",
    steps: [
      { phase: "Equipment Setup" },
      { phase: "Signal Acquisition" },
      { phase: "Signal Processing" },
      { phase: "Statistical Analysis" },
      { phase: "Key Extraction" }
    ]
  },
  {
    id: "firmware",
    name: "Firmware Extraction",
    icon: "💾",
    severity: "Critical",
    owaspMapping: "I4: Lack of Secure Update Mechanism",
    steps: [
      { phase: "Physical Access" },
      { phase: "Interface Discovery" },
      { phase: "Memory Dumping" },
      { phase: "Firmware Analysis" },
      { phase: "Secret Extraction" }
    ]
  },
  {
    id: "downgrade",
    name: "Protocol Downgrade Attack",
    icon: "⬇️",
    severity: "High",
    owaspMapping: "I3: Insecure Ecosystem Interfaces",
    steps: [
      { phase: "Connection Interception" },
      { phase: "Version Manipulation" },
      { phase: "Downgrade Forcing" },
      { phase: "Vulnerability Exploitation" },
      { phase: "Data Compromise" }
    ]
  }
]

// State management
mutable selectedAttack = attackTypes[0]
mutable currentStep = 0
mutable showProtection = false

// Attack comparison matrix
attackComparisonMatrix = {
  const difficulties = {
    mitm: { detection: "Medium", skill: "Medium", impact: "Critical", physical: false },
    replay: { detection: "Hard", skill: "Low", impact: "High", physical: false },
    dos: { detection: "Easy", skill: "Low", impact: "High", physical: false },
    sidechannel: { detection: "Very Hard", skill: "High", impact: "Critical", physical: true },
    firmware: { detection: "Medium", skill: "High", impact: "Critical", physical: true },
    downgrade: { detection: "Medium", skill: "Medium", impact: "High", physical: false }
  };

  return htl.html`<div style="
    background: ${ieeeColors.white};
    border-radius: 12px;
    padding: 24px;
    margin: 20px 0;
    overflow-x: auto;
  ">
    <h3 style="margin: 0 0 20px 0; color: ${ieeeColors.navy};">
      Attack Comparison Matrix
    </h3>

    <table style="
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9em;
    ">
      <thead>
        <tr style="background: ${ieeeColors.navy};">
          <th style="padding: 12px; text-align: left; color: ${ieeeColors.white}; border-radius: 8px 0 0 0;">Attack Type</th>
          <th style="padding: 12px; text-align: center; color: ${ieeeColors.white};">Severity</th>
          <th style="padding: 12px; text-align: center; color: ${ieeeColors.white};">Detection</th>
          <th style="padding: 12px; text-align: center; color: ${ieeeColors.white};">Skill Required</th>
          <th style="padding: 12px; text-align: center; color: ${ieeeColors.white};">Physical Access</th>
          <th style="padding: 12px; text-align: center; color: ${ieeeColors.white}; border-radius: 0 8px 0 0;">OWASP Category</th>
        </tr>
      </thead>
      <tbody>
        ${attackTypes.map((attack, i) => {
          const diff = difficulties[attack.id];
          return htl.html`
            <tr style="
              background: ${i % 2 === 0 ? ieeeColors.white : ieeeColors.lightGray + '30'};
              cursor: pointer;
              transition: background 0.2s;
            " onclick=${() => mutable selectedAttack = attack}>
              <td style="padding: 12px; border-bottom: 1px solid ${ieeeColors.lightGray};">
                <div style="display: flex; align-items: center; gap: 10px;">
                  <span style="font-size: 1.5em;">${attack.icon}</span>
                  <span style="font-weight: 600; color: ${ieeeColors.navy};">${attack.name}</span>
                </div>
              </td>
              <td style="padding: 12px; text-align: center; border-bottom: 1px solid ${ieeeColors.lightGray};">
                <span style="
                  background: ${attack.severity === 'Critical' ? ieeeColors.red : attack.severity === 'High' ? ieeeColors.orange : ieeeColors.yellow};
                  color: ${attack.severity === 'Medium' ? ieeeColors.navy : ieeeColors.white};
                  padding: 4px 12px;
                  border-radius: 4px;
                  font-weight: 600;
                  font-size: 0.85em;
                ">${attack.severity}</span>
              </td>
              <td style="padding: 12px; text-align: center; border-bottom: 1px solid ${ieeeColors.lightGray};">
                <span style="
                  color: ${diff.detection === 'Very Hard' ? ieeeColors.red : diff.detection === 'Hard' ? ieeeColors.orange : diff.detection === 'Medium' ? ieeeColors.teal : ieeeColors.green};
                  font-weight: 500;
                ">${diff.detection}</span>
              </td>
              <td style="padding: 12px; text-align: center; border-bottom: 1px solid ${ieeeColors.lightGray};">
                <span style="
                  color: ${diff.skill === 'High' ? ieeeColors.red : diff.skill === 'Medium' ? ieeeColors.orange : ieeeColors.green};
                  font-weight: 500;
                ">${diff.skill}</span>
              </td>
              <td style="padding: 12px; text-align: center; border-bottom: 1px solid ${ieeeColors.lightGray};">
                <span style="font-size: 1.2em;">${diff.physical ? '✅' : '❌'}</span>
              </td>
              <td style="padding: 12px; text-align: center; border-bottom: 1px solid ${ieeeColors.lightGray};">
                <span style="
                  background: ${ieeeColors.purple}20;
                  color: ${ieeeColors.purple};
                  padding: 4px 8px;
                  border-radius: 4px;
                  font-size: 0.8em;
                ">${attack.owaspMapping.split(':')[0]}</span>
              </td>
            </tr>
          `;
        })}
      </tbody>
    </table>

    <p style="margin: 16px 0 0 0; color: ${ieeeColors.gray}; font-size: 0.85em;">
      Click any row to select that attack type for the timeline visualization below.
    </p>
  </div>`;
}

1409.2.1 Understanding the Matrix

Column	Meaning
Severity	Potential impact if attack succeeds (Critical > High > Medium)
Detection	How difficult it is to detect the attack (Very Hard > Hard > Medium > Easy)
Skill Required	Attacker expertise needed (High > Medium > Low)
Physical Access	Whether attacker needs physical access to target device
OWASP Category	Mapping to OWASP IoT Top 10 vulnerability

---

1409.3 Security Defense Checklist

// Interactive defense checklist
viewof defenseChecklist = {
  const categories = [
    {
      name: "Network Security",
      icon: "🌐",
      color: ieeeColors.teal,
      items: [
        { id: "net1", text: "Implement network segmentation for IoT devices" },
        { id: "net2", text: "Enable TLS 1.3 with certificate pinning" },
        { id: "net3", text: "Deploy intrusion detection systems (IDS)" },
        { id: "net4", text: "Use VPN for remote device management" },
        { id: "net5", text: "Enable ARP inspection on network switches" }
      ]
    },
    {
      name: "Authentication & Access",
      icon: "🔐",
      color: ieeeColors.orange,
      items: [
        { id: "auth1", text: "Implement mutual TLS (mTLS) authentication" },
        { id: "auth2", text: "Use nonces and timestamps in protocols" },
        { id: "auth3", text: "Enforce strong password policies" },
        { id: "auth4", text: "Implement rate limiting on authentication" },
        { id: "auth5", text: "Use hardware security modules for keys" }
      ]
    },
    {
      name: "Device Security",
      icon: "📱",
      color: ieeeColors.purple,
      items: [
        { id: "dev1", text: "Enable secure boot with signed firmware" },
        { id: "dev2", text: "Disable debug interfaces in production" },
        { id: "dev3", text: "Encrypt firmware and sensitive data" },
        { id: "dev4", text: "Implement tamper detection mechanisms" },
        { id: "dev5", text: "Regular firmware updates with OTA" }
      ]
    },
    {
      name: "Monitoring & Response",
      icon: "📊",
      color: ieeeColors.navy,
      items: [
        { id: "mon1", text: "Deploy centralized logging system" },
        { id: "mon2", text: "Set up anomaly detection alerts" },
        { id: "mon3", text: "Conduct regular security audits" },
        { id: "mon4", text: "Maintain incident response plan" },
        { id: "mon5", text: "Monitor for unusual traffic patterns" }
      ]
    }
  ];

  let checkedItems = new Set();

  const container = htl.html`<div style="
    background: ${ieeeColors.white};
    border-radius: 12px;
    padding: 24px;
    margin: 20px 0;
  ">
    <h3 style="margin: 0 0 20px 0; color: ${ieeeColors.navy};">
      Security Defense Checklist
    </h3>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;">
      ${categories.map(cat => htl.html`
        <div style="
          background: ${cat.color}10;
          border-radius: 10px;
          padding: 16px;
          border: 1px solid ${cat.color}30;
        ">
          <h4 style="
            margin: 0 0 12px 0;
            color: ${cat.color};
            display: flex;
            align-items: center;
            gap: 8px;
          ">
            <span style="font-size: 1.3em;">${cat.icon}</span>
            ${cat.name}
          </h4>

          ${cat.items.map(item => htl.html`
            <label style="
              display: flex;
              align-items: flex-start;
              gap: 10px;
              padding: 8px;
              margin-bottom: 4px;
              cursor: pointer;
              border-radius: 6px;
              transition: background 0.2s;
            ">
              <input type="checkbox"
                style="margin-top: 3px; accent-color: ${cat.color}; width: 16px; height: 16px;"
                onchange=${(e) => {
                  if (e.target.checked) {
                    checkedItems.add(item.id);
                  } else {
                    checkedItems.delete(item.id);
                  }
                }}
                aria-label="${item.text}"
              />
              <span style="color: ${ieeeColors.darkGray}; font-size: 0.9em; line-height: 1.4;">${item.text}</span>
            </label>
          `)}
        </div>
      `)}
    </div>

    <div style="
      margin-top: 20px;
      padding: 16px;
      background: ${ieeeColors.lightGray}30;
      border-radius: 8px;
      text-align: center;
    ">
      <p style="margin: 0; color: ${ieeeColors.gray}; font-size: 0.9em;">
        Use this checklist to ensure comprehensive security coverage for your IoT deployment.
        Check off items as you implement them.
      </p>
    </div>
  </div>`;

  return container;
}

---

1409.4 OWASP IoT Top 10 Reference

// OWASP IoT Top 10 reference
owaspReference = {
  const owaspTop10 = [
    { id: "I1", name: "Weak, Guessable, or Hardcoded Passwords", attacks: ["firmware"], color: "#e74c3c" },
    { id: "I2", name: "Insecure Network Services", attacks: ["dos", "mitm"], color: "#e67e22" },
    { id: "I3", name: "Insecure Ecosystem Interfaces", attacks: ["mitm", "downgrade"], color: "#f1c40f" },
    { id: "I4", name: "Lack of Secure Update Mechanism", attacks: ["firmware"], color: "#1abc9c" },
    { id: "I5", name: "Use of Insecure or Outdated Components", attacks: ["sidechannel", "downgrade"], color: "#3498db" },
    { id: "I6", name: "Insufficient Privacy Protection", attacks: ["mitm", "replay"], color: "#9b59b6" },
    { id: "I7", name: "Insecure Data Transfer and Storage", attacks: ["replay", "mitm"], color: "#34495e" },
    { id: "I8", name: "Lack of Device Management", attacks: ["dos", "firmware"], color: "#16a085" },
    { id: "I9", name: "Insecure Default Settings", attacks: ["dos"], color: "#27ae60" },
    { id: "I10", name: "Lack of Physical Hardening", attacks: ["firmware", "sidechannel"], color: "#2c3e50" }
  ];

  return htl.html`<div style="
    background: ${ieeeColors.white};
    border-radius: 12px;
    padding: 24px;
    margin: 20px 0;
    overflow-x: auto;
  ">
    <h3 style="margin: 0 0 20px 0; color: ${ieeeColors.navy}; display: flex; align-items: center; gap: 10px;">
      <span style="font-size: 28px;">📋</span>
      OWASP IoT Top 10 (2018) Reference
    </h3>

    <div style="display: grid; gap: 12px;">
      ${owaspTop10.map((item, i) => htl.html`
        <div style="
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 12px 16px;
          background: ${item.color}10;
          border-left: 4px solid ${item.color};
          border-radius: 0 8px 8px 0;
        ">
          <span style="
            background: ${item.color};
            color: white;
            padding: 4px 10px;
            border-radius: 4px;
            font-weight: 700;
            font-size: 0.85em;
            min-width: 35px;
            text-align: center;
          ">${item.id}</span>

          <div style="flex: 1;">
            <div style="font-weight: 600; color: ${ieeeColors.navy};">${item.name}</div>
          </div>

          <div style="display: flex; gap: 6px; flex-wrap: wrap;">
            ${item.attacks.map(attackId => {
              const attack = attackTypes.find(a => a.id === attackId);
              return htl.html`<span style="
                background: ${ieeeColors.darkGray};
                color: ${ieeeColors.white};
                padding: 2px 8px;
                border-radius: 4px;
                font-size: 0.75em;
                cursor: pointer;
              " onclick=${() => mutable selectedAttack = attack}>${attack.icon} ${attack.name.split(' ')[0]}</span>`;
            })}
          </div>
        </div>
      `)}
    </div>

    <p style="margin: 16px 0 0 0; color: ${ieeeColors.gray}; font-size: 0.85em;">
      Click on attack badges to select that attack for the timeline visualization. Learn more at
      <a href="https://owasp.org/www-project-internet-of-things/" target="_blank" style="color: ${ieeeColors.teal};">OWASP IoT Project</a>.
    </p>
  </div>`;
}

---

1409.5 Attack Timeline Simulator

// Attack timeline visualization
attackTimeline = {
  const attack = selectedAttack;
  const width = 900;
  const height = 200;

  const svg = d3.create("svg")
    .attr("viewBox", `0 0 ${width} ${height}`)
    .attr("width", "100%")
    .attr("height", height)
    .style("background", ieeeColors.white)
    .style("border-radius", "12px")
    .style("border", `1px solid ${ieeeColors.lightGray}`);

  const margin = { top: 40, right: 40, bottom: 40, left: 40 };
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;

  const g = svg.append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`);

  // Timeline axis
  const xScale = d3.scaleLinear()
    .domain([0, attack.steps.length - 1])
    .range([0, innerWidth]);

  // Draw timeline line
  g.append("line")
    .attr("x1", 0)
    .attr("y1", innerHeight / 2)
    .attr("x2", innerWidth)
    .attr("y2", innerHeight / 2)
    .attr("stroke", ieeeColors.lightGray)
    .attr("stroke-width", 4)
    .attr("stroke-linecap", "round");

  // Progress line
  g.append("line")
    .attr("x1", 0)
    .attr("y1", innerHeight / 2)
    .attr("x2", xScale(currentStep))
    .attr("y2", innerHeight / 2)
    .attr("stroke", showProtection ? ieeeColors.green : ieeeColors.orange)
    .attr("stroke-width", 4)
    .attr("stroke-linecap", "round");

  // Draw step nodes
  attack.steps.forEach((step, i) => {
    const x = xScale(i);
    const y = innerHeight / 2;
    const isActive = i <= currentStep;
    const isCurrent = i === currentStep;

    // Node circle
    g.append("circle")
      .attr("cx", x)
      .attr("cy", y)
      .attr("r", isCurrent ? 16 : 12)
      .attr("fill", isActive ? (showProtection && i > 0 ? ieeeColors.green : ieeeColors.orange) : ieeeColors.lightGray)
      .attr("stroke", isCurrent ? ieeeColors.navy : "none")
      .attr("stroke-width", 3);

    // Step number
    g.append("text")
      .attr("x", x)
      .attr("y", y + 4)
      .attr("text-anchor", "middle")
      .attr("fill", ieeeColors.white)
      .attr("font-size", isCurrent ? "12px" : "10px")
      .attr("font-weight", "bold")
      .text(i + 1);

    // Phase label
    g.append("text")
      .attr("x", x)
      .attr("y", y + (i % 2 === 0 ? -25 : 35))
      .attr("text-anchor", "middle")
      .attr("fill", isActive ? ieeeColors.navy : ieeeColors.gray)
      .attr("font-size", "11px")
      .attr("font-weight", isActive ? "600" : "400")
      .text(step.phase.length > 15 ? step.phase.substring(0, 15) + '...' : step.phase);
  });

  // Title
  svg.append("text")
    .attr("x", width / 2)
    .attr("y", 20)
    .attr("text-anchor", "middle")
    .attr("fill", ieeeColors.navy)
    .attr("font-size", "14px")
    .attr("font-weight", "600")
    .text("Attack Timeline: " + attack.name);

  return svg.node();
}

1409.5.1 Timeline Controls

// Timeline step controls
timelineControls = {
  return htl.html`<div style="
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 16px 0;
  ">
    <button type="button" onclick=${() => mutable currentStep = 0} style="
      background: ${ieeeColors.gray};
      color: ${ieeeColors.white};
      border: none;
      border-radius: 6px;
      padding: 8px 16px;
      cursor: pointer;
      font-family: inherit;
    " aria-label="Reset timeline">Reset</button>

    <button type="button" onclick=${() => {
      if (currentStep > 0) mutable currentStep = currentStep - 1;
    }} style="
      background: ${ieeeColors.navy};
      color: ${ieeeColors.white};
      border: none;
      border-radius: 6px;
      padding: 8px 16px;
      cursor: pointer;
      font-family: inherit;
    " aria-label="Previous step">◀ Previous</button>

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

    <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: 6px;
      padding: 8px 16px;
      cursor: pointer;
      font-family: inherit;
    " aria-label="Next step">Next ▶</button>

    <label style="
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      background: ${showProtection ? ieeeColors.green + '20' : ieeeColors.lightGray};
      border-radius: 6px;
      cursor: pointer;
    ">
      <input type="checkbox" ${showProtection ? 'checked' : ''}
        onchange=${(e) => mutable showProtection = e.target.checked}
        style="accent-color: ${ieeeColors.green};"
        aria-label="Toggle protection mode"
      />
      <span style="font-size: 0.9em; color: ${ieeeColors.darkGray};">Protection</span>
    </label>
  </div>`;
}

---

1409.6 Quick Reference Cards

1409.6.1 Attack Severity Levels

Level	Description	Response Time
Critical	Full system compromise possible	Immediate
High	Significant impact on availability or integrity	Within 24 hours
Medium	Limited impact, requires additional conditions	Within 1 week

1409.6.2 Detection Difficulty Scale

Difficulty	Indicators	Recommended Tools
Easy	Clear traffic anomalies	Basic IDS, traffic monitoring
Medium	Subtle patterns, requires analysis	SIEM, behavioral analytics
Hard	Few indicators, passive attacks	Advanced threat hunting
Very Hard	Physical/offline, no network traces	Physical security, HSM monitoring

---

1409.7 Summary

This reference section provides essential tools for IoT security professionals:

• Attack Comparison Matrix - Quick reference for attack characteristics and requirements
• Security Defense Checklist - Comprehensive checklist covering network, authentication, device, and monitoring controls
• OWASP IoT Top 10 - Industry-standard vulnerability categorization with attack mappings
• Attack Timeline Simulator - Visual progression of attacks through their phases

NoteEducational Value

Understanding attack mechanisms is crucial for building secure systems. Use these reference materials to inform security architecture decisions and ensure comprehensive protection across all attack vectors.

1409.8 What’s Next

Return to the interactive attack visualizations or explore related security topics:

• Attack Visualization Core Tool - Interactive step-by-step attack animations
• Attack Mitigations and Context - Detailed mitigation techniques and real-world examples
• Zero-Trust Policy Simulator - Design zero-trust security policies
• Network Segmentation Visualizer - Plan network isolation strategies

---

TipFor Instructors: Using This Tool in Class

Suggested Activities:

1. Attack Analysis Exercise: Have students step through each attack timeline and document the attacker’s progression
2. Defense Planning: After completing the comparison matrix, students propose defense strategies prioritized by risk
3. Real-World Research: Students find recent news articles about IoT attacks and map them to OWASP categories
4. Checklist Application: Students apply the defense checklist to a hypothetical IoT deployment and identify gaps
5. Tabletop Exercise: Use timelines to walk through incident response scenarios

Assessment Ideas:

• Quiz on detection indicators for each attack type
• Lab report comparing effectiveness of different mitigations
• Case study analysis of real IoT security incidents