DEV Community

Nanashi.
Nanashi.

Posted on

The Mysterious empty page: therickroll.com

#http #html

(First, I'm not native of English, so I'm writing weird English in this article.)

Do you know https://therickroll.com/ ?

It shows this on Firefox...
image.png

(This page doesn't show anything on Chrome or Edge.)

You will get rickrolled and redirect to Rickroll video, but there is a magic.

image.png

There is no code! This page is literally no code page, so this page is using magic. Nice page. Thank you for reading this.

　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
　
JK, I'll be serious.

How is this page working?

Let's inspect about this page.
image.png

There are some sus headers.

HTTP/1.1 200 OK CF-Cache-Status: DYNAMIC CF-RAY: 6ff556570fa88391-KIX Connection: keep-alive Content-Encoding: gzip Content-Type: text/html; charset=utf-8 Date: Thu, 21 Apr 2022 10:11:44 GMT NEL: {"success_fraction":0,"report_to":"cf-nel","max_age":604800} Report-To: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=GrBx1yPeepXgmC80kPvO%2FJifLZdr00XV4tNbsjbYvSKd15G0RHWyQszRg%2BvFSobq7vn%2BH6bHyy%2BJghZllmYCF9fA5OM9%2B89Fnv1eDfJoU4esecj1xZBDh9yaCOviUXPn8WTvTDd3h4D1fijkvqk%3D"}],"group":"cf-nel","max_age":604800} Server: cloudflare Transfer-Encoding: chunked alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400 expect-ct: max-age=2592000, report-uri="https://sentry.repl.it/api/10/security/?sentry_key=615192fd532445bfbbbe966cd7131791" 　 　　link: <style.css>; rel=stylesheet; 　　refresh: 5; url=https://www.youtube.com/watch?v=dQw4w9WgXcQ 　 replit-cluster: hacker
Enter fullscreen mode Exit fullscreen mode

First, Link header. MDN says:

The HTTP Link entity-header field provides a means for serializing one or more links in HTTP headers. It is semantically equivalent to the HTML element.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Link

It looks this page is applying CSS with this header. style.css contains:

/* ... */ head { /* magic #1 */ display: block; background-image: url(https://media.giphy.com/media/Ju7l5y9osyymQ/giphy.gif); /* end of magic #1 */ height:20rem; width:20rem; background-repeat: no-repeat; background-size: cover; border: 5px solid #fff; border-radius: 10px; border-style: dashed; } body::before { display: inline-block; padding-top: 3rem; /* magic #2 */ content: "Never gonna give you up..."; /* end of magic #2 */ }
Enter fullscreen mode Exit fullscreen mode

Wow, head tag can be visible by using display: block.
Next, Refresh header...
image.png
MDN doesn't know about this.
So I made a small server that serves page with Refresh header...

require "sinatra" get "/" do headers "Refresh" => "5; URL=https://example.com" "Hi!" end
Enter fullscreen mode Exit fullscreen mode

dist.gif

It redirected me.

Conclusion

  • HTTP Header is applying CSS, and redirecting user.
  • This page makes layout with head tag.
  • There is a header that is not on MDN: Refresh

Thank you for reading this. Watch this if you like <3

Top comments (0)