This Website has No Code, or Does it?

[@PwnFunction]

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

[@gokupwn]

Hey Pwn how you make such amazing KZbin logo 🔥 thanks

[@PwnFunction]

@@gokupwn I draw in Adobe Animate :)

[@RohithkannaDuraiswamy]

What did it cost?

[@ramazanchasygov3886]

Tickled a problem that never was a problem and learned something new

[@jidma]

@@RohithkannaDuraiswamy everything...

[@abanalytica1694]

And thus began the bodyless architecture era!

[@cocolasticot9027]

State of the art requires a headless server on the back-end 👌

[@CodeDisease]

Third

[@miigon9117]

Frontend technological progress in a nutshell

[@inkryption3386]

@@miigon9117 Is it? I've been doing systems programming for a while. Is this actually representative of frontend web dev now? Lol

[@musandlala7991]

No no nooooooooo!

[@logosking2848]

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

[@UC3wgyGGDLR8A_yB3MmK9oQQ]

It's easier to hit ctrl+u than disabling js in devtools if you don't want javascript to modify the page.

[@sergsergesrgergseg]

i only ever view source so i can rip the page

[@SeventhSolar]

I prefer to inspect, so I can just jump to the part I'm looking at.

[@bluesquare23]

Ctrl + f

[@skalty9868]

Holistic

[@The__Leo69]

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

[@philosuit]

Me too

[@darenthoman9962]

@@philosuit Same here

[@sapindersingh1165]

perhaps he meant the opposite 😆

[@motsgar]

Yes

[@RubyPiec]

Same, especially Applications

[@Argentix]

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

[@BarraIhsan]

Wait, you make it? Can you give it the link of the extension

[@jannik8400]

@@electrical-420 ... to not get rickrolled?

[@jannik8400]

@@electrical-420 read my comment

[@jannik8400]

@@electrical-420 Its a meme its fun its just a joke, if you dont understand it, your problem.

[@Cyorg13]

@@electrical-420 :D

[@UltimatePerfection]

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.

[@random_person_i_guess]

also auto-pretty-print is nice

[@UltimatePerfection]

@@random_person_i_guess Yes.

[@nobleradical2158]

And it’s generally on a keybind, whereas you need at least 2 clicks for page source.

[@charlesm.2604]

@@nobleradical2158 Ctrl+U

[@pleasejustletmebeanonymous6510]

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

[@monsieuralexandergulbu3678]

Truly bruh moment

[@chomo54andbabyaisha97]

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

[@R1ch4rd]

Чел, ты... Не "I'll be", а "I would've been", учи английский. 🤦‍♂️

[@лилпипка]

@@R1ch4rd хуя ты хейтер, онгличане выше ничего не заметили и по делу отвечали ;)

[@botcontador3286]

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.

[@soniablanche5672]

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

[@PhilMinecraft]

@Suryavansh Jaggi wait wut?

[@AlabamaLockPicking-Main]

Noob website builders can easily be exploited with there unsecure source code, it's very useful lol for hackers

[@AlabamaLockPicking-Main]

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 😂

[@PhilMinecraft]

@@AlabamaLockPicking-Main wut?

[@AlabamaLockPicking-Main]

@@PhilMinecraft Im talking about noob website programmers make unsecure code you can easily exploit it viewing the source code is useful for a hacker

[@Zack_Taylor]

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.

[@Greedygoblingames]

my thoughts exactly

[@unperrier5998]

Ctrl+U bro

[@Zack_Taylor]

@@unperrier5998 why tho?

[@unperrier5998]

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

[@go-away-5555]

In order to use the dev tools on the page, you'd end up getting rickrolled though

[@werren894]

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

[@chomo54andbabyaisha97]

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.

[@AndreuKuz]

Bruh the trick to hide the key in headers is older than you

[@DonLarryTT]

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

[@PhilMinecraft]

what about chrome user here and Mac haters?👀

[@DonLarryTT]

@@PhilMinecraft if the browser is not firefox, it redirects you to the song video on youtube

[@packerfreak88]

@@DonLarryTT nice algorithm!

[@mileswithau]

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.

[@Lampe2020]

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

[@Lampe2020]

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

[@nunchuckduck3843]

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

[@_iphoenix_6164]

"how the website hides; it is code" totally kidding btw

[@PwnFunction]

my bad, fixed, thanks.

[@jimhalpert9803]

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

[@infiniti2011]

@DIG MC It's actually pretty easy. There's a really good site out there, just google js obfuscator.

[@wellhiiguess2351]

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

[@lamdo7897]

/js

[@Sollace]

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.

[@rutwikhiwalkar9583]

The animations getting better and better every video. Love it

[@datsteves]

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

