Cloudflare Gateway
Timeline
July 2019 - July 2020
Role
Product Designer, UX Writer
Team
Mohd Irtefa, Jonathan Spies, Sieh Johnson, Lily Craver, Rex Scaria, Bob Zvala
Tools
Figma, JIRA, Bitbucket
Overview
Cloudflare Gateway protects teams from threats like malware, phishing, ransomware, crypto-mining and other security threats. I was tasked with taking our existing and wildly successful mobile application, 1.1.1.1 , and provide similar functionality for small to Enterprise size businesses. I was the sole designer on this product for a year, working cross-functionally with a team of 3 engineers and a Product manager to launch our MVP.
Problem
Many organizations experience challenges when trying to manage and secure their global networks. The root of cause of these challenges comes from existing architecture and inability to scale. Historically, branch offices sent all their Internet-bound traffic to one centralized data center at or near a corporate headquarters, passing all requests through a secure hardware firewall. This solution worked when employees accessed applications from the office, and when applications were not on the cloud.
Problems to solve
Security incidents are common
Organizations are targeted in phishing and accidentally click malware links. Those links resolve to evil sites and infect company's devices.Inconvenient setup + maintenance
Configuring a custom proxy or a firewall to block malware takes time and effort. Furthermore, manually logging port 53 for DNS logs is inconvenient.
Investigation time
You cannot protect what you cannot see. IT departments have little to no visibility into what new cloud services employees are using outside the approved ones (Shadow IT).
Solution
Cloudflare Gateway will secure every connection, from every device, to every destination on the Internet without sacrificing performance for organizations of all sizes.
potential solutions
Preventing security incidents before they happen
Gateway blocks access to malicious links by not resolving them. As a result, the company's devices stay safe from malware.Quick setup & deployment
No engineering work required. Simply update your DHCP setting or server (depending on your network setup) which does not take more than a few minutes and is easy to deploy and manage.
Proactive instead of reactive
Gateway tells the IT departments exactly what new cloud services their employees are using which saves them time.
Technology
Cloudflare has data centers in more than 200 cities around the world, meaning when a business uses Cloudflare Gateway, instead of backhauling traffic to a single location (slow), all Internet-bound requests travel to the nearest data center (fast) from the end user where Cloudflare Gateway applies security policies to protect businesses from security threats.
How does Gateway’s secure DNS filtering work?
Cloudflare Gateway adds one new step to introduce security into this flow. Instead of allowing all DNS queries, Gateway first checks the name being queried against the intelligence Cloudflare has about threats on the Internet. If that query matches a known threat, or is requesting a blocked category, Gateway stops it before the site could load for the user - and potentially execute code or phish that team member.
Research
Who are we designing for?
We have 3 core users, all who are part of a security team within an organization. Below we outlined their needs and key asks.
As the Director of Security, I want to block access to links that contain Malware. For example:
Matthew receives a malicious PDF in the form of a Whitehouse event invitation. When he opens it, it calls out for second stage malware, but thanks to our FireEye ThreatIntel feed, it is redirected to our sinkhole and alerts us.
As the Chief Security Officer , I want to be informed if my team’s devices are infected by malware. Additionally, I would like to see DNS logs to observe aberrant behavior.
As the IT network admin, I want to automatically block access to malicious links from employees' laptops. My biggest fear is unwanted code coming in by clicking on the wrong link.
Here are a few photos of brainstorming sessions between my Product Manager and Engineering Manager. From these, we gained an understanding around what features we wanted to focus on for our MVP launch.
Explorations
For our MVP launch, we wanted to focus on 4 key user flows:
A user can configure and secure a physical entity like a home office or HQ through Locations.
A user can create rules that prevent security threats from being accessed by their employees when at the physical location through Policies.
A user can gain high level insight into their network traffic through Analytics.
A user can monitor potential security risks and deep dive into traffic happening throughout their organization through Logs.
Gateway user flow
Once we had an idea for how our users would be interacting with Gateway, I started explorations around visualizing this experience using Cloudflare’s existing component library.
These explorations were focused around maintaining Cloudflare’s core identity, exploring horizontal versus vertical navigation, and ironing out key user flows to make first time setup a seamless experience.
Testing
We conducted a variety of tests with with members of Cloudflare's InfoSec and Detect and Response teams. Here are the key takeaways:
General
Positive feedback on look and feel
1 request for custom block pages -- this is out of scope for MVP
Ability to prioritize Policies (1-Default policy, 2-Malicious Sites, etc.)
No problems with wayfinding observed
Analytics/Overview
Understood the chart data and are able to demonstrate their usefulness without prompting
Instinctively clicked on charts to drill down to Activity Log and were comfortable with where they landed -- able to connect what they saw in chart data to the filtered Activity Log
Most people would focus on Top Blocked Domains and Blocked requests data first
Most people would explore Allowed requests further if there were spikes at odd hours
Request to see more fine-grained data points (5 min) in charts because DNS is so frequent -- currently we’re only displaying hourly data points at the minimum
Where we landed
Gateway launched in March 2020 with 4 key experiences, outlined below. The Product Manager for Gateway wrote about our launch in this blog post.
Locations
Locations are physical entities like offices, homes, retail stores, movie theaters or data centers. The fastest way for our users to start sending DNS queries from a location and protect it from security threats is by changing the DNS resolvers at the router and direct them to Cloudflare’s IP addresses. to the dedicated IPv6 addresses for those locations.
Policies
A policy is a set of rules you can set up and then assign to a Location you’ve created. Through Cloudflare Gateway's policy engine, you can filter traffic by:
Security threats (malware, phishing)
Content categories (adult content, parked domains)
Manually blocking or override domains, IP’s, and URL’s in a custom list
When setting up a policy, you can also enable additional settings such as SafeSearch or YouTube Restricted Mode.
Once a domain, IP, or URL is blocked, IT admins can show a Gateway Block Page or a generic browser error.
Activity Log
The Activity log allows our users to see individual DNS queries made from their locations. Typically, our users come to the Activity log to investigate anomalies in their network.
Since there are potentially thousands of requests, we added a filter and search option for users who may need to triage and troubleshoot a particular item, such as a blocked request during a certain time period.
Request data for each query gives information about the particular request, such as which location it came from and which Policy blocked/allowed this request.
The category card helps our users understand which category this domain is reported under. False positives and miscategorization is common, so we added a way for customers to report this type of error to us from the logs.
Block page
When trying to visit a blocked website, users will see a default browser error page.
This is because Gateway responds to any blocked domain with 0.0.0.0, and does not return the blocked domain's IP address. As a result, the browser cannot take the user to that website.
However, this may be confusing for some people, as they may think that their Internet is not working.
To remove this confusion, you can configure Cloudflare Gateway's block page to explain to the end user why a website is being blocked.
Onboarding
To begin getting value out of Gateway, the first step is routing your DNS queries through Cloudflare. We decided to include this in our onboarding flow to give users instant feedback. By prefilling their IP address based on their current physical location. This also prevents bad actors from using others IP addresses to take control of their network traffic. The final step is configuring their DNS resolvers to point to Cloudflare’s.
1. Welcome to gateway!
3. Location IP address
2. enter your location name
4. Configure your DNS resolvers
COVID-19 impact
To ensure that small businesses with employees working from home could enable their teams to operate securely and easily, Cloudflare offered Cloudflare for Teams for free for up to 6 months.
Since Gateway launched about a month before COVID-19 hit the US, we had to pivot rapidly to account for everyone working remotely. Locations were no longer a key factor in how our users were securing their network. Administrators were interested in securing their end-users devices, such as laptops and mobile phones.
DoH in Gateway
To support remote work, the Gateway team launched DNS over HTTP (DoH) in Gateway. Instead of asking users to point their physical locations IP address to a Cloudflare-given IP address, they would use a unique URL provided by Gateway.
When DoH is active, a user’s data is encrypted and hidden within the enormous amount of HTTPS data which passes through a network.
Device management in Teams
In October 2020, we introduced the WARP Teams Client as a way for organizations to use Gateway to secure and manage users devices.
Regardless of a users’ location, all traffic from their device is encrypted with WARP and sent privately to the nearest WARP endpoint. This keeps users and organizations protected from whomever may be snooping.
Sy Karim, another designer on my team, was in charge of designing the experience of the Teams Client, and we partnered closely to understand the partnership for how users can configure the their Devices in Cloudflare for Teams.
