HTML Message converted to text view

Help
#1

Hi,

after the latest update on the Mac version 1.13.3. Some e-mails which were appearing as rendered HTML messages, now appears as simple text. (No HTML tags appearing, so the message is converted to text format).

I cannot get back the message appearance into HTML in settings.

But the problem seems to be message specific as not all HTML messages appearing like this. Some of them loading correctly.

What can be the issue here?

Let me add, that today beside my Mac computer, my Linux computer have got the 1.13.3 release. While the message was showing HTML elements and rendered the message with the included CSS stylesheet under the 1.13.2 version. Now it is just showing the link, embedded into the message as a link, but the CSS style is not used. So maybe it is just about the CSS style, but I cannot figure it out. What is sure, I cannot find a setting which might change back the original rendering.

#2

There were some changes regarding the rendering of HTML objects in the latest version. Can you proceed a screenshot that shows the problem? Or even craft a test mail that I could use the check the issue?

I assume that this is related to this commit: Switch to DOMPurify for HTML email sanitization · Foundry376/Mailspring@8b4f59b · GitHub

#3

Hi,

this is a mail now.

Screenshot from 2024-01-11 22-06-59
Screenshot from 2024-01-11 22-06-59804×461 33.1 KB

And how it should look like:

Screenshot from 2024-01-11 22-08-10
Screenshot from 2024-01-11 22-08-101256×694 61.9 KB

And this is the HTML code behind:

<!doctype html>
<html>
<head>
  <title>Bolhapiac eszköz aktiválás</title>
