This Website has No Code, or Does it?
ฝัง
- เผยแพร่เมื่อ 3 มิ.ย. 2021
- In this episode we'll explore the world of HTTP and CSS to hide some code.
⭐ Code: github.com/PwnFunction/Blank-...
✨ Info
➜ Tools used are: Adobe Animate, Adobe Premiere Pro, Adobe Illustrator & Audacity.
➜ VSCode: Monokai Pro Theme, Dank Mono Font.
➜ Video Production time: 40-ish hours.
➜ 4 Redbulls were consumed.
💬 Discord: / discord
🐤 Twitter: / pwnfunction
🎵 Track: Lost Sky - Dreams
NCS link: • Lost Sky - Dreams | Tr...
Hey! Vsauce, Michael here.
I just assumed y'all use view-source but apparently not. Everyone's rockin with devtools. I'm sorry, forgive me senpai
Hey Pwn how you make such amazing TH-cam logo 🔥 thanks
@@gokupwn I draw in Adobe Animate :)
What did it cost?
Tickled a problem that never was a problem and learned something new
@@RohithkannaDuraiswamy everything...
And thus began the bodyless architecture era!
State of the art requires a headless server on the back-end 👌
Third
Frontend technological progress in a nutshell
@@miigon9117 Is it? I've been doing systems programming for a while. Is this actually representative of frontend web dev now? Lol
No no nooooooooo!
the thing is that opening devtools is actually *easier* than "viewing page source" and much more effective and wholistic. I have no idea who in their right mind who can read code would want to view the source itself
It's easier to hit ctrl+u than disabling js in devtools if you don't want javascript to modify the page.
i only ever view source so i can rip the page
I prefer to inspect, so I can just jump to the part I'm looking at.
Ctrl + f
Holistic
Have to add another check to my rickroll detector extension now.
Wait, you make it? Can you give it the link of the extension
@@electrical-420 ... to not get rickrolled?
@@electrical-420 read my comment
@@electrical-420 Its a meme its fun its just a joke, if you dont understand it, your problem.
@@electrical-420 :D
7:55 I never use 'View Source'. I always open dev tools 😂😂😂
Me too
@@philosuit Same here
perhaps he meant the opposite 😆
Yes
Same, especially Applications
Frankly, I find using devtools/inspect element easier than view source, precisely out of laziness. The code is often better formatted (especially if the webdev used some JS HTML auto generation or had a HTML obfuscator written in JS) and I can easily get to referenced files such as JS and style sheets, not to mention that I can play with the site's code in real time if I try to learn something or doing a pentest.
also auto-pretty-print is nice
@@random_person_i_guess Yes.
And it’s generally on a keybind, whereas you need at least 2 clicks for page source.
@@nobleradical2158 Ctrl+U
I honestly can't remember the last time I used "View source". It's probably been at least a decade. I'd actually forgotten it was even a thing.
Was kind of nostalgic to hear someone talking about it. I associate it with web-dev in the days before Chrome. Open up IE5 (or whatever it was), right click, roll my ball mouse on over to "view source", wait a few seconds for Windows XP to do some thinking, and you've got a beautiful screen full of inline CSS/JS for no reason.
What you dont realize, my friend, is that "wasting of time" you speak of is actually an excellent lecture. I am a web dev myself but really, this video is great. Made me laugh and, at the same time, although I know the technical staff you mentioned, made me learn in a way.
Bruh I had a lab work about disabling ability to view source code. If only this video came month earlier I'll be the coolest kid
Truly bruh moment
The old way is the give each line a leading 10x TABs. That really fooled me once. A much smarter way than hiding is obsfuscating, and I seem to disagree with pwnfuction here. You can obsfuscate the actual source code by using the RTL and LTR entities in the code itself. The code will run fine, but does confuse the validator, though.
@@chomo54andbabyaisha97 well, I've just disabled right-click menu through js and it worked
Чел, ты...
Не "I'll be", а "I would've been", учи английский. 🤦♂️
@@R1ch4rd хуя ты хейтер, онгличане выше ничего не заметили и по делу отвечали ;)
view source code is kinda useless, almost all modern websites serve content with javascript so the source code is very minimal.
@Suryavansh Jaggi wait wut?
Noob website builders can easily be exploited with there unsecure source code, it's very useful lol for hackers
Inspect element is also good for Hackers because they can edit there cookie's but that doesn't really matter anyways because burp suite exist 😂
@@bluezmodz9701 wut?
@@PhilMinecraft Im talking about noob website programmers make unsecure code you can easily exploit it viewing the source code is useful for a hacker
I think I've opened "view source" like twice in my lifetime. The dev tools, on the other hand, I open all the time.
So... There's that.
my thoughts exactly
Ctrl+U bro
@@unperrier5998 why tho?
@@Zack_Taylor so you see the original html + JS code, not the DOM view that has been processed by the JS code and your extensions.
Don't get me wrong, I'm not saying not to use dev tools but that both are useful.
In order to use the dev tools on the page, you'd end up getting rickrolled though
9:35 You can see the code easily in the "Style Editor" tab
what about chrome user here and Mac haters?👀
@@PhilMinecraft if the browser is not firefox, it redirects you to the song video on youtube
@@DonLarryTT nice algorithm!
The animations getting better and better every video. Love it
I love how this Chanel answers useful questions that impact everyone’s JavaScript experience and is very professional (/s)
/js
Very high quality, you're great!
7:51 I don't use the "view source code" feature anymore, for that I almost exclusively use the DevTools.
...because if I hover over an element in the DOM explorer inside the DevTools it will be immediately highlighted in the actual page as long as the cursor stays on top of the DOM element.
it's not a waste of time for CTF designer, well it's contradicting if u think attacker are lazy, lmao we just minimalistic ;D
I know about those who administer automated attacks, and they are lazy af. Just look at the code for those bots, haven't been updated since IE6. I only began to see some thing "moving" there withing the last year. The thing is, they are also efficient. They do not change as long as things work for them.
Bruh the trick to hide the key in headers is older than you
Well I would definitely go to dev tools BEFORE going to the stove code but this is awesome! Where did you deploy your app btw?
Cool... Although inspect element still works. Still cool how you managed to insert a stylesheet using the headers, and took advantage of the browser's behaviour that automatically fills in a header and body element even when the page is blank. 😉
Edit: 7:56 Tbh, I didn't think anyone still used view source. I _only_ use the dev tools.
Love this casual style dude, keep it up 👍
Great video! Web shenanigans are always enjoyable to learn about. Btw, Demon King Academy is some good stuff
Would love a video where you manually obfuscate some code and go bonkers
@DIG MC It's actually pretty easy. There's a really good site out there, just google js obfuscator.
btw the title is supposed to be: How this website hides its code.
"how the website hides; it is code"
totally kidding btw
my bad, fixed, thanks.
This is becoming my favorite coding channel. Lit content
Content quality is pretty awesome...
Keep it up 🙂
An easier way to do this is to not fiddle with obscure headers, but instead return a redirect HTTP status code, such as `308 Permanent Redirect` followed by the `Location` header. This *is* part of the spec and supported (by standard) by all web browsers.
This is actually more valuable than some people are giving it credit for. This would still throw off a lot of scrapers because the elements aren't attached to the active DOM.
Yo PwnFunction - your tech-brilliance rox and is so humbling yet helpful. Your erudite skills are much appreciated. I admire your honesty when you state, “wow this was a waste of time“… But clearly it was not a waste of time; you demonstrate to us, your viewers, that some endeavors “are not profitable to the kingdom“, leading one down a dark deep rabbit hole, but it helps us on our end stinks so that next time we shelf a research product because we sense that it may produce nothing. That is a valuable skill set, which is only derived from seasonal experience. Clearly you possess this but are willing to be vulnerable for the sake of educating us. Thank you PwnFunction!
Nice video, keep up the research. Look forward to the next one.
Excellent demo! If you learn something, it's never a waste of time. I use DevTools all the time when testing web apps, by the way. There are a few of us weirdos out there.
you can actually get the url link and save it as a variable anytime someone opens your website in js and then look for the start of the url with split function and if it matches view-source then redirect or replace the html content to be empty
JavaScript doesn't run in view-source tabs lmao
Love these kinds of videos!
An absolute masterpiece, thank you
"HTTP protocol"
Ah, yes, redundant abbreviations. You are essentially saying "Hypertext Transfer Protocol Protocol".
I do tech support, you want to guess how many times I've heard someone refer to their NIC card?
Now, if you'll excuse me, I'm going to the ATM machine to get some $$ ;-)
@@AsmodeusMictian Are you going to enter your PIN Number? :P
@@Manabender how else do you use it :D
smh my head
@@Manabender pin number sounds more natural most of the time 🤷♀️
Fun fact: There is a "Location:" header that redirects when you open the site
And it's a very useful one
Most browsers disable too much redirection via this header though. Best way to go about it is have the redirection done on the server, make a reverse proxy or download the page content, cache it and serve it on request.
The old Opera
@@chomo54andbabyaisha97 chromium do it in 2 steps to when you make a request the server will respond with 301 and there will be a location header in the response which is the new uri who will then be requested as a new request. Check the network tab in the devtools.
Ok ma man’s really just said he’s been too busy watching anime + he makes coding videos I’m sold you’ve earned my sub sir
Brilliant. Very much enjoyed the journey.
Just thought I’d mention, as a web developer of 15 years, the first thing I would have done is used a packet sniffer and looks at the http request, and most experienced web developers would have no friction in doing the same, either way, cool video about the link header, never seen it used before
Well the chrome devtools have a network tab which is pretty an integrated packet sniffer for the HTTP/S protocol so there isn't really a need to have a packet sniffer for this context.
After you showed what you'll tell us I decided to figure it out myself before watching. Took me a while, but I found a link header which I've never seen before. I'm guessing that this works similar to the HTTP link tag. Then, this header loads a stylesheet, which sets the head element to display block which load the gif from Giphy as background image and shows the text using pseudoelements. And with a refresh header, it automatically redirects to TH-cam after 5 seconds
Thanks for this. I love your humor! :D
th-cam.com/channels/i1K2xVac9WaQs-86DBoUUA.htmlfeatured
This made me laugh very hard, thanks for the awesome content man. Appreciate it.
uh, do you know about that 'network' tab that allows you to see any file loaded by a website when visiting it ?
pretty useful, and makes your code hiding thing useless because whatever js or css file you will make me download it will be shown up there
1. He already pointed that out
2. In order to use the network tab you have to visit the page and by the time you inspect it, you would already be rick rolled
3. The point was to hide the source code from CLI tools that display the source code
@@vlOd_yt bro this comment is a year old
@@RedStoneMatt Bro I was replying
awww the penguin is so cuteeeeee, will there be plushies of it?
Maybe one day :)
punishes of it? why? because it is cute it has to be punished???!!
@Lulonaut oh lol :D
@@poplach wtf
@@poplach MARKITABLE PLUSHIE *becomes marketible*
That was very interesting!! Thanks for sharing it 👌
Cool!! You could add that Rick rolling page in the view source code of your website xD
When the goal for Chromium browsers is a simple redirect to the YT video, why not use the Location header?
Also, is it possible to include a script instead of a stylesheet using the Link header? Would give much more possibilities :D
1. Used Refresh header because it gives me a delay I can set, for example in the video I did it for 5 seconds.
2. No, can't do javascript :(
@@PwnFunction Oh, I thought a delay would also work with the Location header, as I remembered doing a delayed reload a couple of years back. Turns out I didn't use Location but Refresh. I just remembered wrong :)
There might be a reason for not being able to link a script this way, but would have been very helpful in this case.
Anyway, thanks for replying. I like learned something from this video :D
@@Gramini location header is in the HTTP spec and I don't think it supports a delay that would still display the page until the timer elapses. But, you could set a delay with a meta reload/redirect tag in the page's HTML content.
@@colonelmustard2652 I will add here as the Location header is meant and supposed to be used in the 3** familly of response codes as its meant to redirect instantly and not display a page, and Refresh doesnt work on a 3** response code, only Location
border: 1px solid #fff;
border-style: dashed;
I think I got a concussion
jk good video xD
Dude this is absolutely not a waste of time!!! It helped me to understand why I can't see google forms' (my some exams are on google form) source code... Now I got that... Thanks
Hi there, i do like your videos style (and obviously the content also), what to you use to make your handwritten annotations and animations? Thanks a lot ;)
interesting
tbh, the first though i thought about was opening the debugging tools... cant foold software developers... xD
man, my mind is blowing with this haha I'm a freaking newbie in coding and this just gave me a new perspective. tks
You just nerd-sniped me! And you actually put me off-track by making that "report-to" header so much larger than the "link" header that I went on a wild-goose-chase to understand how that would load the resources... but it was that tiny "link" header, I did not see because it was so tiny😀
7:55 well I am certainly using dev tools on almost anything when I want to know why something happens as it does. But I think I didn’t used the „show sourcecode“ ctx menu function in 3 years or so. Simply because it is loading the page again, and as such the content can differ from the actual webpage you were on before.
And if I’m really wanna debug stuff, curl to the rescue 😂😂
But ok, I’m a Software engineer that builds stuff on the web for like 15 years 🤷🏻♂️ ya know, the time where JavaScript wasn’t as hip, and you used tables and frames to make your webpage? 😂😂
As a web developer, I will surely visit the dev tool. We web developers do this a loooooooooot
th-cam.com/channels/i1K2xVac9WaQs-86DBoUUA.htmlfeatured
Yup
I don’t know a single thing about code but I just keep watching these. It’s like watching a korean show without subtitles
Thanks, it's good to add to your knowledge stuff like this.
Thank you for doing all this work. But, not gonna lie, I got irrationally upset by the "display: block;" on the head element. Like, you shouldn't be able to do that
I think since the is a tag which also has a closing tag, you can also do it there.
Maybe a tip, WebAssembly. Maybe you can compile the code and really hide it
That’s is clever. But I’m to lazy… kkkk
@@danielborges. Yeah, me too!!!!!!
Found this TH-cam channel today. Really amazing frontend content,
100K subs, congrats!
3:35 what software is that? looks super useful
✋ I want to know too!
I think it's thunder client extension for vscode
Looks like insomnia and vscode had a baby
Software is surely VSCode, but with additional extension for requests
Thunder Client
If you can make it render JS, you can actually watch for when someone opens dev tools.
From there if it's opened, you could either nuke the body, or force a redirect straight away...
Awesome as usual 😎👍
This is the start of something incredible
3:33
Hypertext Transfer Protocol Protocol
th-cam.com/channels/i1K2xVac9WaQs-86DBoUUA.htmlfeatured
2:37 watch JoJo's Bizzarre Adventure if you haven't already. It's one one of the best anime ever.
no.
Will do :)
@@PwnFunction soon my boy will grow up and become a man of culture
In your list of anime, I’ve never seen anyone else reference Gantz. That was one of the wildest and amazing little series ever.
The level of cool I wanna reach is when the penguin said "Lemme explain". I guess I will be never that cool.
Could you please tell me what set (shades or contrasts) of colours have you used for this video? It looks amazing!
Hearing 'wisits a webpage' was a really joyful experience for me.
Congrats on your 100k subscribers
What a masterpiece! Thank you ♥️
Please explain me bro how do I implement on my site
yay new video !
Let's Gooooo! I hate that thunder storm!!!
I just loooovee your work.
Nice videos mate
It looks to me you still have too much time, and I'm greatful for that. Awesome work. 👍
Congrats on 500K viewers and 100k subs
Thanks!
Wow, this brings back memories... I did something similar 15 years ago to mess with someone. They couldn't figure out how I did it :D
This is fascinating, thanks
idk why this vids come out in my home, but i like this vid after read the desc and before watching. lol
Holy shit how did I barely get this channel recommended to me!
I love your videos. May I ask, how can I make videos like those? I mean what software are you using?
It's all fun and games until there's an ad before the video and they close the tab before the fun event begins :D
Cool thingy, i would definitely show this to a friend, although i always firstly inspect page and not view source code, but its pretty cool still.
View source code... I don't really use that any more. Basically only chrome dev tools. Great video and hilarious you use Refresh even tho it's not specified all browsers support it. Haha :D
You're back!👍
Thank you. Brilliant Content
What drawing/graphics tablet are using? I'm looking to purchase one myself but there are so many options.
thanks for sharing your experience. and awesome video
Why is this channel so underrated? This is brilliant
th-cam.com/channels/i1K2xVac9WaQs-86DBoUUA.htmlfeatured
@@hightechplatform1874 stfu up
That's actually really cool!
For the guy that was smart to look at sw.js file , you could have prevented that the apache configuration , basically tell Apache that no one should be able to access indexing of the website unless the main site page actually leads to a seperate image/page etc
If he actually had server access, he probably wouldn't be redirecting with html
Nice video!
What color scheme are you using in vscode (5:50)? That's cool
chromodynamics?
Talk about going down a rabbit hole :O
Clever ! Good to know
Impressive experiment!
I think another way to « hide » the source code would be to send a different response when based on the headers sent by the client.
e.g. the browser might send a request with a cache control header that has a different value when you use the « view source code function ».
Hey just want to ask what is the plugin used on 3:45? seems really helpful
I just realised my favourite penguin watches jujutsu kaisen