Phishing with Progressive Web Apps and User Interface Manipulation.
Introduction-img
1. Manifest file - The manifest is a JSON file that provides metadata about the web application. It allows the application to be installed on the user's home screen.
2. Service Worker - a script that the browser runs in the background. It is used to enable offline features, push notifications, and background sync.
3. HTML file - The main HTML file bundles the manifest and registers the service worker.
4. Styles and scripts - any additional CSS and JavaScript files for the correct operation of PWA.
Needless to say, this scenario can be adapted for any company other than Microsoft.
Step 1
Step 2
Step 3
Step 4
You can download the source code from the link - https://disk.yandex.com/d/_tDRyXhg8V40uw
Introduction
Progressive Web Apps or PWAs are apps built using web technologies (e.g. HTML, CSS, JavaScript) that can be installed and behave similarly to native apps. PWAs integrate better with the operating system (i.e. they have their own app icon, they can send push notifications) and therefore can increase website engagement. The problem with PWAs is that it is possible to manipulate the user interface for phishing purposes, which we will cover in this blog.
Introduction-img
PWA Requirements
Before we show you an attack scenario using a PWA, we need to understand how to create one. Feel free to skip this section, as I provide a working template on my GitHub for testing at the end of this post. At a basic level, a PWA requires the following files:1. Manifest file - The manifest is a JSON file that provides metadata about the web application. It allows the application to be installed on the user's home screen.
Code:
{
"name": "Microsoft Login",
"short_name": "Microsoft",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}2. Service Worker - a script that the browser runs in the background. It is used to enable offline features, push notifications, and background sync.
Code:
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1').then((cache) => {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/app.js',
'/images/icons/icon-192x192.png',
'/images/icons/icon-512x512.png'
]);
})
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});3. HTML file - The main HTML file bundles the manifest and registers the service worker.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.json">
<title>Example PWA</title>
</head>
<body>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then((registration) => {
console.log('Service Worker registered with scope:', registration.scope);
}).catch((error) => {
console.error('Service Worker registration failed:', error);
});
}
</script>
</body>
</html>4. Styles and scripts - any additional CSS and JavaScript files for the correct operation of PWA.
Attack scenario
Now that we understand how a PWA file is created, we can start using it for phishing. We will perform the following attack scenario:- The victim gains access to a website controlled by the attacker.
- The victim clicks the “Install Microsoft app” button.
- A pop-up window appears in the browser asking the user to install the application. We can name our application whatever we want, such as “Microsoft Login” or “login.microsoftonline.com”. Keep in mind that our real domain name will be listed below it in a smaller font.
- The victim installs the application.
- Once installed successfully, redirect the PWA window to a phishing page with a fake URL bar attached at the top of the page.
Needless to say, this scenario can be adapted for any company other than Microsoft.
Step 1 - Setting Up Your Landing Page
We start by creating our landing page with an “Install Microsoft App” button.
Step 1
Step 2 - Installing the application
When the “Install Microsoft App” button is clicked, the user is prompted to install our PWA app.- The name of the application is “Microsoft Login".
- The Microsoft logo is our application icon, which is set in the manifest file.
Step 2
Step 3 - Redirect
After the application is successfully installed, redirect the user to a phishing page with a fake URL.
Step 3
Phishing demonstration
The demo below performs the previously mentioned steps, but instead redirects users to a fake Microsoft phishing page that stores credentials.
Application icon
Note that the app icon has been replaced with the Microsoft logo, making it look more realistic.
Step 4
Conclusion
As we have seen, PWAs open the door to UI manipulation that can trick users into believing they are on another website. This method clearly has some drawbacks, such as requiring the target user to install the app. Also, the PWA window briefly displays the actual domain name in the top right corner. However, I believe that people’s habit of checking the URL bar will lead them to ignore this domain name (this requires security awareness).You can download the source code from the link - https://disk.yandex.com/d/_tDRyXhg8V40uw
