This Website has No Code, or Does it? 

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

And thus began the bodyless architecture era!

7:55 I never use 'View Source'. I always open dev tools 😂😂😂

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

Have to add another check to my rickroll detector extension now.

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.

view source code is kinda useless, almost all modern websites serve content with javascript so the source code is very minimal.

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

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.

The animations getting better and better every video. Love it

9:35 You can see the code easily in the "Style Editor" tab

I love how this Chanel answers useful questions that impact everyone’s JavaScript experience and is very professional (/s)

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

7:51 I don't use the "view source code" feature anymore, for that I almost exclusively use the DevTools.

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.

Very high quality, you're great!

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.

Love this casual style dude, keep it up 👍

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!

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.

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?

This is becoming my favorite coding channel. Lit content

Content quality is pretty awesome... Keep it up 🙂

btw the title is supposed to be: How this website hides its code.

Would love a video where you manually obfuscate some code and go bonkers

Great video! Web shenanigans are always enjoyable to learn about. Btw, Demon King Academy is some good stuff

Brilliant. Very much enjoyed the journey.

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.

"HTTP protocol" Ah, yes, redundant abbreviations. You are essentially saying "Hypertext Transfer Protocol Protocol".

Love these kinds of videos!

Nice video, keep up the research. Look forward to the next one.

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

border: 1px solid #fff; border-style: dashed; I think I got a concussion jk good video xD

An absolute masterpiece, thank you

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

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 RU-vid after 5 seconds

Fun fact: There is a "Location:" header that redirects when you open the site

That was very interesting!! Thanks for sharing it 👌

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

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

This made me laugh very hard, thanks for the awesome content man. Appreciate it.

awww the penguin is so cuteeeeee, will there be plushies of it?

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? 😂😂

100K subs, congrats!

Thanks for this. I love your humor! :D

interesting

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

Cool!! You could add that Rick rolling page in the view source code of your website 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😀

As a web developer, I will surely visit the dev tool. We web developers do this a loooooooooot

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

I don’t know a single thing about code but I just keep watching these. It’s like watching a korean show without subtitles

Congrats on your 100k subscribers

Maybe a tip, WebAssembly. Maybe you can compile the code and really hide it

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

Hearing 'wisits a webpage' was a really joyful experience for me.

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 ;)

3:33 Hypertext Transfer Protocol Protocol

3:35 what software is that? looks super useful

Found this RU-vid channel today. Really amazing frontend content,

Thanks, it's good to add to your knowledge stuff like this.

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...

2:37 watch JoJo's Bizzarre Adventure if you haven't already. It's one one of the best anime ever.

In your list of anime, I’ve never seen anyone else reference Gantz. That was one of the wildest and amazing little series ever.

This is the start of something incredible

Awesome as usual 😎👍

Nice videos mate

It looks to me you still have too much time, and I'm greatful for that. Awesome work. 👍

thanks for sharing your experience. and awesome video

I just loooovee your work.

What a masterpiece! Thank you ♥️

idk why this vids come out in my home, but i like this vid after read the desc and before watching. lol

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

Congrats on 110000K

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 ».

This is fascinating, thanks

Thank you. Brilliant Content

Could you please tell me what set (shades or contrasts) of colours have you used for this video? It looks amazing!

The level of cool I wanna reach is when the penguin said "Lemme explain". I guess I will be never that cool.

Talk about going down a rabbit hole :O

💙 I love humor in vids like this one...

Still interesting. Thanks for sharing!

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.

That's actually really cool!

Why is this channel so underrated? This is brilliant

Impressive experiment!

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

Congrats on 500K viewers and 100k subs

All start with a troll mission, never ever give you up!

Haha new picture looks amazing 😂😂

The best web development video I've ever seen lol

U deserve more love. More subscribers. More likes.

I am not sure why this is not popular!

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

You're back!👍

Let's Gooooo! I hate that thunder storm!!!

Holy shit how did I barely get this channel recommended to me!