<style type="text/css">
#button {
    width: 400px;
    height: 50px;
    border-radius: 10px;
    background-color: #068301;
    color: #EEEEEE;
    border-width: thick;
    border-color: #01420A;
    font-size: x-large;
    -webkit-box-shadow: 5px 5px #6E6E6E;
    box-shadow: 5px 5px #6E6E6E;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    text-shadow: 2px 2px 3px #000000;
}
#DeleteButton {
    width: 400px;
    height: 50px;
    display: inline-block;
    text-align: center;
    border-radius: 10px;
    background-color: #F90101;
    color: #EEEEEE;
    border-width: thick;
    border-color: #970101;
    font-size: x-large;
    -webkit-box-shadow: 5px 5px #6E6E6E;
    box-shadow: 5px 5px #6E6E6E;
    font-weight: bold;
    text-shadow: 2px 2px 3px #000000;
}
body p {
    font-size: x-large;
    text-align: center;
}
body h1 {
    text-align: center;
    text-shadow: 0px 0px #000000;
}
#Signature {
    font-weight: bolder;
    font-style: italic;
    font-size: xx-large;
}
.Centered {
    vertical-align: middle;
    display: inline-block;
    height: 100%;
    content: '';
}
.Center {
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>
<body>
<h1>Tisztelt Felhasználó!</h1>
<p>Ezt az e-mailt a Bolhapiac hirdetési applikáció küldte. </p>
<p>Amennyiben Ön kérte a regisztrációt, kérjük kattintson a Regisztráció megerősítése gombra: </p>
<p>
	<a href="https://www.i-bay.hu/activateUser.php?ver=30109&code=92e20f2a-80dd-4a3b-827a-2832762c8352" id="button"><span class="Centered"></span><span class="Center">Regisztráció megerősítése</span></a>
  </p>
  <p>Amennyiben nem Ön kezdeményezte a regisztrációt, itt törölheti azt:  </p>
  <p><a href="https://www.i-bay.hu/deleteUser.php?ver=30109&code=92e20f2a-80dd-4a3b-827a-2832762c8352" id="DeleteButton"><span class="Centered"></span><span class="Center">Regisztráció törlése</span></a>
<p>Üdvözlettel</p>
<p></p>
<p id="Signature">Bolhapiac csapata</p>
</body>
</html>

type or paste code here

#4

Hi,

any solution for this? I do not really understand why was something changed what was working without an issue before and why that something is making difference between HTML contents.

Many HTML mails with pictures, styles are working, but this one is not.

Thanks

   Endre
#5

I have tried this by sending the exact code that you provided to myself and it opens as you’d expect in Mailspring. Being unable to reproduce the issue makes it unfortunately very hard to see where it is coming from.

Bildschirmfoto vom 2024-01-22 17-07-55
Bildschirmfoto vom 2024-01-22 17-07-551045×371 53.8 KB

#6

Hi Janosch,

thanks for your feedback. Iam having this version on my mac: Version 1.13.3 (1.13.3). The previous version was working properly, but after I have installed this update, this it just a text in the message window and the link is just an underlined text.

So somehow it seems for me the CSS file is not working.

On my Linux computer it was the same. Once I have installed the upgrade, the message is just a text as well. I just downloaded Mailspring to Windows 11 and this is the same on it too.

Screenshot 2024-01-22 184820
Screenshot 2024-01-22 1848201041×468 40.6 KB

I do not know what is behind the problem, but it seems to be related to the raw message somehow.

But something is definitely changed in this upgrade. If not, than how can it be explained that all the same versions on all OS having the same issue.

If you could send me an e-mail address to which I can get the mail sent from the app, which is generating the message for a registration, you might be able to see, the raw message as well. Maybe there is an issue that the message header is not generated properly.

Actually the backend PHP site is adding only these two lines to the header. Should there be some more in the header added?

$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=UTF-8' . "\r\n";

Rgds

   Endre
#7

Feel free to send the mail in question to mailspringt@gmail.com and I will take a look if I can reproduce it like this.

#8

Hi Janosch,

just sent it out, to the right address (missing the t from it :smiley: ). Curious about what you will see from that.

Kind regards

    Endre
#9

When I sent my test mail, the <html><head> tags get stripped. That means that the <style> is part of the e-mail body which is properly evaluated.

In the real e-mail that you sent me, this is not the case. I think that the sanitizing is the throwing away the <head> of the e-mail. If this is for mails that you are sending out, I suggest to change it as follows (removing the <html><head><body> tags and see if it works:

<style type="text/css">
#button {
    width: 400px;
    height: 50px;
    border-radius: 10px;
    background-color: #068301;
    color: #EEEEEE;
    border-width: thick;
    border-color: #01420A;
    font-size: x-large;
    -webkit-box-shadow: 5px 5px #6E6E6E;
    box-shadow: 5px 5px #6E6E6E;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    text-shadow: 2px 2px 3px #000000;
}
#DeleteButton {
    width: 400px;
    height: 50px;
    display: inline-block;
    text-align: center;
    border-radius: 10px;
    background-color: #F90101;
    color: #EEEEEE;
    border-width: thick;
    border-color: #970101;
    font-size: x-large;
    -webkit-box-shadow: 5px 5px #6E6E6E;
    box-shadow: 5px 5px #6E6E6E;
    font-weight: bold;
    text-shadow: 2px 2px 3px #000000;
}
body p {
    font-size: x-large;
    text-align: center;
}
body h1 {
    text-align: center;
    text-shadow: 0px 0px #000000;
}
#Signature {
    font-weight: bolder;
    font-style: italic;
    font-size: xx-large;
}
.Centered {
    vertical-align: middle;
    display: inline-block;
    height: 100%;
    content: '';
}
.Center {
    display: inline-block;
    vertical-align: middle;
}
</style>
<h1>Tisztelt Felhasználó!</h1>
<p>Ezt az e-mailt a Bolhapiac hirdetési applikáció küldte. </p>
<p>Amennyiben Ön kérte a regisztrációt, kérjük kattintson a Regisztráció megerősítése gombra: </p>
<p>
	<a href="https://www.i-bay.hu/activateUser.php?ver=30109&code=92e20f2a-80dd-4a3b-827a-2832762c8352" id="button"><span class="Centered"></span><span class="Center">Regisztráció megerősítése</span></a>
  </p>
  <p>Amennyiben nem Ön kezdeményezte a regisztrációt, itt törölheti azt:  </p>
  <p><a href="https://www.i-bay.hu/deleteUser.php?ver=30109&code=92e20f2a-80dd-4a3b-827a-2832762c8352" id="DeleteButton"><span class="Centered"></span><span class="Center">Regisztráció törlése</span></a>
<p>Üdvözlettel</p>
<p></p>
<p id="Signature">Bolhapiac csapata</p>
#10

No difference at all. I have removed the tags, as you have suggested, but does not help. It appears perfectly still on Thunderbird mail.