Outlook Add-in — Office.js + Angular + Validate Sender email address

In many organisation, people receives phishing emails with company’s name tweaked/changed a bit so to look original. As a human being its very easy to ignore such small change(s) and people ends up responding to such phishing email. In this story we will see an add-in which validates selected email address against hard coded domain name. If selected email is safe then a notification message will be displayed on top of the email otherwise a warning will be displayed.

For example you are working in an organisation and your official email address is “sherlock-homes@smart-detectives-technologies.com”. Now you can get an email from an address “dracula@smart-detecctive-technologies.com”. On a quick look email address looks good and you will just respond to email.

To avoid such scenarios, I have built an Outlook add-in using Office.js and Angular framework called “validate-sender”. What this add-in does is, it check the sender’s email address and validate against the hardcoded domain name.

Understanding code

You can find complete source code on GitHub. Clone the repository and install the packages using command npm install. Open source code in VS Code or any of your favourite IDE.

In commands.ts` file You can put your organisation’s email address in VALID_DOMAIN_NAME variable.

When Add-in is executed from Outlook, “action()” event handler is called. In this method, we can extract sender’s email address using Office.context.mailbox.item.sender.emailAddress property. We will show a notification on top of the selected email if sender is safe or not.

For demonstration, we will keep gmail.com as a VALID_DOMAIN_NAME. Build the project for production by running command. There are different commands also available for development, debug environment. You can find list of those commands in package.json file.

npm run build

As an output of this command dist folder will be created. Publish this dist folder to your web server e.g. Azure, AWS or any hosting. If you are looking for free hosting for playing around then you can use surge.sh.

Once dist folder is deployed on web server, update manifest.xml file. This is a metadata file which contains the URLs of hosted web application and add-in metadata. Replace https://validate-sender.surge.sh web address to your hosted web address.

Using Add-in in Outlook Web

In Outlook web, start composing a new message and click on three dots button (…) as shown in below image and select “Get Add-ins”.

When a dialog box appears, on left side click on “My add-ins” and click on “Add a custom add-in” button and select “Add from file” as shown in below image.

In file selection dialog, select manifest.xml file and click on Open. Follow the steps to install add-in.

Now select any email in your Outlook and click on three dots menu button (…) in front of it. You should see newly added add-in validate-sender at the bottom of the menu.

Select any email message and click on the validate-sender option and if sender is from gmail.com domain then you will see Sender is safe message as shown below.

And if sender is not from gmail.com domain then you will warning message as shown below.

Note that right now Office.js Add-in cannot be run on startup or automatically. There is a “Pinnable Task Pane” feature which can be used as a secondary option.

Complete source code can be found here.

Here is the MSDN link for creating Outlook add-in using office.js

Cheers!

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store