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

3 жыл бұрын

Hey Pwn how you make such amazing KZread logo 🔥 thanks

@PwnFunction

3 жыл бұрын

@@gokupwn I draw in Adobe Animate :)

@RohithkannaDuraiswamy

3 жыл бұрын

What did it cost?

@ramazanchasygov3886

3 жыл бұрын

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

@jidma

3 жыл бұрын

@@RohithkannaDuraiswamy everything...

And thus began the bodyless architecture era!

@cocolasticot9027

3 жыл бұрын

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

@CodeDisease

3 жыл бұрын

Third

@miigon9117

3 жыл бұрын

Frontend technological progress in a nutshell

@inkryption3386

3 жыл бұрын

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

@musandlala7991

3 жыл бұрын

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

@kotchu

2 жыл бұрын

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

@sergsergesrgergseg

2 жыл бұрын

i only ever view source so i can rip the page

@SeventhSolar

2 жыл бұрын

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

@bluesquare23

2 жыл бұрын

Ctrl + f

@skalty9868

2 жыл бұрын

Holistic

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

@BarraIhsan

3 жыл бұрын

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

@jannik8400

3 жыл бұрын

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

@jannik8400

3 жыл бұрын

@@electrical-420 read my comment

@jannik8400

3 жыл бұрын

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

@Cyorg13

3 жыл бұрын

@@electrical-420 :D

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

@philosuit

3 жыл бұрын

Me too

@darenthoman9962

3 жыл бұрын

@@philosuit Same here

@sapindersingh1165

3 жыл бұрын

perhaps he meant the opposite 😆

@motsgar

3 жыл бұрын

Yes

@RubyPiec

3 жыл бұрын

Same, especially Applications

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

@monsieuralexandergulbu3678

3 жыл бұрын

Truly bruh moment

@chomo54andbabyaisha97

3 жыл бұрын

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.

@lil_peepka

3 жыл бұрын

@@chomo54andbabyaisha97 well, I've just disabled right-click menu through js and it worked

@R1ch4rd

2 жыл бұрын

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

@lil_peepka

2 жыл бұрын

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

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

2 жыл бұрын

also auto-pretty-print is nice

@UltimatePerfection

2 жыл бұрын

@@random_person_i_guess Yes.

@nobleradical2158

2 жыл бұрын

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

@charlesm.2604

2 жыл бұрын

@@nobleradical2158 Ctrl+U

@pleasejustletmebeanonymous6510

2 жыл бұрын

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.

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

@PhilMinecraft

3 жыл бұрын

@Suryavansh Jaggi wait wut?

@bluezmodz9701

3 жыл бұрын

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

@bluezmodz9701

3 жыл бұрын

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

3 жыл бұрын

@@bluezmodz9701 wut?

@bluezmodz9701

3 жыл бұрын

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

@Greedygoblingames

2 жыл бұрын

my thoughts exactly

@unperrier5998

2 жыл бұрын

Ctrl+U bro

@Zack_Taylor

2 жыл бұрын

@@unperrier5998 why tho?

@unperrier5998

2 жыл бұрын

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

2 жыл бұрын

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

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

@PhilMinecraft

3 жыл бұрын

what about chrome user here and Mac haters?👀

@DonLarryTT

3 жыл бұрын

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

@packerfreak88

2 жыл бұрын

@@DonLarryTT nice algorithm!

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

@lamdo7897

2 жыл бұрын

/js

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

3 жыл бұрын

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

3 жыл бұрын

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

@infiniti2011

3 жыл бұрын

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

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.

@Lampe2020

2 жыл бұрын

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

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

@_iphoenix_6164

3 жыл бұрын

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

@PwnFunction

3 жыл бұрын

my bad, fixed, thanks.

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.

Love this casual style dude, keep it up 👍

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.

This is becoming my favorite coding channel. Lit content

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.

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

@AsmodeusMictian

3 жыл бұрын

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

3 жыл бұрын

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

@AsmodeusMictian

3 жыл бұрын

@@Manabender how else do you use it :D

@mobile_ingou

3 жыл бұрын

smh my head

