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!

Answer 1

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.