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 . Open source code in VS Code or any of your favourite IDE.

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

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

For demonstration, we will keep 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 file.

npm run build

As an output of this command folder will be created. Publish this 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 folder is deployed on web server, update 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 file and click on . 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 at the bottom of the menu.

Select any email message and click on the option and if sender is from domain then you will see message as shown below.

And if sender is not from 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


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