Step 4: Third-party cookies
Learn how websites can embed resources from other websites, and the implications for cookies and privacy.
Visit the website below.
If you have not previously provided your name name on the CookieExample page in Step 2, or have deleted your cookies in the meantime, you will now be prompted for your name. You should see a heading where you are greeted by user id, and below that two boxes. The right box will greet you by the same user id, and the left one should greet you by name.
- Look at the address bar and take note of the domain name (the domain name is the portion of the URL before the path, so for example en.wikipedia.org).
- We will now use the Firefox developer tools more extensively. Click on the three horizontal bars in the top-right corner and open Web Developer > Inspector. You should see HTML code appear at the bottom of your window, similar to the code you edited in Step 2 of this class.
- You are looking at a live version of the HTML code that constitutes the website. Find the two "iframe" elements, each followed by a URL. An iframe is a way to embed one website into another. If you hover your mouse over the HTML code, Firefox will highlight the corresponding element on the page.
- Again take note of the domain names in the two URLs, and compare them to the domain name from before. Are they the same?
- One of the URLs should start with "http://vaniea.com/teaching". Open this URL by holding down the ctrl key and clicking on it. This should open a new tab.
- In the new tab, convince yourself that you are on a new website and on a new domain. How does this website greet you?
- Close the tab and go back to the first website. In the developer tools at the bottom of the srceen, switch from the "Inspector" to the "Storage" tab. You should now be looking at cookies again.
- Investigate the two cookies you see. What are their respective names and values, which domain do they come from, and what part of the website is accessing them?
- By deleting one cookie but not the other, make the website forget your name, but not your user id.
- With the developer tools still open from the previous step, switch from the "Inspector" to the "Network" tab.
- Click the Reload button to reload the page.
- You will see a table of requests sent by your browser. Above the table, change the filter from "All" to "HTML". You should now be left with three rows in the table.
- Check the Domain column of the table. You should see that two requests go to the domain you are currently on. Click on the row which has a different domain name.
- You will see a box with details open on the right. Scroll down until you get to the "Request headers" section. This section contains all the additional details your browser sent to vaneia.com when trying to load the HTML.
- Investigate these request headers and pay special attention to the "Cookie" and "Referer" field. Think about what vaneia.com now knows about you. Keep in mind that if we had not investigated this website more closely, you would not have known your browser talked to vaneia.com at all.
Questions to think about
- Iframes are only one particular way websites can embed resources. Think of other website elements that might come from different sources.
- With everything you have learned so far, can you see how the concept of "Tracking via third-party cookies" comes together?