[@33v4.]

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?

[@JlHAD]

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

[@LoganDark4357]

JavaScript doesn't run in view-source tabs lmao

[@annikentogo]

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

[@r.t.5767]

And it's a very useful one

[@charlesm.2604]

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]

The old Opera

[@charlesm.2604]

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

[@stashguard6823]

Would make to much sense to use it

[@Manabender]

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

[@AsmodeusMictian]

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

[@Manabender]

@@AsmodeusMictian Are you going to enter your PIN Number? :P

[@AsmodeusMictian]

@@Manabender how else do you use it :D

[@mobile_ingou]

smh my head

[@serpykologicl5871]

@@Manabender pin number sounds more natural most of the time 🤷‍♀️

[@RueLazzaro]

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.

[@YarPirates-vy7iv]

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

[@Gramini]

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]

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 :(

[@Gramini]

​@@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

[@colonelmustard2652]

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

[@vlOd_yt]

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

[@sk-yd5ge]

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

[@deepeddyrecords5933]

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.

[@tryptaminezen3528]

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

[@chloelee5405]

tbh, the first though i thought about was opening the debugging tools... cant foold software developers... xD

[@MsMaciek]

interesting

[@Ariana-dn4mm]

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

[@PwnFunction]

Maybe one day :)

[@poplach]

punishes of it? why? because it is cute it has to be punished???!!

[@poplach]

@Lulonaut oh lol :D

[@chiragsingla.]

@@poplach wtf

[@tzarg]

@@poplach MARKITABLE PLUSHIE *becomes marketible*

[@nightmarenova6748]

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

[@jonathanpetruska7726]

If he actually had server access, he probably wouldn't be redirecting with html

[@WrittenInFilm]

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

[@charlesm.2604]

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.

[@spythere]

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

[@laurinneff4304]

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 KZbin after 5 seconds

[@tide6417]

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

[@UraYukimitsu]

PHP still sends HTML to clients to display webpages

[@RedStoneMatt]

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

[@vlOd_yt]

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

[@RedStoneMatt]

@@vlOd_yt bro this comment is a year old

[@vlOd_yt]

@@RedStoneMatt Bro I was replying

[@truettvanslyke8528]

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

[@maB-TM]

3:35 what software is that? looks super useful

[@hunterwilhelm]

✋ I want to know too!

[@saisanthan9040]

I think it's thunder client extension for vscode

[@shiskeyoffles]

Looks like insomnia and vscode had a baby

[@monsieuralexandergulbu3678]

Software is surely VSCode, but with additional extension for requests

[@arimateiasilva4555]

Thunder Client

[@darukutsu]

even decrypting rickroll link is considered as being rickrolled

[@mid-julyenglish1782]

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

[@hightechplatform1874]

kzbin.info/door/i1K2xVac9WaQs-86DBoUUAfeatured

[@virtualalphastudios6149]

Yup

[@randomnotes4258]

I didn’t even know that existed, I just always used “control shift i” to view the devtools

[@kwhandy]

2021 noob: wow new framework that kills existing

[@curtismcdonald6461]

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!

[@tablettablete186]

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

[@danielborges.]

That’s is clever. But I’m to lazy… kkkk

[@tablettablete186]

@@danielborges. Yeah, me too!!!!!!

[@RemyDrijkoningen]

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

[@apestogetherstrong341]

Very high quality, you're great!

[@jaidCodes]

3:33 Hypertext Transfer Protocol Protocol

[@hightechplatform1874]

kzbin.info/door/i1K2xVac9WaQs-86DBoUUAfeatured

[@burnsy96]

Pressing F12 for DevTools is way more convenient than right clicking and searching for the source code option imo

[@muha0644]

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

[@SophiaH67]

no.

[@PwnFunction]

Will do :)

[@monsieuralexandergulbu3678]

@@PwnFunction soon my boy will grow up and become a man of culture

[@speedmaster24official70]

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

[@sobertillnoon]

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

[@chomo54andbabyaisha97]

I think since the is a tag which also has a closing tag, you can also do it there.

[@magrigrigri]

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

[@mitchellmnr]

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

[@NFSHeld]

F12 is one button press, comes with highlight, indentation, hover-highlight, shows lazy loaded content, CSS, scripts - all in the same window. Ctrl+Q is two button presses, opens a new window that hides what you are trying to analyze, of unindented, unformatted code. Why would anyone use "Show source" instead of "DevTools"?

[@LaroTayoGaming]

I've didn't know that rickrolling can be more complex.

[@xGOKOPx]

I've just realized that ads have destroyed rickrolling

[@etaoinwu]

When I first saw the empty viewsource I thought it was some unicode character that's blank or something

[@krush845]

