Udacity After Dark: "Hacking" Facebook

U
AFTER DARK

Hello Internet!
Welcome to Udacity After Dark.

I am Jesicca Uleman and I am
a project manager here at Udacity.

And I am Cameron Pittman,
I am a course developer here.

making front end
web development courses.

And this is sort of I would say,
you know, experiment—

-Yeah.
-We're gonna see how this goes,

but we find a lot of interesting tidbits
throughout the day and we think

that it's a really fun knowledge to share
and we thought we would try to share

some of that knowledge with you guys,
playing along at home.

Yeah. Jessica, I have a question for you.
- I have an answer.

Have you ever wanted
to play a prank on a friend?

-Yeah.
-Me too. I—

It's obviously something that is fun to do
and in fact once in college I accidently

sort of destroyed one my roommate's laptop—

That's kind of— not good.

Yeah. I— In the end I kind of regretted it.
But it was, at the time, funny for a few seconds.

I went in and changed way too many
settings on his computer.

-Oooh.

It was like in a different language,
I think I like somehow like

destroyed its ability to
like go to Windows—

I don't honestly know—

So did you somehow get into the registry
and just start messing with files?

I think I was like drunk with power and
just started doing everything I could.

Anyways, so he got to get it repaired
and I felt like the biggest jerk.

But, you know, I think the little hacks we
are going to do today aren't nearly as mean.

They are definitely reversible, so—
Anyways, I've got my Facebook page open,

and, you know, it's a pretty standard Facebook page.
The cool thing is, it is a website.

Facebook is a website like any other—
-Really! Mind blown.

And Facebook, like in any other website,
can be edited using DevTools.

Developer tools are provided by browsers,
this time I'm using Chrome, but—

You could use whatever browser you wanted to.
And they let you basically inspect and change

every aspect about a website.

You can figure out what is going on at
pretty much all times. Which is pretty cool.

I like where this is going.
I think where you are going with this.

Yeah. So anyways, I have my page up here
and let's go ahead and make some changes.

So I'll go up to "View", and I go to "Developer"
and "Developer Tools".

And that opens up this— Whoow!
This scary message here.

This is Facebook telling people who
don't know what they're doing

that if somebody else told them to come into
DevTools, specifically come into the console

and make changes, that they're actually
probably about to get hacked.

Which is true.
We won't be using the console here.

-Right. Yeah.

This is a JavaScript console that let's you
run commands against the website

and some of these commands running at
Facebook would actually probably

give somebody access to your account.
So don't do that.

We do not condone the use of that.
Full disclaimer. But. For fun—

Because we are not actually
trying to hack your account.

We are doing things that are
playful and reversible.

So for that we'll come over here to
the "Elements" pane.

In Elements pane it's showing you
basically the structure of the web page.

It looks a lot like HTML and HTML is used
to generate here the Elements pane,

but it's actually different than the HTML
that the page got, because the elements

represent the DOM and the DOM can
change over time.

So anyways, it does represent
what's on the page.

So looking here,
is there anything you'd like to change?

I think we should probably
start with your name.

-My name.
-Your name.

Make it something
a little more accurate.

Something a little more accurate.
Well, let's see.

This morning I
forgot to brush my teeth.

Yeah, I noticed.

I think I know were we
are going with this.

So what I did is I clicked
on this little magnifying glass

and you'll see as I hover my mouse
over different parts of the page

they get selected and then when
you click on a part of the page,

it actually opens up down here,
inside the Elements pane

and we can actually make changes.
So it says Cameron Pittman,

I can double click on it and let's see,
lets change my first name to—

Farty Mick, Farster, Pittman.

And I'll press Enter and now we can see that
my name on the page has actually changed.

So if I were to let's say leave my laptop
sitting around and then come back to it later,

I might have a
momentary panic attack.

Well, or wonder how that happened.

Or wonder how so many people know,
you know, about my [INAUDIBLE].

Well, sitting next to you, it's pretty
hard to— yeah, yeah, lovely.

What else do we do?

You got a lot of friends there.
-Yes.

I mean, I wonder how
that happened.

You'd be surprised how
persuasive I can be.

And how easily people
accept Facebook friend requests.

Yeah,
that's true.

So what I did just now is I right-clicked
on this button here,

right-clicked on the friend button
and I went to "Inspect element".

That actually automatically opens up
this element inside DevTools, allright?

And so we can see that,
allright, it's a link, because it has

an tag here, let's open it up,
and look at that, there is that number,

1012. So just like before I can
double-click on it and I feel like

what you're about to say is
zero is a better representation?

I would say so.
- Yeah, zero.

Allright. Maybe it's worse than that,
may got've one friend. I am not even [INAUDIBLE].

How did that even happen.

Enter here and now you'll notice my friend
count dropped by a thousand and thirteen.

Whow Whow Whow.

I know, it's a sad day.

That's even worse than the kid on
South Park. I mean, he had no friends.

Anything else—
I think that picture looks way to much like me.

So I've actually pulled up another picture of a
cute cat here, because I know what the ladies like.

It's true. Cat pictures
are an adorable thing.

I wish I haven't said
that on camera. Sorry.

So anyways I came over here, so I copy
the URL for that image and so I come over here

and I don't wanna actually change it,
I just wanna change it in DevTools

so I am not gonna click that button.
Instead, I'm gonna go to Dev Tools here

We can see that we've got this image tag that
says and that just means it's an image.

and it's got source. It's got
attribute called source, which I now,

if I hover over it, it shows my picture.
And obviously we wanna change that.

So I will right-click and do
"Edit as HTML", it is the easiest way to do it

and I can start changing it.
So let's go into the HTML

and click, and click, here we go and I
will paste the URL here and just click off it.

And now my Facebook
page is a lot more adorable.

With a cool
kitty up there.

It is, it really really is.
it's—again—an improvement.

We just keep making things better.
-I know. Thank you so much for your help.

Yeah, I do what I can. I really, really do.
-It's good that you care.

The good news is
this is not permanent.

We are not actually
changing my Facebook page,

so if I hit "refresh", everything,
probably, and it looks it does,

everything goes
back into normal.

And that's a beautiful thing.
I mean, 'cause you don't wanna be

that jerk, that you know, changes
your friends page, actually goes through,

changes the image,
changes their name,

it takes them like 20 minutes
to get their page back to normal

Right, 'cause you go to
"Settings" and all that—

Right, I mean that's— and you might
not even have that much time either.

I mean, you might not
have the time to change everything.

Nice and quick way to
provide a momentary panic attack

like a good friend.

Right. It shows you care.
It really does.

So hopefully you guys
enjoyed this first lesson

in our experimental
Udacity After Dark segment.

If you have any feedback for us,
we'd love to hear what you think.

Maybe there are also topics
that you'd like us to cover,

so hit us up on YouTube
and let us know there.

Don't forget you can also visit on Twitter
or Google+ or whatever social network

you feel like putting up
on the page right now.

Sounds good.
Well, yeah. So until next time.

-See you.
-Well see ya!

U
UDACITY