[4.x] Mails sent through Notifications preview invalid HTML #1188

gshzn · 2022-02-12T22:56:54Z

As described in #1186, mail displays sent through the Notification classes are not displayed correctly.

Upon further investigation, I was able to find out that the HTML is not correctly split/parsed from the e-mail envelope containing headers, a raw/markdown representation of the notification and lastly, the HTML representation.

This is that e-mail envelope (taken from the debugger):

--1l2lTBZn
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: quoted-printable

[Laravel](http://localhost)

# Hello!

The introduction to the noti=
fication.

Notification Action: http://localhost

Thank you for usi=
ng our application!

Regards,
Laravel

If you're having trouble c=
licking the "Notification Action" button, copy and paste the URL below
in=
to your web browser: [http://localhost](http://localhost)

=C2=A9 2022 =
Laravel. All rights reserved.

--1l2lTBZn
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: quoted-printable

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.=
w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=3D"http://www.=
w3.org/1999/xhtml">
<head>
<meta name=3D"viewport" content=3D"width=3Dd=
evice-width, initial-scale=3D1.0">
<meta http-equiv=3D"Content-Type" cont=
ent=3D"text/html; charset=3DUTF-8">
<meta name=3D"color-scheme" content=
=3D"light">
<meta name=3D"supported-color-schemes" content=3D"light">
<=
style>
@media  only screen and (max-width: 600px) {
.inner-body {
wid=
th: 100% !important;
}

.footer {
width: 100% !important;
}
}=


@media  only screen and (max-width: 500px) {
.button {
width: 100=
% !important;
}
}
</style>
</head>
<body style=3D"box-sizing: bor=
der-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto=
, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Seg=
oe UI Symbol'; position: relative; -webkit-text-size-adjust: none; backgrou=
nd-color: #ffffff; color: #718096; height: 100%; line-height: 1.4; margin: =
0; padding: 0; width: 100% !important;">

<table class=3D"wrapper" widt=
h=3D"100%" cellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" style=
=3D"box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont,=
 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Se=
goe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpaddin=
g: 0; -premailer-cellspacing: 0; -premailer-width: 100%; background-color: =
#edf2f7; margin: 0; padding: 0; width: 100%;">
<tr>
<td align=3D"center=
" style=3D"box-sizing: border-box; font-family: -apple-system, BlinkMacSyst=
emFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoj=
i', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<table cla=
ss=3D"content" width=3D"100%" cellpadding=3D"0" cellspacing=3D"0" role=3D"p=
resentation" style=3D"box-sizing: border-box; font-family: -apple-system, B=
linkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple=
 Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -pr=
emailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%; =
margin: 0; padding: 0; width: 100%;">
<tr>
<td class=3D"header" style=
=3D"box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont,=
 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Se=
goe UI Emoji', 'Segoe UI Symbol'; position: relative; padding: 25px 0; text=
-align: center;">
<a href=3D"http://localhost" style=3D"box-sizing: borde=
r-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, =
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe=
 UI Symbol'; position: relative; color: #3d4852; font-size: 19px; font-weig=
ht: bold; text-decoration: none; display: inline-block;">
<img src=3D"htt=
ps://laravel.com/img/notification-logo.png" class=3D"logo" alt=3D"Laravel L=
ogo" style=3D"box-sizing: border-box; font-family: -apple-system, BlinkMacS=
ystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color E=
moji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; max-width: =
100%; border: none; height: 75px; max-height: 75px; width: 75px;">
</a>=

</td>
</tr>

<!-- Email Body -->
<tr>
<td class=3D"body" width=
=3D"100%" cellpadding=3D"0" cellspacing=3D"0" style=3D"box-sizing: border-b=
ox; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Hel=
vetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI=
 Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspa=
cing: 0; -premailer-width: 100%; background-color: #edf2f7; border-bottom: =
1px solid #edf2f7; border-top: 1px solid #edf2f7; margin: 0; padding: 0; wi=
dth: 100%;">
<table class=3D"inner-body" align=3D"center" width=3D"570" c=
ellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" style=3D"box-sizin=
g: 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; -premailer-cellpadding: 0; -premai=
ler-cellspacing: 0; -premailer-width: 570px; background-color: #ffffff; bor=
der-color: #e8e5ef; border-radius: 2px; border-width: 1px; box-shadow: 0 2p=
x 0 rgba(0, 0, 150, 0.025), 2px 4px 0 rgba(0, 0, 150, 0.015); margin: 0 aut=
o; padding: 0; width: 570px;">
<!-- Body content -->
<tr>
<td class=
=3D"content-cell" style=3D"box-sizing: border-box; font-family: -apple-syst=
em, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, '=
Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative=
; max-width: 100vw; padding: 32px;">
<h1 style=3D"box-sizing: border-box;=
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvet=
ica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Sy=
mbol'; position: relative; color: #3d4852; font-size: 18px; font-weight: bo=
ld; margin-top: 0; text-align: left;">Hello!</h1>
<p style=3D"box-sizing:=
 border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Ro=
boto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', =
'Segoe UI Symbol'; position: relative; font-size: 16px; line-height: 1.5em;=
 margin-top: 0; text-align: left;">The introduction to the notification.</p=
>
<table class=3D"action" align=3D"center" width=3D"100%" cellpadding=3D"=
0" cellspacing=3D"0" role=3D"presentation" style=3D"box-sizing: border-box;=
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvet=
ica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Sy=
mbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacin=
g: 0; -premailer-width: 100%; margin: 30px auto; padding: 0; text-align: ce=
nter; width: 100%;">
<tr>
<td align=3D"center" style=3D"box-sizing: bor=
der-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto=
, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Seg=
oe UI Symbol'; position: relative;">
<table width=3D"100%" border=3D"0" c=
ellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" style=3D"box-sizin=
g: 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;">
<tr>
<td align=3D"center" st=
yle=3D"box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFo=
nt, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', =
'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<table border=
=3D"0" cellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" style=3D"b=
ox-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Seg=
oe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe U=
I Emoji', 'Segoe UI Symbol'; position: relative;">
<tr>
<td style=3D"bo=
x-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Sego=
e UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI=
 Emoji', 'Segoe UI Symbol'; position: relative;">
<a href=3D"http://local=
host" class=3D"button button-primary" target=3D"_blank" rel=3D"noopener" st=
yle=3D"box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFo=
nt, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', =
'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -webkit-text-size-=
adjust: none; border-radius: 4px; color: #fff; display: inline-block; overf=
low: hidden; text-decoration: none; background-color: #2d3748; border-botto=
m: 8px solid #2d3748; border-left: 18px solid #2d3748; border-right: 18px s=
olid #2d3748; border-top: 8px solid #2d3748;">Notification Action</a>
</t=
d>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>=

<p style=3D"box-sizing: border-box; font-family: -apple-system, BlinkMac=
SystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color =
Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; font-size:=
 16px; line-height: 1.5em; margin-top: 0; text-align: left;">Thank you for =
using our application!</p>
<p style=3D"box-sizing: border-box; font-famil=
y: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,=
 sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; posi=
tion: relative; font-size: 16px; line-height: 1.5em; margin-top: 0; text-al=
ign: left;">Regards,<br>
Laravel</p>


<table class=3D"subcopy" wid=
th=3D"100%" cellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" style=
=3D"box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont,=
 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Se=
goe UI Emoji', 'Segoe UI Symbol'; position: relative; border-top: 1px solid=
 #e8e5ef; margin-top: 25px; padding-top: 25px;">
<tr>
<td style=3D"box-=
sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe =
UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI E=
moji', 'Segoe UI Symbol'; position: relative;">
<p style=3D"box-sizing: b=
order-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Robo=
to, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'S=
egoe UI Symbol'; position: relative; line-height: 1.5em; margin-top: 0; tex=
t-align: left; font-size: 14px;">If you're having trouble clicking the "Not=
ification Action" button, copy and paste the URL below
into your web brow=
ser: <span class=3D"break-all" style=3D"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'; posit=
ion: relative; word-break: break-all;"><a href=3D"http://localhost" style=
=3D"box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont,=
 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Se=
goe UI Emoji', 'Segoe UI Symbol'; position: relative; color: #3869d4;">http=
://localhost</a></span></p>

</td>
</tr>
</table>
</td>
</tr>=

</table>
</td>
</tr>

<tr>
<td style=3D"box-sizing: border-box=
; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helve=
tica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI S=
ymbol'; position: relative;">
<table class=3D"footer" align=3D"center" wi=
dth=3D"570" cellpadding=3D"0" cellspacing=3D"0" role=3D"presentation" style=
=3D"box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont,=
 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Se=
goe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpaddin=
g: 0; -premailer-cellspacing: 0; -premailer-width: 570px; margin: 0 auto; p=
adding: 0; text-align: center; width: 570px;">
<tr>
<td class=3D"conten=
t-cell" align=3D"center" style=3D"box-sizing: border-box; font-family: -app=
le-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-s=
erif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: r=
elative; max-width: 100vw; padding: 32px;">
<p style=3D"box-sizing: borde=
r-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, =
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe=
 UI Symbol'; position: relative; line-height: 1.5em; margin-top: 0; color: =
#b0adc5; font-size: 12px; text-align: center;">=C2=A9 2022 Laravel. All rig=
hts reserved.</p>

</td>
</tr>
</table>
</td>
</tr>
</table>=

</td>
</tr>
</table>
</body>
</html>
--1l2lTBZn--

In the first commit, I've created a test to capture the invalidity.

I hope to have some time throughout next week to look at a potential solution.

As this is my first ever contribution to open source, please let me know if I'm breaking any etiquettes! :>

driesvints · 2022-02-14T14:17:07Z

composer.json

@@ -21,6 +21,7 @@
    },
    "require-dev": {
        "ext-gd": "*",
+        "guzzlehttp/guzzle": "^6.0|^7.0",


Added this to make all tests pass on local as well.

driesvints · 2022-02-14T14:17:48Z

Thanks @guushuizen. I've fixed the implementation. Thanks for the test!

Validate invalidity of captured HTML in notification-sent Mails

95d9dd9

gshzn force-pushed the bugfix/invalid-html-display-notification-mail branch from ff36d0f to 95d9dd9 Compare February 12, 2022 22:59

driesvints changed the title ~~Draft: Mails sent through Notifications preview invalid HTML~~ [4.x] Mails sent through Notifications preview invalid HTML Feb 14, 2022

driesvints marked this pull request as draft February 14, 2022 10:01

Fix MailWatcher

95d6d10

driesvints reviewed Feb 14, 2022

View reviewed changes

driesvints marked this pull request as ready for review February 14, 2022 14:17

driesvints approved these changes Feb 14, 2022

View reviewed changes

driesvints linked an issue Feb 14, 2022 that may be closed by this pull request

Mail preview are not displayed correctly #1186

Closed

driesvints mentioned this pull request Feb 14, 2022

Fix #1186 Mail preview is not display correctly #1190

Closed

taylorotwell merged commit 73c0b4f into laravel:4.x Feb 14, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[4.x] Mails sent through Notifications preview invalid HTML #1188

[4.x] Mails sent through Notifications preview invalid HTML #1188

gshzn commented Feb 12, 2022

driesvints Feb 14, 2022

driesvints commented Feb 14, 2022

[4.x] Mails sent through Notifications preview invalid HTML #1188

[4.x] Mails sent through Notifications preview invalid HTML #1188

Conversation

gshzn commented Feb 12, 2022

driesvints Feb 14, 2022

Choose a reason for hiding this comment

driesvints commented Feb 14, 2022