Error message body as html without style #51

dab246 · 2021-08-23T10:18:26Z

Description

We use flutter_widget_from_html library to display the content as html. In case the html content contains many css styles that the library cannot parse, the content cannot be rendered.
issue raised: Unable to display html content daohoangson/flutter_widget_from_html#578

Exp: Text message sent from email address noreply@qa.open-paas.org

\n    <!doctype html>\n    <html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n      <head>\n        <title>\n          \n        </title>\n        <!--[if !mso]><!-->\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n        <!--<![endif]-->\n        <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style type=\"text/css\">\n          #outlook a { padding:0; }\n          body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }\n          table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }\n          img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }\n          p { display:block;margin:13px 0; }\n        </style>\n        <!--[if mso]>\n        <xml>\n        <o:OfficeDocumentSettings>\n          <o:AllowPNG/>\n          <o:PixelsPerInch>96</o:PixelsPerInch>\n        </o:OfficeDocumentSettings>\n        </xml>\n        <![endif]-->\n        <!--[if lte mso 11]>\n        <style type=\"text/css\">\n          .mj-outlook-group-fix { width:100% !important; }\n        </style>\n        <![endif]-->\n        \n      <!--[if !mso]><!-->\n        <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,700\" rel=\"stylesheet\" type=\"text/css\">\n        <style type=\"text/css\">\n          @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);\n        </style>\n      <!--<![endif]-->\n\n    \n        \n    <style type=\"text/css\">\n      @media only screen and (min-width:480px) {\n        .mj-column-per-100 { width:100% !important; max-width: 100%; }\n      }\n    </style>\n    \n  \n        <style type=\"text/css\">\n        \n        \n        </style>\n        \n        \n      </head>\n      <body style=\"word-spacing:normal;\">\n        \n        \n      <div style>\n        \n      \n      <!--[if mso | IE]><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"\" style=\"width:600px;\" width=\"600\" ><tr><td style=\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\"><![endif]-->\n    \n      \n      <div style=\"margin:0px auto;max-width:600px;\">\n        \n        <table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"width:100%;\">\n          <tbody>\n            <tr>\n              <td style=\"direction:ltr;font-size:0px;padding:20px 0;padding-bottom:32px;text-align:center;\">\n                <!--[if mso | IE]><table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td class=\"\" width=\"600px\" ><table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"\" style=\"width:600px;\" width=\"600\" ><tr><td style=\"line-height:0px;font-size:0px;mso-line-height-rule:exactly;\"><![endif]-->\n    \n      \n      <div style=\"margin:0px auto;max-width:600px;\">\n        \n        <table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"width:100%;\">\n          <tbody>\n            <tr>\n              <td style=\"direction:ltr;font-size:0px;padding:20px 0;padding-bottom:0;padding-top:0;text-align:center;\">\n                <!--[if mso | IE]><table role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td class=\"alarm-title-container-outlook\" style=\"vertical-align:top;width:600px;\" ><![endif]-->\n            \n      <div class=\"mj-column-per-100 mj-outlook-group-fix alarm-title-container\" style=\"background: #eaeefe; border-radius: 4px; border: 1px solid #eaeefe; font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;\">\n        \n      <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n        <tbody>\n          <tr>\n            <td style=\"vertical-align:top;padding-top:4px;padding-bottom:4px;\">\n              \n      <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style width=\"100%\">\n        <tbody>\n          \n              <tr>\n                <td align=\"left\" style=\"font-size:0px;padding:0;padding-top:8px;padding-right:20px;padding-bottom:8px;padding-left:20px;word-break:break-word;\">\n                  \n      <div style=\"font-family:Roboto;font-size:16px;line-height:1;text-align:left;color:#222222;\">This event is about to begin</div>\n    \n                </td>\n              </tr>\n            \n        </tbody>\n      </table>\n    \n            </td>\n          </tr>\n        </tbody>\n      </table>\n    \n      </div>\n    \n          <!--[if mso | IE]></td><td class=\"content-outlook\" style=\"vertical-align:top;width:600px;\" ><![endif]-->\n            \n      <div class=\"mj-column-per-100 mj-outlook-group-fix content\" style=\"border: 1px solid #ccc; border-radius: 4px; margin-top: 24px; font-size: 0px; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;\">\n        \n      <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"vertical-align:top;\" width=\"100%\">\n        <tbody>\n          \n              <tr>\n                <td align=\"left\" style=\"font-size:0px;padding:20px;word-break:break-word;\">\n                  \n      <div style=\"font-family:Roboto;font-size:20px;font-weight:500;line-height:1;text-align:left;color:#434343;\"></div>\n    \n                </td>\n              </tr>\n            \n              <tr>\n                <td align=\"left\" style=\"font-size:0px;padding:20px;padding-top:0px;word-break:break-word;\">\n                  \n      <table cellpadding=\"4px\" cellspacing=\"0\" width=\"100%\" border=\"0\" style=\"color:#434343;font-family:Roboto;font-size:14px;line-height:22px;table-layout:auto;width:100%;border:none;\">\n        <tr><td valign=\"top\" style=\"min-width: 80px;\"><strong>Time</strong></td><td><span style=\"display: inline-block;\">Tuesday 26 November 2019 04:30 - 05:30</span><span style=\"display: inline-block; color: #787878; font-weight: 400;\">&nbsp;Europe/Paris</span>&nbsp;(<a class=\"link\" href=\"https://dev.open-paas.org/calendar/#/calendar?start=11-26-2019\" style=\"text-decoration: none; color: #4d91c9;\">See in Calendar</a>)</td></tr><tr><td valign=\"top\"><strong>Attendees</strong></td><td><ul style=\"padding-inline-start: 16px; margin: 0;\"><li><span style=\"font-weight: 500\">userb@qa.open-paas.org</span><span style=\"color: #787878;\">&nbsp;&lt;userb@qa.open-paas.org&gt;</span><span style=\"font-weight: 500\">&nbsp;(Organizer)</span></li></ul></td></tr>\n      </table>\n    \n                </td>\n              </tr>\n            \n        </tbody>\n      </table>\n    \n      </div>\n    \n          <!--[if mso | IE]></td></tr></table><![endif]-->\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        \n      </div>\n    \n      \n      <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        \n      </div>\n    \n      \n      <!--[if mso | IE]></td></tr></table><![endif]-->\n    \n    \n      </div>\n    \n      </body>\n    </html>\n

