This Website has No Code, or Does it?
Вставка
- Опубліковано 16 жов 2024
- In this episode we'll explore the world of HTTP and CSS to hide some code.
⭐ Code: github.com/Pwn...
✨ 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 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
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
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
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 😂
@@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
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
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!
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.
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.
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.
border: 1px solid #fff;
border-style: dashed;
I think I got a concussion
jk good video xD
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!
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.
Hearing 'wisits a webpage' was a really joyful experience for me.
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*
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.
Why is this channel so underrated? This is brilliant
ua-cam.com/channels/i1K2xVac9WaQs-86DBoUUA.htmlfeatured
@@hightechplatform1874 stfu up
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? 😂😂
"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 🤷♀️
Very high quality, you're great!
Content quality is pretty awesome...
Keep it up 🙂
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
This is becoming my favorite coding channel. Lit content
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
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.
Would make to much sense to use it
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: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
Love this casual style dude, keep it up 👍
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
Thanks for this. I love your humor! :D
ua-cam.com/channels/i1K2xVac9WaQs-86DBoUUA.htmlfeatured
tbh, the first though i thought about was opening the debugging tools... cant foold software developers... xD
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
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
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
2021 noob: wow new framework that kills existing
Pressing F12 for DevTools is way more convenient than right clicking and searching for the source code option imo
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!!!!!!
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
interesting
I am not sure why this is not popular!
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
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
3:33
Hypertext Transfer Protocol Protocol
ua-cam.com/channels/i1K2xVac9WaQs-86DBoUUA.htmlfeatured
I didn’t even know that existed, I just always used “control shift i” to view the devtools
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.
man, my mind is blowing with this haha I'm a freaking newbie in coding and this just gave me a new perspective. tks
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...
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
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
Cool!! You could add that Rick rolling page in the view source code of your website xD
Congrats on 500K viewers and 100k subs
Thanks!
Hey just want to ask what is the plugin used on 3:45? seems really helpful
I've didn't know that rickrolling can be more complex.
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
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
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 ;)
100K subs, congrats!
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)
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.
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
Congrats on your 100k subscribers
Great Video! But Why changed the music? 😭
I've just realized that ads have destroyed rickrolling
The virgin “View source code” vs. Chad “Inspect”
What drawing/graphics tablet are using? I'm looking to purchase one myself but there are so many options.
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
@PwnFunction at 3:37 what's the VSCode extension that you're using for sending the GET request?
Possibly thunder client extension
Great video! Web shenanigans are always enjoyable to learn about. Btw, Demon King Academy is some good stuff
Alternative title: I made a website only with CSS
even decrypting rickroll link is considered as being rickrolled
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
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"
Ngl when you said no one's gonna bring up dev tools, I was thinking I don't know anyone that uses view page source. They only use f12
Love these kinds of videos!
I just realised my favourite penguin watches jujutsu kaisen
2:29 PwnFuncition sleeping
Why not do a 301 or 302 redirect instead? No code required. Then again, kind of defeats the blank devtools point.
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.)
Ha jokes on you, I always have my devtools open in a separate window and I keep my main browser window minimized
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
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 the start of something incredible
What shell did you use to use the http command?
Obfuscated thoughts. Huh. Just a thought I had when hearing that you want to hide not obfuscate code.
View source = virgin
Inspect element = giga chad
Aaah Gantz... A man of culture i see. THE og edge lord anime