Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Incoming email display (css) problem #9586

Closed
1 of 2 tasks
AYMERIC-SVRY opened this issue Aug 15, 2024 · 5 comments
Closed
1 of 2 tasks

Incoming email display (css) problem #9586

AYMERIC-SVRY opened this issue Aug 15, 2024 · 5 comments
Labels
bug C: Mail view
Milestone
1.6.9

Comments

@AYMERIC-SVRY
Copy link

Prerequisites

  • I have searched for duplicate or closed issues
  • I can recreate the issue with all plugins disabled

Describe the issue

When receiving an email with css, for some emails css is not supported. In the previous version, these problems did not exist at all, but it happened just after the update of WHM & cPanel v120.0.16 including the update of RoundCube v1.6.8

What browser(s) are you seeing the problem on?

Chrome

What version of PHP are you using?

v8.1

What version of Roundcube are you using?

v1.6.8

JavaScript errors

No response

PHP errors

No response
@AYMERIC-SVRY AYMERIC-SVRY changed the title Provide a general summary of the issue Incoming email display (css) problem Aug 15, 2024
@alecpl
Copy link
Member

alecpl commented Aug 16, 2024

Yes. In 1.6.8 we made the css parser more strict, as it's very hard to sanitize css code. If it detects potentially evil code it will ignore the whole css "block", to be on the safe side.

If you provide the email message sample we can take a look to see whether it's a bug and whether we can improve the parser.

@AYMERIC-SVRY
Copy link
Author

AYMERIC-SVRY commented Aug 16, 2024 •
edited by alecpl
Loading

Thank you very much for your reply, here is an example of an email received that should normally be displayed correctly.
Screen

HTML

Received: from sidlcorp by server.host-by-sidlcorporation.fr with local (Exim 4.97.1)
	(envelope-from <sidlcorp@server.host-by-sidlcorporation.fr>)
	id 1sewn9-00000003pr7-3vAA
	for contact@sidl-corporation.fr;
	Fri, 16 Aug 2024 15:14:56 +0200
To: contact@sidl-corporation.fr
Subject: =?UTF-8?Q?Prise_de_contact_pour_un_autre_probl=C3=A8me.?=
X-PHP-Script: www.sidl-corporation.fr/index.php for 82.67.99.2
 X-PHP-Originating-Script: 1003:PHPMailer.php
Date: Fri, 16 Aug 2024 13:14:55 +0000
From: NO REPLY | SIDL CORPORATION <no-reply@sidl-corporation.fr>
Reply-To: aymeric.savary@icloud.com
Message-ID: <bMdHdo7qgX2m4Z9uITFT9w6oSwoDmRBmlRPij0rF6Sg@www.sidl-corporation.fr>
X-Mailer: PHPMailer 6.9.1 (https://github.com/PHPMailer/PHPMailer)
MIME-Version: 1.0
Content-Type: multipart/alternative;
 boundary="b1=_bMdHdo7qgX2m4Z9uITFT9w6oSwoDmRBmlRPij0rF6Sg"
Content-Transfer-Encoding: 8bit
X-BoxTrapper-Match: trustedtransport: local

--b1=_bMdHdo7qgX2m4Z9uITFT9w6oSwoDmRBmlRPij0rF6Sg
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Plain text removed

--b1=_bMdHdo7qgX2m4Z9uITFT9w6oSwoDmRBmlRPij0rF6Sg
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
                'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
            position: relative;
        }

        html, body {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            width: 100%;
            background-color: #edf2f7;
            margin: 0;
            padding: 0;
            position: relative;
        }

        .content {
            width: 100%;
            margin: 0;
            padding: 0;
            position: relative;
        }

        .header {
            padding: 25px 0;
            text-align: center;
        }

        .header a {
            color: #3d4852;
            font-size: 19px;
            font-weight: bold;
            text-decoration: none;
            display: inline-block;
        }

        .header img {
            width: auto;
            height: 55px;
            min-width: 80px;
            max-width: 100%;
            border: none;
        }

        .body {
            background-color: #edf2f7;
            border-bottom: 1px solid #edf2f7;
            border-top: 1px solid #edf2f7;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        .inner-body {
            width: 570px;
            background-color: #ffffff;
            border-color: #e8e5ef;
            border-radius: 10px;
            border-width: 1px;
            box-shadow: 0 2px 0 rgba(0, 0, 150, 0.025), 2px 4px 0 rgba(0, 0, 150, 0.015);
            margin: 0 auto;
            padding: 0;
        }

        .content-cell {
            max-width: 100vw;
            padding: 32px;
        }

        h1 {
            color: #3d4852;
            font-size: 18px;
            font-weight: bold;
            margin-top: 0;
            text-align: left;
        }

        p {
            font-size: 16px;
            line-height: 1.5em;
            margin-top: 0;
            text-align: left;
        }
        .footer {
            width: 570px;
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }

        .footer-message {
            line-height: 1.5em;
            margin-top: 0px;
            color: #b0adc5;
            font-size: 12px;
            text-align: justify;
        }
        .footer-legal {
            line-height: 1.5em;
            margin-top: 0px;
            color: #b0adc5;
            font-size: 12px;
            text-align: center;
        }
    </style>
