How and why email code is different to web code

Both email and web use HTML and CSS to create the content and style. On their own both HTML and CSS are safe, it’s JavaScript that can cause security issues and that is not available in email only in web. Why is it ok in web and not email?

Think about how a user gets to a website, they may type a URL into the browser, or maybe do a search a click on a result. Users are actively going to the website. Email is the other way around, emails get sent to a user.

For someone to be able to do something malicious like install a virus on a users computer, the user needs to actively go to that website. If the same were possible in email then just opening an email could be very dangerous and email is an open protocol so anyone can email you. With these restrictions on email code there is still a risk, someone can send a link to the malicious website but the user still needs to click on it for there to be any danger.

So if HTML and CSS are both safe why are they much more restricted in email than they are on the web? Email code goes though an “HTML Sanitizer” which can remove or edit parts of the code. Again this is to help keep the end users safe. If we think about the example of someone emailing a link to the malicious website. Without any restrictions in place they could style that link to be positioned over the whole email client, so when the user goes to click the “mark as spam” button, they are actually clicking the dangerous link instead. This just one example but there are many security risks the email clients take into account when building these sanitizers.

One of the other big differences is consistency. If you look across web browsers they do have differences in feature support, but theses days there aren’t many. If you look across email clients these differences can be much greater. This is because each email client builds there own HTML sanitizers based on their own research, ideas and opinions meaning each one of these is a little different.

Example

If we were to take a stripped-down version of our Parcel welcome email and code it like we would code a web page we can see it has a number of issues when viewed in an email client.

Web

Photo of an email on web
Photo of an email on web

Outlook

Photo of the same email, but rendered by Outlook
Photo of the same email, but rendered by Outlook

These issues are fixable and we’ll go over them through this course.