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 “email@example.com”. Now you can get an email from an address “firstname.lastname@example.org”. 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.
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.
commands.ts` file You can put your organisation’s email address in
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
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.
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.
In many organization, people receives phishing emails with company's name tweaked/changed a bit so to look original. As…
Here is the MSDN link for creating Outlook add-in using office.js
Build your first Outlook add-in - Outlook Developer
Learn how to build a simple Outlook task pane add-in by using the Office JS API.