</head>

<body>
    <table class="wrapper" width="100%" cellspacing="0" cellpadding="0">
        <tbody>
            <tr>
                <td class="content" align="center">
                    <table class="content" width="100%" cellspacing="0" cellpadding="0">
                        <tbody>
                            <tr>
                                <td class="header">
                                    <a href="https://www.sidl-corporation.fr/">
                                        <img src="https://www.sidl-corporation.fr/wp-content/uploads/2024/07/LOGO2023-1.png" />
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td class="body">
                                    <table class="inner-body" width="570" cellspacing="0" cellpadding="0" align="center">
                                        <tbody>
                                            <tr>
                                                <td class="content-cell">
                                                    <h1>Message de SAVARY Aymeric (aymeric.savary@icloud.com) !</h1>
                                                    <p>
                                                        Message : <br>
                                                        Teste
                                                    </p>
                                                    <h1>Info sur l'expéditeur :</h1>
                                                    <ul>
                                                        <li><b>Nom & Prénom :</b> SAVARY Aymeric</li>
                                                        <li><b>Email :</b> <a href="mailto:aymeric.savary@icloud.com">aymeric.savary@icloud.com</a></li>
                                                        <li><b>Sujet :</b> Prise de contact pour un autre problème.</li>
                                                        <li><b>N° Tel :</b> 0769573479</li>
                                                        <li><b>Conditions :</b> Consented: Vous acceptez que vos informations ci-dessus (saisis dans les champs) soient utiliser à des fin de prise de contact entre <b>VOUS</b> et <b>SIDL CORPORATION</b>.</li>
                                                    </ul>
                                                    <p>
                                                        Cordialement,<br />
                                                        L'équipe SIDL CORPORATION<br/><br>
                                                        <i>Cet e-mail a été envoyé depuis un formulaire de contact sur SIDL CORPORATION (https://www.sidl-corporation.fr)</i>
                                                    </p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td class="footer">
                                    <table class="footer" width="570" cellspacing="0" cellpadding="0" align="center">
                                        <tbody>
                                            <tr>
                                                <td class="content-cell" align="center">
                                                    <p class="footer-message">
                                                        Ce message électronique et tous les fichiers joints qu'il contient
                                                        contient (ci-après le "message") sont confidentiels et
                                                        destiné exclusivement à l'usage de son
                                                        conteneurs. Si vous recevez ce message par erreur, veuillez
                                                        détruisez-le et informez l’expéditeur. Tous
                                                        utilisation non conforme de sa destination et de ses fichiers
                                                        les pièces jointes qu'il contient, ainsi que toute distribution ou publication
                                                        total ou partiel sont strictement interdits sans
                                                        autorisation. Merci de ne pas répondre aux emails
                                                        "ne-pas-repondre@sidl-corporation.fr",
                                                        "no-reply@sidl-corporation.fr".
                                                    </p>
                                                    <p class="footer-legal">
                                                        <strong>SIDL CORPORATION</strong> ― 7 Imp. Jean Jaurès ― 01000 ―
                                                        Bourg-en-Bresse ― France <br/>
                                                        <strong>SIRET :</strong> 811 910 603 00067 ― <strong>
                                                            N&deg; RCS :</strong> Bourg-En-Bresse A 811 910 603 ― <strong>NAF : 
                                                         </strong>6201Z <br/>
                                                         <strong>SITE :</strong>
                                                        https://www.sidl-corporation.fr/ ― <strong>EMAIL :</strong>
                                                        contact@sidl-corporation.fr
                                                    </p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>


--b1=_bMdHdo7qgX2m4Z9uITFT9w6oSwoDmRBmlRPij0rF6Sg--

@alecpl
Copy link
Member

alecpl commented Aug 16, 2024

Ok, this is not a problem with evil css code, as I suspected, but indeed there's a regression in how css class names are supposed to be modified so the styles do not "leak" outside of the message body. I'll investigate that.

@alecpl alecpl added this to the 1.6.9 milestone Aug 16, 2024
alecpl added a commit that referenced this issue Aug 16, 2024
@alecpl
Fix regression where HTML messages were displayed unstyled (#9586)
58721e3
alecpl added a commit that referenced this issue Aug 16, 2024
@alecpl
Fix regression where HTML messages were displayed unstyled (#9586)
f343ece
alecpl added a commit that referenced this issue Aug 16, 2024
@alecpl
Fix regression where HTML messages were displayed unstyled (#9586)
316a0dd
@alecpl
Copy link
Member

alecpl commented Aug 16, 2024

I'm surprised we didn't have a test for this. Fixed.

@alecpl alecpl closed this as completed Aug 16, 2024
@AYMERIC-SVRY
Copy link
Author

If you need anything else on these issues please feel free to ask, so I received this update with WHM & cPanel, and the problem persists on all internet browsers including Google Chrome, Edge, FireFox

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug C: Mail view
Projects
None yet
Milestone
1.6.9
Development

No branches or pull requests
2 participants
@alecpl @AYMERIC-SVRY