What drawing/graphics tablet are using? I'm looking to purchase one myself but there are so many options.

[@FrancescoRosiYTP]

Alternative title: I made a website only with CSS

[@azuspaguma5253]

Hey just want to ask what is the plugin used on 3:45? seems really helpful

[@Neilblaze]

@PwnFunction at 3:37 what's the VSCode extension that you're using for sending the GET request?

[@monsieuralexandergulbu3678]

Possibly thunder client extension

[@Daniel15au]

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

[@Masterclass-tn]

I just realised my favourite penguin watches jujutsu kaisen

[@UC3wgyGGDLR8A_yB3MmK9oQQ]

TL;DW: if you check `curl -I`, the header `link` is set to `; rel=stylesheet;` and the `refresh` header is set to the youtube video link. `style.css` sets all the content, etc.

[@A_Anti-Furry]

Me - Starts Video Video - Instanly Rick Role Me...

[@gatotheusofficial]

2:29 PwnFuncition sleeping

[@cristepaul1]

Why is this channel so underrated? This is brilliant

[@hightechplatform1874]

kzbin.info/door/i1K2xVac9WaQs-86DBoUUAfeatured

[@luxleans]

@@hightechplatform1874 stfu up

[@TheCreeperTrack1]

Why not do a 301 or 302 redirect instead? No code required. Then again, kind of defeats the blank devtools point.

[@ledrake8590]

What text theme are you using? It looks like Monokai but more vibrant , cause when i use Monokai Pro it doesn't like as vibrant as yours

[@commensalism1997]

his voice sounds like cutting butter with overheated shoe

[@nqrtzy8765]

The virgin “View source code” vs. Chad “Inspect”

[@elladumpsterfire]

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

[@epicmines33]

no one: me: watching these random vids at 2am cause bored

[@lazybones290]

they just take me go to the rick roll youtube video

[@xxanonymous6578]

Python: ('A'*5) + ('Y'*5) + '!' Output: 'AAAAAYYYYY!'

[@RussellTeapot]

DUDE WAT I didn't know you could use the multiplication operator to repeat a string! The more you know

[@xxanonymous6578]

@@RussellTeapot Really, well glad I could show you something new.

[@柯正昊]

The stylesheet style.css got it's own entry in network panel when page is loaded (firefox 88.0).

[@masterpig5s]

Obfuscated thoughts. Huh. Just a thought I had when hearing that you want to hide not obfuscate code.

[@soderberg8932]

5:27 in the morning and watching this for some reason

[@ssokolow]

Funny thing is, using Google-injected code to obfuscate things would *prevent* it from working for me, purely because, as a targeted advertising company, I *don't* trust Google for third-party subresources in uMatrix unless absolutely necessary. (The service workers not working is less interesting. I just keep them disabled in about:config for lack of a uMatrix-alike.)

[@TheJobCompany]

Ha jokes on you, I always have my devtools open in a separate window and I keep my main browser window minimized

[@__lasevix_]

I was hoping this was just a whitespace webdev extension

[@vicyoslinuxofficial2607]

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

[@Trught]

Hmm, little trick with "show source code" for dynamic and Javascript, Ctrl+A -> show selected source code, show actual browser generated html content. But anyway I still use devtools.

[@ssh.1337]

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

[@GhostiesAlt]

the website has changed, it just takes you to the youtube video...

[@kimorlandonilsson1196]

That's the most ingenious waist of time I have seen in a very long time.

[@Tomentos]

I love how this ended up in this years hackvent

It's just a blank page that redirects to a youtube video after a few seconds, CSS is not loading (Chrome 108, Linux Mint)

[@alexanderk.532]

Excuse me. I’m a little bit confused. How did you displayed website page information in the terminal on 4:00? It OS has built in function in terminal or what? (Yeah, I’m dummy)

[@gatotheusofficial]

8:50 When the PwnFuncition is SUS

[@flaming_exe]

He rickrolled us at 5:39, where the tabs are, one group is named RickRoll, we got rickrolled boys.

[@EnderMega]

This name makes me remember something... **VSAUCE MUSIC INTENSIFIES**

[@magrigrigri]

imho the « view source code » button and the tab « element » of dev tools are for different usage. I use the « view source code » function likely as I use the network tab of the dev tools to see what the server is sending into the response body

[@alice-smith]

Nice video! What color scheme are you using in vscode (5:50)? That's cool

[@monsieuralexandergulbu3678]

chromodynamics?

[@philmuchbetter]

Cool. Is that a VS code extension for sending POST / GET requests?

[@PwnFunction]

Thunder client for vscode

[@monkearmyleader3027]

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

[@wlwgwlwgnomesarereal]

_you read the title_ _vsauce music start playing_