ソースが空の謎のサイト「therickroll.com」

https://therickroll.com/

というサイトがあります。アクセスすると…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659894/c0ae34c9-f97e-c927-1a4b-17293ba8665c.png)

4/22追記：
ChromeやEdgeだと何も表示されないようです。Firefoxを使用して下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659894/29094ef2-ef7a-a801-bb86-6ee82e60e5db.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659894/7adeffe3-9d9a-5800-b7ef-48248371f89a.png)


RickrollされてYouTubeにリダイレクトされるだけのサイトですが、実はこのサイト…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659894/c6f4bfad-532c-8251-006e-3dc1811314d9.png)


なぜかレスポンスが空っぽです。
どうやらこのサイトは謎の力によってRickrollされているようです。
いかがだったでしょうか？謎の力、すごいですね。ありがとうございました。
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

# 種明かし

ごめんなさい。
というわけでまともに書いていきたいと思います。
とりあえず`https://therickroll.com/`をもっと調べてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659894/3671bead-0dac-f959-63f5-5dd38ca91ab6.png)
（repl.itでホストされているのか…）
怪しいヘッダがいくつかありますね。
```diff_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
```
`link`ヘッダを調べてみると、
> HTTP の Link エンティティヘッダーフィールドは、 HTTP ヘッダー内の 1 つ以上のリンクをシリアル化する手段を提供します。意味的には、 HTML の <link> 要素と同等です。
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Link

Linkヘッダでstyle.cssを適用させていたようです。
style.cssを覗いてみると、
```diff_css
/* ... */
head { 
+  display: block;
+  background-image: url(https://media.giphy.com/media/Ju7l5y9osyymQ/giphy.gif);
  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;
+  content: "Never gonna give you up...";
}
```
headを表示させて要素を追加している様子。headって`display: block`で表示できたんですね。

次は`refresh`…と行きたいところが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659894/09cd5af1-dd13-6bff-840b-e479a8f2eaf6.png)
MDNに載っていませんでした。`html refresh header`で調べたところ、MDNのmetaタグがヒット。
```html
<head>
  <meta http-equiv="Refresh" content="0; URL=https://example.com/">
</head>
```
`http-equiv`がHTTPヘッダーの名前なので、`Refresh`ヘッダーでリダイレクトが出来るようです。
試しにSinatraで簡単なサーバーを立ててみると、
```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)

リダイレクトされました。

## 結論

- CSSやリダイレクト処理はHTTPヘッダーで行っている
- headを表示してレイアウトを作っている
- MDNには記載されていない`Refresh`ヘッダーがあった
- （4/22追記）`Link`ヘッダーはFirefox以外では動作しない


ありがとうございました。もしよければ[この動画もご覧ください。](https://www.youtube.com/watch?v=dQw4w9WgXcQ)