The case of the unfriendly piece of text

🍿 2 min read • November 24, 2020

Thanks to wh0 for making this crazy puzzle!

Anyways, when you visit https://unfriendly-text.glitch.me/ on Google Chrome, you will see a message saying "(Chrome users can't see it lol)"

which is odd because when you visit it on firefox, you will see a message that looks like this:

Ok, but why is that? Well when you visit the site and see the headers, you might see that there is a Link header. Now, according to the MDN docs,

The HTTP Link entity-header field provides a means for serialising one or more links in HTTP headers. It is semantically equivalent to the HTML element.

meaning, it can load stuff like a <link> tag would, like loading stylesheets. Now what does this link header look like?

link: <data:text/css;base64,[DATA]>; rel="stylesheet"

Let's Break it down:

The data:text/css;base64, part means to understand the following data after that is a base64 URL and to interpret that data as a CSS file
The [DATA] part is base64 encoded data, and I replaced it with [DATA] because base64 encoded data can be a bit, long.
The rel="stylesheet" means to interpret the URL (in this case the base64 encoded data) as a CSS stylesheet, applying it to the document

Now the reason this puzzle only works on Firefox is because Firefox seems to be the only browser that supports the Link tag.

Lets Decode this URL and see what it looks like:

/*
Okay, you found this stylesheet.
But this just raises more questions.
Where did this stylesheet come from?
*/
p {
  display: none;
}
body::after {
  content:
    "Although this is properly a piece of text and not an image, it's fiendishly unfriendly.\A \A "
    "I can't select it, so how am I supposed to copy it? "
    "It's not like this is some high literature. I mean what are they even trying to protected it from?\A \A "
    "And view source isn't helping either. How is it even here?\A \A "
    "Arrrgh ðŸ˜«";
  white-space: pre-wrap;
}

Do you see that content rule? That's how the text is changed. But, why can't you select it? That same content rule can be used for preventing people from selecting text. Also, if you don't have firefox and want to see that, I went ahead and put the code together on JS Bin here and you can view the source here. Infact, I went ahead and setup another server on Glitch! You can see it here!

Thanks for reading!