The Mysterious empty page: therickroll.com
Tags: http, html
Published: 2022-04-21 21:48:31

(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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659894/c0ae34c9-f97e-c927-1a4b-17293ba8665c.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659894/c6f4bfad-532c-8251-006e-3dc1811314d9.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659894/3671bead-0dac-f959-63f5-5dd38ca91ab6.png)

There are some sus headers.
```http
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 <link> 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:
```css
/* ... */
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...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659894/09cd5af1-dd13-6bff-840b-e479a8f2eaf6.png)
MDN doesn't know about this.
So I made a small server that serves page with `Refresh` header...
```ruby
require "sinatra"

get "/" do
  headers "Refresh" => "5; URL=https://example.com"
  "Hi!"
end
```

![dist.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659894/8397c468-412a-4808-502f-aa6330aa5b7f.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](https://www.youtube.com/watch?v=dQw4w9WgXcQ)