というサイトがあります。アクセスすると…
4/22追記：
ChromeやEdgeだと何も表示されないようです。Firefoxを使用して下さい。
RickrollされてYouTubeにリダイレクトされるだけのサイトですが、実はこのサイト…
なぜかレスポンスが空っぽです。
どうやらこのサイトは謎の力によってRickrollされているようです。
いかがだったでしょうか？謎の力、すごいですね。ありがとうございました。
種明かし
ごめんなさい。
というわけでまともに書いていきたいと思います。
とりあえずhttps://therickroll.com/をもっと調べてみます。
（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
linkヘッダを調べてみると、
HTTP の Link エンティティヘッダーフィールドは、 HTTP ヘッダー内の 1 つ以上のリンクをシリアル化する手段を提供します。意味的には、 HTML の 要素と同等です。
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…と行きたいところが、
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
リダイレクトされました。
結論
- CSSやリダイレクト処理はHTTPヘッダーで行っている
- headを表示してレイアウトを作っている
- MDNには記載されていない
Refreshヘッダーがあった - （4/22追記）
LinkヘッダーはFirefox以外では動作しない
ありがとうございました。もしよければこの動画もご覧ください。