Mail App

Updated 3,194 Days AgoPublic

Actions

The Mail app comes with it's own routes, nested under a top-level /mail route, which maps to shell.mail in the Router's model.

It's initializer:

1. Maps it's route hierarchy into the class accessed via application.resolve('router:main').
2. Registers it's user-visible "app name" and top-level route app route into the apps service provided by Shell.

Models

The models associated with each route are as follows:

1. shell.mail: An array of all Mailboxes present in the account.
2. shell.mail.mailbox: An array of Messages present in the mailbox.
3. shell.mail.mailbox.message: The Message with this id.

Message view

A Message should be rendered as HTML if the htmlBody property is present and non-empty, otherwise the contents of the textBody should be shown.

Safety

To keep the stylesheets separate, and avoid a whole lot of security issues, it would be necessary to heavily sanitize the html before placing it anywhere on the DOM.

There are several options being evaluated right now (in order of ease of grokking from top to bottom):

• https://github.com/cure53/DOMPurify (also being used by Fastmail, which is good to know)
• https://github.com/gbirke/Sanitize.js
• https://github.com/mozilla/bleach
• https://developers.google.com/caja/
• https://github.com/Microsoft/JSanity

Once the content is sanitized, we may wish to either put it in an iframe for maximum isolation, or directly onto the main DOM if we have sufficient confidence in the cleanup.

iframes would be tricky if we wish to use Decorators, see below.

Decorators

A Decorator is a piece of code (likely an Ember Controller) that takes a Roundcube HTML message, and returns a transformed version of it along with firing some events to inform the rest of Roundcube of the presence of the newly inserted content.

There can be many types of Decorators, for example:

• A "remote images" decorator, which scans the HTML for any images referenced on other servers, and blocks them from rendering. It then renders it's component at the top of the message, which asks - "Show remote images?" with buttons "Yes", "No", and "Always show". If the last button is clicked, it shows the images and fires an event like mail.settings.changeconfig with { alwaysShowRemoteContent: true }.
• An "calendar" decorator, which scans the message for strings that loosely match date/time information, which subsequently upon hover display a small popup widget that asks "Add to calendar?".

Note that the second thing would be a lot more difficult to do if we used an iframe to embed messages in.