소스가 비어있는 의문의 사이트 therickroll.com

23 Apr, 2022

글

https://therickroll.com/

이런 사이트가 있습니다. 여기에 접속하면...

Never gonna give you up

Chrome/Edge 환경에서는 아무것도 보이지 않습니다. Firefox를 사용해주세요.

chrome

edge

Rickroll 당해서 Youtube에 리다이렉트됩니다만, 이 사이트...

response nothing

왜인지 response가 텅 비어있습니다.

뭔지는 몰라도 사이트의 신비한 힘에 의해서 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 헤더 안에 하나 이상의 링크를 시리얼화하는 수단을 제공합니다. 의미적으로는 HTML 요소와 동등합니다.

https://developer.mozilla.org/en-US/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...에 가고 싶지만,

page not found

MDN에 없네요. html refresh header로 조사하니 MDN의 meta 태그가 검색되었습니다.

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

http-equiv가 HTTP 헤더 이름이므로, Refresh 헤더에서 리다이렉트 되는 것 같습니다.

테스트로 Sintra로 간단히 서버를 만들어보면,

require "sinatra"

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

redirect using Refresh

리다이렉트됐습니다.

결론

CSS나 리다이렉트 처리는 HTTP 헤더에서 일어나고 있다.
head를 보여주며 레이아웃을 만들고 있다.
MDN 있지 않은 Refresh 헤더가 있었다.
(4/22 추가) Link 헤더는 Firefox 이외에서는 동작하지 않는다.

감사합니다. 글이 좋았다면 이 영상을 봐주세요