Only Partial PDF is visible in Edge with CSP nonce.

Question

Only Partial PDF is visible in Edge with CSP nonce.

Pottumuttu, Vasuprada 30

Only Partial PDF is rendered in edge with CSP nonce. Edge supports CSP2 but still getting this issue.

In chrome it renders completely as expected. Use the below HTML to replicate the issue. User's image

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta
      http-equiv="Content-Security-Policy"
      content="
            default-src 'self';
            script-src 'nonce-testNonce123';
            style-src 'nonce-testNonce123';
            img-src 'self' data: blob:;
            object-src 'none';
            frame-ancestors 'self';
          "
    />

    <title>PDF Upload CSP Test</title>

    <style nonce="testNonce123">
      body {
        font-family: Arial, sans-serif;
        padding: 30px;
      }

      .container {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 500px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>PDF Upload Test</h2>

      <input type="file" id="pdfInput" accept="application/pdf" />

      <button id="openBtn">Open PDF in New Tab</button>

      <div id="status"></div>
    </div>

    <script nonce="testNonce123">
      document.getElementById("openBtn").addEventListener("click", () => {
        const fileInput = document.getElementById("pdfInput");

        if (!fileInput.files.length) {
          alert("Select a PDF first");
          return;
        }

        const pdfFile = fileInput.files[0];

        console.log("Selected PDF:", pdfFile);

        const blobUrl = URL.createObjectURL(pdfFile);

        console.log("Blob URL:", blobUrl);

        document.getElementById("status").textContent =
          "Opening PDF: " + blobUrl;

        window.open(blobUrl, "_blank");
      });
    </script>
  </body>
</html>

0 comments

Answer accepted by question author

Thomas4-N 21,930 Microsoft External Staff Moderator

Hello Pottumuttu, Vasuprada,

This appears to match an open Edge issue where a strict nonce-based style-src causes the built-in PDF viewer to render incompletely or lose its toolbar. The same behavior has been reproduced with PDF blob: URLs and does not occur in Chrome

https://github.com/MicrosoftEdge/DevTools/issues/427

The reported workaround is to allow the specific inline-style hashes used by Edge through unsafe-hashes. If changing the CSP is not acceptable, using a separate PDF renderer such as PDF.js may be an alternative, but its scripts, styles, worker, and CDN domain must also be explicitly permitted by your CSP.

I would also recommend adding your reproduction details to the existing Edge bug report and submitting feedback through Edge > ... > Help and feedback > Send feedback.

Pottumuttu, Vasuprada 30 Reputation points

2026-07-16T08:30:14.15+00:00

Hi Thomas,
Thank you for confirming.
Given that it is a known issue, we will inform the same to our clients and check for alternatives like unsafe-hashes.
Pottumuttu, Vasuprada 30 Reputation points

2026-07-21T09:47:30.41+00:00

Even with unsafe-hashes, we are getting the same issue.
Thomas4-N 21,930 Reputation points Microsoft External Staff Moderator

2026-07-25T06:54:02.25+00:00
Hello Pottumuttu, Vasuprada,

Thanks for the update. Just to clarify, adding only 'unsafe-hashes' is not enough. The workaround also requires the two exact sha256 hashes listed in the existing Edge issue, for example:

style-src 'self' 'nonce-testNonce123' 'unsafe-hashes' 'sha256-4QAfheGyoLvz79NNXXIU6nvAzOsJ8D1A5QelwXZubZI=' 'sha256-e32iCFqTt1yfebUEPZNqd7UC/drEwHJXPK4z5diJJ5M=';

Please check whether both hashes were included.

If the issue remains, just to clarify, I’m a fellow normal user, not a Microsoft employee, so I cannot escalate the issue internally or confirm when a fix may be released. Consider adding your Edge version, exact CSP, and test result to the existing Edge issue, and also sending feedback through Edge's feedback tool.

1 additional answer

Your answer

Pottumuttu, Vasuprada 30 Reputation points

2026-07-16T08:30:14.15+00:00

Hi Thomas,
Thank you for confirming.
Given that it is a known issue, we will inform the same to our clients and check for alternatives like unsafe-hashes.
Pottumuttu, Vasuprada 30 Reputation points

2026-07-21T09:47:30.41+00:00

Even with unsafe-hashes, we are getting the same issue.
Thomas4-N 21,930 Reputation points Microsoft External Staff Moderator

2026-07-25T06:54:02.25+00:00

Hello Pottumuttu, Vasuprada,

Thanks for the update. Just to clarify, adding only 'unsafe-hashes' is not enough. The workaround also requires the two exact sha256 hashes listed in the existing Edge issue, for example:

style-src 'self' 'nonce-testNonce123' 'unsafe-hashes' 'sha256-4QAfheGyoLvz79NNXXIU6nvAzOsJ8D1A5QelwXZubZI=' 'sha256-e32iCFqTt1yfebUEPZNqd7UC/drEwHJXPK4z5diJJ5M=';

Please check whether both hashes were included.

If the issue remains, just to clarify, I’m a fellow normal user, not a Microsoft employee, so I cannot escalate the issue internally or confirm when a fix may be released. Consider adding your Edge version, exact CSP, and test result to the existing Edge issue, and also sending feedback through Edge's feedback tool.

Answer 1

Hi @Pottumuttu, Vasuprada

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Open PDF in New Tab (PDF.js — Edge-safe)</title>
  <style>
    body { font-family: system-ui, Arial, sans-serif; margin: 40px; line-height: 1.5; }
    h1 { font-size: 1.3rem; }
    .row { margin: 16px 0; }
    button { padding: 8px 16px; font-size: 1rem; cursor: pointer; }
    #status { margin-top: 12px; color: #555; }
    .hint { background:#eef; padding:12px 16px; border-radius:6px; font-size:.9rem; }
    code { background:#e4e4e4; padding:1px 5px; border-radius:3px; }
  </style>
</head>
<body>
  <h1>Open PDF in a new tab (rendered with PDF.js)</h1>
  <p class="hint">
    The new tab renders every page with PDF.js instead of Edge's built-in PDF viewer, so the
    partial-render bug can't happen. Serve this over <code>http://localhost:8000</code>
    (e.g. <code>python -m http.server 8000</code>) — not by double-clicking the file.
  </p>
  <div class="row">
    <input type="file" id="pdfInput" accept="application/pdf" />
    <button id="openBtn">Open PDF in new tab</button>
  </div>
  <div id="status"></div>
  <script type="module">
    const fileInput = document.getElementById("pdfInput");
    const status = document.getElementById("status");
    // HTML that will run INSIDE the new tab. It reads the ArrayBuffer we hand it
    // (window.__PDF_DATA__) and renders each page to a canvas with PDF.js.
    const viewerHtml = `<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>PDF</title>
<style>
  body{margin:0;background:#525659;}
  #status{color:#fff;font-family:system-ui,Arial,sans-serif;padding:10px 14px;}
  canvas{display:block;margin:0 auto 12px;max-width:100%;box-shadow:0 1px 6px rgba(0,0,0,.5);background:#fff;}
</style></head>
<body>
  <div id="status">Loading…</div>
  <div id="pages"></div>
  <script type="module">
    import * as pdfjsLib from "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.4.168/pdf.min.mjs";
    pdfjsLib.GlobalWorkerOptions.workerSrc =
      "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.4.168/pdf.worker.min.mjs";
    const s = document.getElementById("status");
    const pagesEl = document.getElementById("pages");
    (async () => {
      try {
        const raw = window.__PDF_DATA__;
        if (!raw) { s.textContent = "No PDF data received."; return; }
        // Copy the bytes into THIS tab's own realm — an ArrayBuffer created in
        // the opener tab isn't recognized by PDF.js here, which causes the
        // "Invalid PDF binary data" error. .slice() gives a fresh local buffer.
        const data = new Uint8Array(raw).slice();
        const pdf = await pdfjsLib.getDocument({ data }).promise;
        s.textContent = "Rendering " + pdf.numPages + " page(s)…";
        const scale = 1.5;
        for (let n = 1; n <= pdf.numPages; n++) {
          const page = await pdf.getPage(n);
          const vp = page.getViewport({ scale });
          const c = document.createElement("canvas");
          const ctx = c.getContext("2d");
          c.width = vp.width; c.height = vp.height;
          pagesEl.appendChild(c);
          await page.render({ canvasContext: ctx, viewport: vp }).promise;
        }
        s.textContent = pdf.numPages + " page(s)";
        setTimeout(() => s.remove(), 1500);
      } catch (e) { s.textContent = "Error: " + e.message; }
    })();
  <\/script>
</body></html>`;
    document.getElementById("openBtn").addEventListener("click", async () => {
      if (!fileInput.files.length) { alert("Select a PDF first"); return; }
      status.textContent = "Opening…";
      const data = await fileInput.files[0].arrayBuffer();
      const win = window.open("", "_blank");
      if (!win) { status.textContent = "Pop-up blocked — allow pop-ups."; return; }
      // Same-origin new tab: hand it the ArrayBuffer by reference, then write the page.
      win.__PDF_DATA__ = data;
      win.document.open();
      win.document.write(viewerHtml);
      win.document.close();
      status.textContent = "Opened in a new tab.";
    });
  </script>
</body>
</html>

try this code.

Thanks.

Pottumuttu, Vasuprada 30 Reputation points

2026-07-15T12:47:37.51+00:00

Hi Senthil, Thanks you for the prompt reply.

This example renders PDFs using PDF.js, whereas the issue I reported specifically involves Microsoft Edge's built-in PDF viewer. We have received customer incidents where PDFs fail to display correctly in Edge. From a Product perspective, we do not want to bypass the browser's native PDF viewer by introducing a third-party library such as PDF.js.

Our goal is to understand and address the behavior in the Edge browser's built-in PDF rendering experience rather than replacing it. We are ready to update the browser if this could be fixed in the upcoming patch releases.

Vasu.
Senthil kumar 2,420 Reputation points

2026-07-15T14:41:04.3566667+00:00

Ok, will check any native options.
Pottumuttu, Vasuprada 30 Reputation points

2026-07-16T04:10:55.2933333+00:00

Also please let me know if there is any separate forum/helpdesk to raise this concern.
Senthil kumar 2,420 Reputation points

2026-07-16T04:38:36.9333333+00:00

ok, will inform you.