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 · 7 comments
Closed
1 of 2 tasks

Incoming email display (css) problem #9586

AYMERIC-SVRY opened this issue Aug 15, 2024 · 7 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 <[email protected]>)
	id 1sewn9-00000003pr7-3vAA
	for [email protected];
	Fri, 16 Aug 2024 15:14:56 +0200
To: [email protected]
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 <[email protected]>
Reply-To: [email protected]
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 ([email protected]) !</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:[email protected]">[email protected]</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
                                                        "[email protected]",
                                                        "[email protected]".
                                                    </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>
                                                        [email protected]
                                                    </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

@anantanandgupta
Copy link

anantanandgupta commented Nov 19, 2024 •
edited
Loading

i upgraded to 1.6.9 and i still see this issue. it is working fine with version 1.6.7

@anantanandgupta
Copy link

in version 1.6.7
image

in version 1.6.9
image

mail source:

<html>

<head>
  <meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Dutf-8" =
/>
  <meta name=3D"color-scheme" content=3D"light" />
  <meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=3D=
1, minimum-scale=3D1" />
  <meta name=3D"supported-color-schemes" content=3D"light">
  <base target=3D"_blank">

  <style type=3D"text/css">
    :root {
      color-scheme: light;
    }

    .body-style {
      background-color: #EBE6E0;
      color: #666;
      font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;
      font-size: 16px;
      margin: 0;
    }

    .wrap {
      background-color: #fff;
      padding: 16px;
      max-width: 640px;
      margin: 0 auto;
      border-radius: 8px;
      table-layout: fixed;
    }

    .header {
      padding: 16px;
    }

    .header img {
      max-width: 320px;
    }

    .footer {
      text-align: center;
      font-size: 12px;
      color: #888;
    }

    .footer a {
      color: #888;
    }

    .gutter {
      padding: 32px;
    }

    .message {
      padding: 16px;
    }

    .promotion {
      padding: 16px;
    }

    table {
      border-spacing: 0;
    }

    td {
      padding: 0;
      vertical-align: top;
    }

    p,
    h1,
    h2,
    h3,
    h4 {
      padding: 0;
      margin: 0;
      line-height: normal !important;
      font-weight: 500;
    }

    h1,
    h2,
    h3,
    h4 {
      color: #395062;
    }

    p {
      padding-bottom: 16px;
      font-weight: 400;
      line-height: normal !important;
      text-align: justify;
    }

    h1 {
      font-size: 28px;
    }

    h2 {
      font-size: 24px;
    }

    h3 {
      font-size: 20px;
    }

    h4 {
      font-size: 16px;
    }

    .button {
      display: inline-block;
      border-radius: 4px;
      padding: 12px 32px;
      text-align: center;
      text-decoration: none;
      font-weight: 500;
    }

    .button {
      background: #7D6A4F;
      color: #fffc !important;
    }

    .button:hover {
      background: #B09E82 !important;
      color: #0009 !important;
    }

    img {
      max-width: 100%;
      height: auto;
      border: 0;
      display: inline-block;
    }

    a {
      color: #395062;
      text-decoration: none;
      font-weight: 500;
    }

    a:hover {
      color: #111;
    }

    img.light {
      display: block;
    }

    img.dark {
      display: block;
    }

    img.card {
      max-width: 240px;
      float: left;
      padding-right: 32px;
    }

    .section {
      border-radius: 4px;
      padding: 16px;
    }

    .section {
      background-color: #7D6A4F5F;
    }

    .section .small {
      font-size: 12px;
    }

    .social-link {
      padding: 0;
    }

    .social-link img {
      display: block;
    }

    @media screen and (max-width: 640px) {
      .header img {
        max-width: 100%;
      }

      .wrap {
        max-width: initial;
      }

      .gutter {
        padding: 16px;
      }

      img.card {
        max-width: 100%;
        float: left;
        padding-right: 0;
      }

      .section-column {
        max-width: 100%;
      }
    }

    td {
      text-align: center;
    }
  </style>
</head>

<body class=3D"body-style">
  <div class=3D"gutter">
    <div class=3D"wrap">
      <div class=3D"header">
        <a class=3D"social-link" href=3D"https://www.instifusion.com"><img =
src=3D"https://campaigns.local.instifusion.com/uploads/if-logo-text-light.p=
ng" alt=3D"logo_light_theme" /></a>
      </div>
      <div class=3D"message">
        <p>Dear Parents/Guardian,</p>
        <p>National Public School is requesting access to Aashrita's AASRI =
records maintained by ID "809003197230":</p>
        <p>This request is sent to you since you are listed as parent / gua=
rdian to the AARSI holder. You can click on the button below to view the re=
quest detail and decide to accept or reject the same.</p>
        <a href=3D"https://app.local.instifusion.com/landing/process/8c592d=
7e-1a09-4add-a757-8796169afd9b" class=3D"button">See Request Detail</a>
      </div>
      <div class=3D"promotion">
        <p>If you encounter any issues with the button above, you can also =
copy and paste the following link in your browser:</p>
        <p>https://app.local.instifusion.com/landing/process/8c592d7e-1a09-=
4add-a757-8796169afd9b</p>
        <div class=3D"section">
          <span class=3D"small">If you decide not to respond in either way,=
 please ignore this email. This request will automatically be expiring in 7=
 days, after which school will require to send the request again.</span>
        </div>
        <div class=3D"section">
          <span class=3D"small">For assistance, you can contact our support=
 team at <a href=3D"mailto:[email protected]">[email protected]=
</a>.</span>
        </div>
        <div style=3D"padding: 8px;">
          <table>
            <tr>
              <td><a class=3D"social-link" href=3D"https://linkedin.com/sho=
wcase/instifusion"><img width=3D"32" height=3D"32" src=3D"https://campaigns=
.local.instifusion.com/uploads/mail-linkedin.png" alt=3D"logo_linkedin" /><=
/a></td>
              <td><a class=3D"social-link" href=3D"https://twitter.com/Inst=
iFusionID"><img width=3D"32" height=3D"32" src=3D"https://campaigns.local.i=
nstifusion.com/uploads/mail-twitter.png" alt=3D"logo_twitter" /></a></td>
              <td><a class=3D"social-link" href=3D"https://instagram.com/In=
stiFusion"><img width=3D"32" height=3D"32" src=3D"https://campaigns.local.i=
nstifusion.com/uploads/mail-instagram.png" alt=3D"logo_instagram" /></a></t=
d>
              <td><a class=3D"social-link" href=3D"https://facebook.com/Ins=
tiFusion"><img width=3D"32" height=3D"32" src=3D"https://campaigns.local.in=
stifusion.com/uploads/mail-facebook.png" alt=3D"logo_facebook" /></a></td>
            </tr>
          </table>
        </div>
        <div class=3D"footer">
          <div>InstiFusion by <a href=3D"https://www.solscientia.com" targe=
t=3D"_blank" rel=3D"noreferrer">SolScientia Technologies Pvt. Ltd.</a></div=
>
        </div>
      </div>
    </div>
  </div>
</body>

</html>```

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
3 participants
@alecpl @anantanandgupta @AYMERIC-SVRY