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

10813 ワード
テキストリンク

https://therickroll.com/

というサイトがあります。アクセスすると…
image.png

（ChromeやEdgeだと何も表示されないようです。Firefoxを使用して下さい。）
image.png
image.png

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

image.png

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



























種明かし

ごめんなさい。
というわけでまともに書いていきたいと思います。
とりあえずhttps://therickroll.com/をもっと調べてみます。
image.png
（repl.itでホストされているのか…）
怪しいヘッダがいくつかありますね。

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

（diff httpだとうまくハイライトされなかったのでインデント）
linkヘッダを調べてみると、

HTTP の Link エンティティヘッダーフィールドは、 HTTP ヘッダー内の 1 つ以上のリンクをシリアル化する手段を提供します。意味的には、 HTML の <link> 要素と同等です。
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Link

Linkヘッダでstyle.cssを適用させていたようです。
style.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
MDNに載っていませんでした。html refresh headerで調べたところ、MDNのmetaタグがヒット。

<head>
  <meta http-equiv="Refresh" content="0; URL=https://example.com/">
</head>

http-equivがHTTPヘッダーの名前なので、Refreshヘッダーでリダイレクトが出来るようです。
試しにSinatraで簡単なサーバーを立ててみると、

require "sinatra"

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

dist.gif

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

結論

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

ありがとうございました。もしよければ

Lambdaで開発をする時に気をつけるシリーズ④
Tailwind CSSを安全に上書きして補完・ソートもできる自作関数を作ってみた