JSFiddle - React, Tailwind, and code Playground

HTML

<dl id="cases">
  <dt>data:text/html;charset=shift_jis,%C4%A4</dt>
  <dt>data:text/html;charset=shift%5Fjis,%C4%A4</dt>
  <dt>data:text/html;charset=%22shift_jis%22,%C4%A4</dt>
  <dt>data:text/html;charset="shift_jis",%C4%A4</dt>
</dl>

CSS

#cases {
  font-family: monospace;
}
#cases dt {
  font-weight: bold;
  font-size: 120%;
}
#cases dd.error {
  color: red;
}
iframe {
  height: 40px;
}

JavaScript

Array.prototype.forEach.call(document.querySelectorAll("#cases dt"), async caseDt => {
  caseDt.insertAdjacentHTML("afterend", `<dd><iframe src="${caseDt.textContent}"></iframe></dd>`);
  try {
    let resp = await fetch(caseDt.textContent);
    let dataContentType = resp.headers.get("Content-Type");
    let blob = await resp.blob();
    let blobContentType = blob.type;
    let mangled = dataContentType.includes("charset") && !blobContentType.includes("charset");
    if ( mangled ) {
    	blob = blob.slice(0, blob.size, dataContentType);
    }
    let url = URL.createObjectURL(blob);
    caseDt.nextSibling.insertAdjacentHTML("afterend",
    		`<dd><em>blob</em> Content-Type: ${blob.type}<br><iframe src="${url}"></iframe></dd>`);
  } catch ( ex ) {
    caseDt.nextSibling.insertAdjacentHTML("afterend", `<dd class='error'>${ex.message}</dd>`);
  }
});