Solutions

Use sanitize_html to clean html message content

Result

The html content can be displayed, but the style attribute in the tags is removed resulting in incorrect display.

Expect

The text was updated successfully, but these errors were encountered:

chibenwa · 2021-08-23T12:19:14Z

(Being able to display is better than nothing.)

Please list the corresponding tickets you opened upstream in the tickets so that we can all monitor them.

IMO if there is not quick fixes we may move forward with the sanitiing option when rendering fails IMO while waiting for more robust options coming from the eco-system.

hoangdat · 2021-08-23T13:00:38Z

daohoangson/flutter_widget_from_html#578

chibenwa · 2021-08-23T14:25:41Z

Have you tried https://github.com/Sub6Resources/flutter_html

Seems more popular for what it is worth.

How the two compares?

dab246 · 2021-08-24T02:18:05Z

Have you tried https://github.com/Sub6Resources/flutter_html

Seems more popular for what it is worth.

How the two compares?

I tried it and it can't display html content with nested table tags. You can read their feedback here. Sub6Resources/flutter_html#810

dab246 · 2021-08-24T06:57:20Z

After sanitizing html content and removing attributes with size equal to 0px (Ex: font-size, width, height,...). All messages are displayed. But padding, background still not like the expected image.

chibenwa · 2021-08-24T07:04:47Z

I think we can live with this for now.

hoangdat · 2021-10-13T05:34:54Z

Solution is change to webview_inapp library

dab246 added the bug Something isn't working label Aug 23, 2021

dab246 mentioned this issue Aug 23, 2021

Read email content for each email in Thread #23

Merged

5 tasks

hoangdat self-assigned this Sep 8, 2021

dab246 assigned dab246 and unassigned hoangdat Oct 11, 2021

hoangdat closed this as completed Oct 13, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error message body as html without style #51

Error message body as html without style #51

dab246 commented Aug 23, 2021 •

edited by hoangdat

chibenwa commented Aug 23, 2021

hoangdat commented Aug 23, 2021

chibenwa commented Aug 23, 2021

dab246 commented Aug 24, 2021

dab246 commented Aug 24, 2021

chibenwa commented Aug 24, 2021

hoangdat commented Oct 13, 2021

Error message body as html without style #51

Error message body as html without style #51

Comments

dab246 commented Aug 23, 2021 • edited by hoangdat

Description

Solutions

Result

Expect

chibenwa commented Aug 23, 2021

hoangdat commented Aug 23, 2021

chibenwa commented Aug 23, 2021

dab246 commented Aug 24, 2021

dab246 commented Aug 24, 2021

chibenwa commented Aug 24, 2021

hoangdat commented Oct 13, 2021

dab246 commented Aug 23, 2021 •

edited by hoangdat