(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...
(This page doesn't show anything on Chrome or Edge.)
You will get rickrolled and redirect to Rickroll video, but there is a magic.
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.
There are some sus headers.
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 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:
/* ... */
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...
MDN doesn't know about this.
So I made a small server that serves page with Refresh header...
require "sinatra"
get "/" do
headers "Refresh" => "5; URL=https://example.com"
"Hi!"
end
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
Top comments (0)