Converting HTML to base64 is not encoding certain characters correctly

Question

I am trying to convert an HTML string to base64 which I will then display in an iframe but I am running into some issues. When I encode the string as base64 and view it as a data URI, it is display non-breaking spaces as 'Â', and other characters such as apostrophes and dashes are displayed as random ASCII characters.

This is how I am converting the string to base64:

var blob = new Blob([message], {
    type: contentType
});
var reader = new FileReader();
reader.onload = function (e) {
     let result = e.target.result;
};
reader.readAsDataURL(blob);

Any ideas on how to prevent this? Thanks!

But why are you converting HTML to base64 in the first place? — Jeremy Thille, Aug 12 '19 at 12:52
hence my question. You want to display HTML in an iframe... why convert it to base64? Iframes are meant to display HTML. Sounds like a XY problem to me — Jeremy Thille, Aug 12 '19 at 12:55
@JeremyThille Maybe I am confused about how an iframe works but how would I go about putting a large HTML string in one? I am converting it to a base64 data URI and setting that to the source of the iframe right now — david moeller, Aug 12 '19 at 12:57

score 3 · Accepted Answer · answered Aug 12 '19 at 12:56

There is no reason to do what you're doing. Data URIs are almost always the wrong choice. Base-64 encoding adds 33% overhead of size and wastes CPU. Data URIs are subjected to some strict size limits.

Use a Blob/Object URL instead.

iframe.src = URL.createBlobURL(blob);

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

As to your UTF-8 encoding problem, the issue is likely in your file itself, in that if you're not serving from a server which sets the character set in the headers, it needs to be in the file:

<meta charset="UTF-8">

There's no server here, so you need to declare it in the file.

Converting HTML to base64 is not encoding certain characters correctly

1 Answers1