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

It shows this on Firefox...

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

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

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.

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

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 */
}

Wow, head tag can be visible by using display: block.
Next, Refresh header...

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

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

Blog

The Mysterious empty page: therickroll.com

Nanashi.

How is this page working?

Conclusion

Join Our Newsletter. No Spam, Only the good stuff.

Related