@serpykologicl5871

3 жыл бұрын

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

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.

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

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

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

2 жыл бұрын

JavaScript doesn't run in view-source tabs lmao

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

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

An absolute masterpiece, thank you

interesting

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

@r.t.5767

2 жыл бұрын

And it's a very useful one

@charlesm.2604

2 жыл бұрын

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

2 жыл бұрын

The old Opera

@charlesm.2604

2 жыл бұрын

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

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

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

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

@PwnFunction

3 жыл бұрын

Maybe one day :)

@poplach

3 жыл бұрын

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

@poplach

3 жыл бұрын

@Lulonaut oh lol :D

@chiragsingla.

3 жыл бұрын

@@poplach wtf

@tzarg

2 жыл бұрын

@@poplach MARKITABLE PLUSHIE *becomes marketible*

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

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!

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

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

2 жыл бұрын

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.

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

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

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

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

3 жыл бұрын

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

3 жыл бұрын

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

2 жыл бұрын

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

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

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😀

3:33 Hypertext Transfer Protocol Protocol

@hightechplatform1874

3 жыл бұрын

kzread.info/dron/i1K2xVac9WaQs-86DBoUUA.htmlfeatured

3:35 what software is that? looks super useful

@hunterwilhelm

3 жыл бұрын

✋ I want to know too!

@saisanthan9040

3 жыл бұрын

I think it's thunder client extension for vscode

@shiskeyoffles

3 жыл бұрын

Looks like insomnia and vscode had a baby

@monsieuralexandergulbu3678

3 жыл бұрын

Software is surely VSCode, but with additional extension for requests

@arimateiasilva4555

3 жыл бұрын

Thunder Client

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

Love these kinds of videos!

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

@hightechplatform1874

3 жыл бұрын

kzread.info/dron/i1K2xVac9WaQs-86DBoUUA.htmlfeatured

@virtualalphastudios6149

2 жыл бұрын

Yup

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

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

Brilliant. Very much enjoyed the journey.

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

2 жыл бұрын

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

@danielborges.

3 жыл бұрын

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

@tablettablete186

3 жыл бұрын

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

Thanks for this. I love your humor! :D

@hightechplatform1874

3 жыл бұрын

kzread.info/dron/i1K2xVac9WaQs-86DBoUUA.htmlfeatured

That was very interesting!! Thanks for sharing it 👌

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.

@SophiaH67

3 жыл бұрын

no.

@PwnFunction

3 жыл бұрын

Will do :)

@monsieuralexandergulbu3678

3 жыл бұрын

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

2:29 PwnFuncition sleeping

This is the start of something incredible

man, my mind is blowing with this haha I'm a freaking newbie in coding and this just gave me a new perspective. tks

What software do you use to create these awesome animations?

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

Found this KZread channel today. Really amazing frontend content,

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

what's the theme u r using for vs code, and what is font you are using for 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

I love your videos. May I ask, how can I make videos like those? I mean what software are you using?

If you were to make some input in the header, would it behave the same as in body? Possibility of new exploits?

I know this is old, but at 9:34, there's a replit header. Do you use it for deployment?

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

@PwnFunction, how do you make the penguin mascot character, i need to know it plz

100K subs, congrats!

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

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

@monsieuralexandergulbu3678

3 жыл бұрын

Possibly thunder client extension

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

Congrats on your 100k subscribers

Great Video! But Why changed the music? 😭

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)

I just realised my favourite penguin watches jujutsu kaisen

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.

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

Hey what tools do you use to make your vids

Which DevTools? The Inspect button in MSEdge or VS?

The Dev Tools are literally beside the source LOL!

8:50 When the PwnFuncition is SUS

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

What a masterpiece! Thank you ♥️

@mukhtarali3854

Жыл бұрын

Please explain me bro how do I implement on my site

What shell did you use to use the http command?

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

Other than making it hard for some users to see the script and rickroll them, what are the other practical use of this?

Talk about going down a rabbit hole :O

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

@monsieuralexandergulbu3678

3 жыл бұрын

chromodynamics?

This is fascinating, thanks