OfficeDev/office-js

Some HTML tags are getting stripped in appendOnSendAsync in outlook for web

Opened this issue · 5 comments

tallen1114 commented

Certain HTML tags are being stripped when calling appendOnSendAsync from Outlook Web

Your Environment

  • Platform [PC desktop, Mac, iOS, Office on the web]: Office on the web
  • Host [Excel, Word, PowerPoint, etc.]: Outlook
  • Office version number: 16.84.2 (24042814)
  • Operating System: Mac and Windows
  • Browser (if using Office on the web): Chrome, Safari, and Edge

Expected behavior

HTML that is sent to appendOnSendAsync gets appended to the end of the email, unchanged

Current behavior

Certain tags are being removed from the html

Steps to reproduce

  1. Call appendOnSendAsync and pass in html such as <span><br id="myId"></span>
  2. Send the email from Outlook for Web
  3. View the email once it's been sent, and only <br> was appended.

Provide additional details

This works when sending from a Desktop Client, but behaves differently on Web.

Here's how we're calling appendOnSendAsync:

public appendOnSend(html: string): Promise<Office.AsyncResult<void>> {
        return new Promise<Office.AsyncResult<void>>((resolve, reject) => {
            (Office.context.mailbox.item.body as any).appendOnSendAsync(
                html,
                { coercionType: Office.CoercionType.Html },
                (asyncResult) => {
                    if (asyncResult.status === Office.AsyncResultStatus.Succeeded) {
                        resolve(asyncResult);
                    } else if (asyncResult.error) {
                        reject(asyncResult.error);
                    } else {
                        reject(asyncResult);
                    }
                }
            );
        });
    }

This is the html parameter that gets passed into that function:
"<p class="MsoNormal" style="display:none; overflow:hidden; visibility:hidden; line-height:0; font-size:0; max-height:0; max-width:0;"><img src="url-for-image" style="display: none; border: 0; width: 0; height: 0; overflow: hidden;" width="0" height="0" border="0"><br id="yw-custom-id">&nbsp;</p>"

And this is what ends up getting appended to the body once the email is sent - some of the styles are gone, as well as the id on the br tag:
<p style=3D"line-height: 0; max-width: 0px; max-height: 0px; font-size: 0px;"><img style=3D"width: 0px; height: 0px; margin-top: 0px; margin-bottom: 0px;" src=3D"url-for-image"><br>

rajjha-msft commented

Hey @tallen1114

Thank you for reporting the issue around AppendOnSend feature on Outlook for Web.
We have put it in our backlog, and unfortunately have no timelines to share.

Internal tracking id : 279321

tallen1114 commented

Thanks @rajjha-msft
This is causing a huge impact to our users 😭 Any ideas for workarounds? We're trying to insert flags into the html body of the message in a way that won't be visible to recipients. This used to work...

rajjha-msft commented

Rest assured that we are currently prioritizing the resolution of the issue you have brought to our attention. We appreciate your patience and apologize for any inconvenience this may have caused.

  • ❤️2
sivachandran-msft commented

Hi @tallen1114,
Thanks for reaching out regarding Some HTML tags are getting stripped in appendOnSendAsync in outlook for web issue. As per our internal investigation, some of the HTML attributes that are being used are not being rendered appropriately due to HTML sanitization. As a guidance, it is recommended to use CSS Styles over HTML attributes. For best practices, please refer to code which has the list of allowed attributes:
https://github.com/microsoft/roosterjs/blob/b373c89b1368b69ae1004624bad80f6100c05adb/packages/roosterjs-editor-dom/lib/htmlSanitizer/getAllowedValues.ts

tallen1114 commented

Thank you @sivachandran-msft! I don't think CSS Styles will work for our case, but it definitely helps to have the list of allowed attributes ❤️