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
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.
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.
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.
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.
@@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.
...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.
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.
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!
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.
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.
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.
@@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.
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.
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
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.
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 $$ ;-)
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
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
@@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
I thought you were a dev, that's why I clicked this. Also Dev's always are gonna inspect the page first, and only use view source to check if the scripts and styles are properly linked
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😀
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 UA-cam after 5 seconds
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? 😂😂
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
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
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...
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
its honestly funny because the dev tools get opened on the website itself so i see the website and i see the devtools and i can isolate stuff with a click on anything for the website
yeah, fortunately completely hiding the source code of a website is fundamentally impossible since the browser will always need to have it to display it to you
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
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 UA-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
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.
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.
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 😂
@@AlabamaLockPicking-Main 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
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
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!
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
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.
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!
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.
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.
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.
Why is this channel so underrated? This is brilliant
ua-cam.com/channels/i1K2xVac9WaQs-86DBoUUA.htmlfeatured
@@hightechplatform1874 stfu up
Very high quality, you're great!
This is becoming my favorite coding channel. Lit content
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.
Hearing 'wisits a webpage' was a really joyful experience for me.
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?
I don’t know a single thing about code but I just keep watching these. It’s like watching a korean show without subtitles
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.
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
border: 1px solid #fff;
border-style: dashed;
I think I got a concussion
jk good video xD
Thanks for this. I love your humor! :D
ua-cam.com/channels/i1K2xVac9WaQs-86DBoUUA.htmlfeatured
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*
man, my mind is blowing with this haha I'm a freaking newbie in coding and this just gave me a new perspective. tks
As a web developer, I will surely visit the dev tool. We web developers do this a loooooooooot
ua-cam.com/channels/i1K2xVac9WaQs-86DBoUUA.htmlfeatured
Yup
In your list of anime, I’ve never seen anyone else reference Gantz. That was one of the wildest and amazing little series ever.
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.
Content quality is pretty awesome...
Keep it up 🙂
"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 🤷♀️
I am not sure why this is not popular!
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 this casual style dude, keep it up 👍
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
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
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
Cool!! You could add that Rick rolling page in the view source code of your website xD
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!!!!!!
An absolute masterpiece, thank you
2021 noob: wow new framework that kills existing
I thought you were a dev, that's why I clicked this. Also Dev's always are gonna inspect the page first, and only use view source to check if the scripts and styles are properly linked
tbh, the first though i thought about was opening the debugging tools... cant foold software developers... xD
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😀
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 UA-cam after 5 seconds
Pressing F12 for DevTools is way more convenient than right clicking and searching for the source code option imo
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? 😂😂
Your videos are getting superb day by day
Considering he's not posting video every day it would be better to say "with every video"
3:33
Hypertext Transfer Protocol Protocol
ua-cam.com/channels/i1K2xVac9WaQs-86DBoUUA.htmlfeatured
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
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
This is the start of something incredible
interesting
I just realised my favourite penguin watches jujutsu kaisen
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.
Great video! Web shenanigans are always enjoyable to learn about. Btw, Demon King Academy is some good stuff
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
Found this UA-cam channel today. Really amazing frontend content,
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...
Alternative title: I made a website only with CSS
the site directed me to rick roll video but the ad poped up no view to rick roll (Chrome User). Never gonna give you up
Congrats on 500K viewers and 100k subs
Thanks!
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
I didn’t even know that existed, I just always used “control shift i” to view the devtools
The level of cool I wanna reach is when the penguin said "Lemme explain". I guess I will be never that cool.
I've just realized that ads have destroyed rickrolling
I've didn't know that rickrolling can be more complex.
Nice video, keep up the research. Look forward to the next one.
That was very interesting!! Thanks for sharing it 👌
This made me laugh very hard, thanks for the awesome content man. Appreciate it.
idk why this vids come out in my home, but i like this vid after read the desc and before watching. lol
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
even decrypting rickroll link is considered as being rickrolled
its honestly funny because the dev tools get opened on the website itself so i see the website and i see the devtools and i can isolate stuff with a click on anything for the website
yeah, fortunately completely hiding the source code of a website is fundamentally impossible since the browser will always need to have it to display it to you
Congrats on your 100k subscribers
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
I never thought someone could stretch a 1 minute video to 10 minutes
Python:
('A'*5) + ('Y'*5) + '!'
Output: 'AAAAAYYYYY!'
DUDE WAT I didn't know you could use the multiplication operator to repeat a string! The more you know
@@RussellTeapot Really, well glad I could show you something new.
2:29 PwnFuncition sleeping
It looks to me you still have too much time, and I'm greatful for that. Awesome work. 👍
When I saw the title I thinked directly in PHP, as it's a preprocessor doesn't show to the client / user the source code
PHP still sends HTML to clients to display webpages
The virgin “View source code” vs. Chad “Inspect”
5:27 in the morning and watching this for some reason
This would be good for a ctf event.
Love these kinds of videos!
Hey just want to ask what is the plugin used on 3:45? seems really helpful
This is what I call research... Thanks for sharing.
Holy shit how did I barely get this channel recommended to me!
Great Video! But Why changed the music? 😭
100K subs, congrats!
That's the most ingenious waist of time I have seen in a very long time.