Personal Data and External Resources - How risky can a cloud-hosted style sheet be?
Introduction
Website Basics and CDN
A website usually consists of a front-end and back-end. The front-end usually consists of the look and feel as well as the sending of data to the back-end. The look and feel for the front-end are usually done by HTML and CSS. The HTML defines the page skeleton whereas the CSS is concerned with the style of the page. A lot of times, people use CSS style-sheets available on the internet. These are usually hosted on a CDN (Content Delivery Network). A CDN consists of various servers on different locations on Earth which contain the same data. The data required is served to you by the functional server closest to your location. This helps reduce load on the website back-end as well as make the website loading time less (usually).
Requests and IP addresses
When one connects to the Internet, they are given an IP address by their Internet Provider. The IP address they receive is unique in the internet but may be shared by the devices in the same house/area. When the website requires a style-sheet or any resource from a CDN, it sends a request to the CDN via your browser with a referrer header containing the website link. The request sent contains a lot of your data such as your IP address.
Setting up the lab - The Basic
To find out what all data can be received by the CDN, we can conduct a small experiment.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lab</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Saving the above code as index.html will lead to a simple webpage with a Hello World displayed on the page. Next we proceed to add a CDN. For this lab, I would be using the Bootstrap CDN.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
Upon adding the <link> tag with the Bootstrap CSS link, if the CSS is loaded correctly, upon refresh the Hello World will look different.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Lab</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Setting up the lab - IP Grabbing
The next step is to shorten the link and replace it with an IP and Data Grabbing link. This step is not necessary if you own the CDN server as you could put the IP and Data Grabbing Code directly on the server.
To create the link, I will be using IP Logger.
After pasting the link and getting the IP Logger Code, a page as such opens:
I have hidden a few links for privacy purposes.
The link in green has to be used now instead of the original bootstrap link. After the changes, the code looks as such:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://iplogger.org/2hUNj6" rel="stylesheet">
<title>Lab</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Running the experiment
Upon opening the HTML page now, the look of the page remains the same. But, upon clicking on the Logged IP tab on IP Logger, we see our IP address as well as Device Data there:
Data such as Date and time, IP address, Estimated Location as well as device and browser data is sent to the server. If we host our page on the internet, the referring pages data would have the website URL.
To try the same, the HTML code can be hosted on your device via a tool named XAMPP and can become publicly accessible by using ngrok.
After accessing the ngrok link, we see the following in our Logged IP tab
By this we can draw a conclusion that a CDN may collect your personal data as well as referrer data if it wants to. But now comes the main question. How can it identify each and every device properly and what type of data can it collect?
Data Collection and Privacy
Data Collection
Data such as pages visited can easily be collected. CDN owners may use cookies to identify your device and collect more information about your browsing habits.
Data Analysis
Data such as which topics interest you the most can be found out by analyzing your web traffic filtered out by cookies. This data can also help determine website ranking and gain insights on user interaction.
Privacy
Various countries such as UK and USA have laws such as GDPR and CCPA to help promote transparency as well as how the data may be collected and used.
Conclusion
As a website/CDN owner, make sure all the external resources are compliant with various laws and make sure to add a Privacy Policy regarding the same on your website as well
As a general user, make sure to check out the Privacy Policy of a website and to avoid sites which do not have one