Did you know CSS can change content & track users?

dolphin.style is a stylesheet that replaces your site's content with dolphin facts while also tracking you.

Try using it:

<link href="https://dolphin.style/style.css" rel="stylesheet">

or use this one-liner to add the tag via DevTools:


                        document.head.appendChild(Object.assign(document.createElement('link'),{href:'https://dolphin.style/style.css',rel:'stylesheet'}));

Try it on Wikipedia, BBC, this,

How does it work?

Changing the content

You can use CSS to visually "hide" the existing content of an element by setting its font-size and line-height to 0, effectively making the text invisible. Then, you can use the ::before pseudo-element to display new content with a defined font-size and line-height. This approach gives the illusion that the content has been "replaced."

Combine that with some :nth-of-type() magic and you're able to control the whole page. Wanna play around with it? Check out this codepen.

How does it work?

Tracking

By default, browsers send a referer header when requesting a CSS file. Combined with the IP address and the user-agent, a cross origin CSS file will be able to track you across different domains.

Once you have added the style sheet to several sites, you will see here which sites you your IP address has visited:

Type	Domain	Timestamp	User agent
visit	https://dolphin.style		This browser

Avoiding tracking

You can easily prevent sending referer headers by setting your referer policy to no-referrer. However, if your web application relies on this header for some reason (contextual redirects, analytics,…), strict-origin might be a better choice. The easiest way to set this is with a meta tag:

<meta name="referrer" content="same-origin">

Setting the referer policy could also be done per stylesheet with the referrerpolicy attribute:

<link href="https://dolphin.style" referrerpolicy="same-origin" rel="stylesheet>