Dynatrace Training Platform

Loading DOOM

We're running the actual 1993 DOOM inside Dynatrace using js-dos — a JavaScript DOSBox emulator.

CSP Configuration

DOOM needs eval() for asm.js. Relax CSP in app.config.json:

{
  "server": { "enableCSP": false },
  "app": {
    "functionSandbox": {
      "unsafe-eval": { "value": true }
    },
    "csp": {
      "script-src": [
        { "value": "https://v8.js-dos.com" },
        { "value": "https://cdn.dos.zone" }
      ]
    }
  }
}

💡 CSP is a dial, not a wall. You can relax it for legitimate use cases while keeping the iframe sandbox.

The iframe srcdoc Pattern

Use srcdoc to embed HTML directly (bypasses frame-ancestors restrictions):

const doomHtml = `
  <!DOCTYPE html>
  <html>
  <head>
    <script src="https://v8.js-dos.com/latest/js-dos.js"></script>
  </head>
  <body style="margin:0; background:#000;">
    <div id="dos" style="width:100%; height:100vh;"></div>
    <script>
      Dos(document.getElementById("dos")).run("https://cdn.dos.zone/original/2X/2/doom.jsdos");
    </script>
  </body>
  </html>
`;

<iframe
  srcDoc={doomHtml}
  sandbox="allow-scripts allow-same-origin"
  style={{ width: "100%", height: "80vh", border: "none" }}
/>

⚠️ Add keyboard capture to prevent arrow keys from scrolling the parent page.

Key Takeaways

unsafe-eval unlocks asm.js, WebGL shaders, dynamic code
srcdoc bypasses frame-ancestors — embed any HTML
Static assets in ui/assets/ served at /ui/assets/

What's Next

DOOM is running. Now let's build something useful. Module 4 — query real data from Grail with DQL.