google websites development

8/13/2019 google websites development

http://slidepdf.com/reader/full/google-websites-development 1/44

google websites development

more

web page

http://www.prismintelligentsolutions.com.au

Level 7, 91 Phillip Street,

Parramatta NSW 21501300 4 PRISM (1300 477 476)

you go ahead on the internet on yourlaptop or desktop you pull up your

favorite browser you type in www.google.com and hit enter

What happens? Let's tell this story andwe can be as high level or low level

as we want, and I'll steer us in bothdirections. So you've hit enter.

What happens?

Anything you got?

Oh. Good. So that's the whole story. That's very good. Let's tease it apart a little bit now andI'll

repeat some of the answers

sometimes into the microphone so thatour folks who are taking the course

from afar can hear everything

so your computer makes a request through your modem goes to your

ISP, reaches google.com serversand they've replied

with the response, so good.

now let's dive in deeper there, and let's focus onthe act of hitting enter

Does someone want to propose, just give me one step

in more technical detail what happensnext and then we'll get to that sameendpoint eventually

Perfect. So we first need to translatethe name of the site in this case the

www.google.com

into an IP address and, someone else,what is an IP address?

Good, so an IP address identifiesa server or computer on the internet

and an IP address is simply a number ofthis form. Let me go ahead and pull up a

little scratch pad for notes here

so an IP address as you've probablyseen as something in the form of w.x.y.z

and little internet trivia:each of these placeholders can be adigit from what to what?

...or number from what to what?

Perfect. 0-255, and there'ssome restrictions on what numbers can

be where, but essentially you have numberdot number dot number dot number. And each

of those numbers can be again 0-255.

If we've really wanna start pressingdeeper here, how many bits is used to

represent an entire IP address underthis schema,

for those familiar with bits.

32. So why is that? Well, forthough less familiar/unfamiliar, if you

want to represent the number 0 - 255which is a total

of 256 numbers

you need 8 bits because 2^8=256,But we won't go into

too much detail on along those lines

http://www.prismintelligentsolutions.com.au/






but if you've seen that IP addressesare just 32 bits

it is because each of these numbersis 8 bits itself so actually let's

go here. There will be much math in thiscourse after at the following sentence

really

but if you have 32 bits:how many possible IP addresses are there

for the world's computers?

so it's to 2^32 which is roughly..those who are good with math in their heads..?

So it's roughly 4 billion. So that's a lot.But these days most of you have

laptops. Most of you have desktops

Most of you have telephones in your pocketsor Ipads or

the like. So there's more to placesthese days that are consuming

IP adresses

so if you follow the popular media

of late you'll find that people havebeen freaking out that were about to run

out of IP addresses but that'sbecause we've been using version 4

for far too long.

Thankfully version 6 (u.v.w.x.y.z) has begunto get rolled out

and version 6 (u.v.w.x.y.z) will have128 bit IP address..which is great, because that's2^128

which is huge! Barely pronounceable.

But it will also become alittle more complex to break these

things down so we can squeeze a few moreyears of discussion out of these

addresses but realize the world is

transitioning

now just for the sake of the experiencefor those at home let me actually pause here

just so we can plug in this recordingdevice so we can capture to another

format so let's leave that is thatcliffhanger for just a minute or twoand I'll be right back.Where did we leave off?You've just hit enter.We had proposed that your computer

had translated or needed to translatethe hostname www.google.com

into an IP address and then we talkedfor a moment about various forms

of IP addresses

so let's now push a little harder on howthis translation happens

so Google has a numeric address of thisform (w.x.y.z)

and as an aside Google actually probablyhas a whole bunch of IP addresses

of that form. All of which lead to

the same experience but perhapsdifferent servers

so how does your little Mac or PC orLinux computer know

what the IP address of www.google.comactually is?

OK, good. So, it has to do a domain namelook up using a DNS server.

For those unfamiliar, DNS is domain namesystem

and this is an infrastructure on theinternet that pretty much does exactly

that. It converts domain names andhost names

to IP addresses

and vice versa and will see tonight thatit does a few other things in terms of

helping with the routing of email

with validation of ownership ofdomains and the like

so there are these servers out there nowyour computer or your home probably

doesn't have its own DNS server

but probably Harvard does if you're oncampus or Comcast does or Verizon

or your company does.



Now if you're at a small college forinstance and you're not visiting google.com

but your visiting some random website.comIt's very possible that you were

the first person on a campus to visitthat website ever

or at least in a long time

so what if your small little campus'sDNS server has no idea what

this IP addresses is?

Are you sort of out of luck because youwent to that school, and not one where

there's more people using that websites

or equivalently, it's kind of the chicken and the egg problem (which came first?) if you're the first

person to

ever need to visit that website andtherefore your campus's DNS server

has no idea what that mapping is

how do you solve this problem?

Exactly. So there's a hierarchy,thankfully to the DNS system whereby

even though you might have your ownDNS server on campus or company

but that doesn't necessarily store allpossible domain names and IP addresses in

the world. In fact, that would be quite alarge database otherwise and it's just

not efficient to keep all of them aroundif they're not being accessed at allor very frequently

but your ISP

knows some bigger fish and maybe thatbigger fish knows an even bigger fish that

has its own DNS servers that mightknow, but in the worst case

if no one along this hierarchy knows,there also exists in the world what are

called root servers

which are spread out geographicallyacross the several continents

and it's those root servers thatessentially know

who does know, what the IP addresses ofsome random website.comin other words those root servers know

who the authority is for instance forall of the .com's in the world, for all

of the .net's or the like

so that you can have this initialrequest from little old your computer

bubble up to these very high-levelservers and then bubble back down to

some authority

who does actually know

and the reason why that works

is because when you go and buy your owndomain name which is a

process will discuss in just a bit

you have to tell the world what the IPaddress is of

you DNS server, so someone has tobe informed proactively once really

and only once when you buy the domain sofor now let's come back to our story

We've hit enter

Google.com was in my browsers window.My computer has somehow figured out that

it is 1.2.3.4 or something like that

so now my computer puts together amessage to send it across the internet

to Google.com.What does that message look like?

Well in it's simplest form - it's a messagethat pretty much looks like this. It is

literally the word GET in all capsa space a forward slash ( / ) if you're just

requesting

the root of the web server markedtypically with /

and then HTTP /



version number

Now in reality, there is a few more headers,so to speak, HTTP headers that get

sent

from browser to server, and we'll seethose in action in just a bit,

but this message captures

really the most important aspect of therequest

so your little computer creates avirtual envelope more technically called

a packet of some sort inside of thatpacket

is a message like this

Put on the front of that virtualenvelope is a "To" address namely 1.2.3.4

or whatever Google's IP addresses is.

In the return field of this virtualenvelope you know just like you were

mailing something to a human there's thereturn address who which should be who's

IP address probably?

Your own IP addressing, and yourcomputer does know that if you have an

internet connection

and then your computer sends it out on theinternet. Now we can dive deeper and

deeper and deeper but for now assumethat your ISPhas what's called the default-gateway

also known as a router

and routers are the computers on theinternet that know how to get data from

point "A" to point "B", or if they don't

know precisely how to go for "A" to "B"

they know whom to pass it off to

who can then get it one step closer topoint "B"

so in reality a packet, this virtualenvelope,

might go from router to router to routerto router sometimes as many as thirtydifferent routers across the globe

until finally it gets to its actualdestination Google.com.

Google receives this virtual envelope,

sees that it's for its IP address,opens the envelope up, sees this message

Google.com server happens to berunning a web server and so that

webserver looks for the file called "/"

now "/" is typically a synonym for anactual file name like index.html

or index.php or any number of other

default standard file names

so Google grabs that file from its harddrives and then puts it it's an own

virtual envelope

flips the two IP addresses the from andthe sender

sends it back to the internet via theserouters

it arrives on my computer. My computer,unbeknownst to me, opens this envelope

sees a whole bunch of a language calledHTML

renders that HTML top to bottom and Isee

the search page for Google's main site

What is the function of the slash?

so whenever you type in a URL

There are several differentcomponents to it. HTTP typically

followed by :// followedby something like this (www.google.com/)

and so this is let's say arepresentative URL, but we can

actually to tease this apart into a fewcomponents.



This is the protocol or schema at thebeginning,

even though in a browser we almostalways used HTTP://

Have folks seen others?

HTTPS, similar, but different, inthat it uses cryptography - a topic we'll come back to.

FTP://SFTP://

WEBCOW://Some of these are more standardized than

others

but the schema is typically an indicatorto some piece of software

how it should view the contents atthat address

so what comes after the ://It typically has something called

a hostname

or sub domain name

followed by the domain name, which inthis case is google.com

or followed more precisely by a domainname witha TLD - top-level domain

a .com .edu .gov .uk

would be the TLD and then you havewhat we call a path

and a path specifies exactly what fileor folder you wanna access

A single slash means get me the root ofmy hard driveand if you come from the windows worldthis is essentially equivalent to C:\

Or on a mac it's equivalent tothat, or on a Linux computer it's

equivalent to that.

So that is truly the root of your harddrive,

the folder in which everything else onyour hard drive lives

now it turns out in a browser thesedays you don't have the type

most of that. you can omit the HTTP://You can typically omit the www.You can

omit the slash, and things just work

Why is that? both for the most part it'sbecause browsers have just gotten a lotmore user friendly

right there what was the time a fewyears ago where advertisements

in print and on TV would actually haveHTTP://

but then the world kind of realized thatyou know anytime you see www.

something

probably a website so we startedomitting HTTP://

Now the world has gotten acclimated toany mention of .com or .gov so

we don't even really need the wwwanymore and so whether or not www

works or doesn't work

is actually completely configurable bythe system administrators of the website

and in fact

i don't have a

sort of a soapbox to hop on right nowbut invariably during a semester, I'll

come across some website

for which foo.com or whatever thedomain is .com

just doesn't work you have to type inwww.something.com

and that's just a foolish technicaldesign decision on their part. We'll talk

today about how you can configure thingsto just work, and it involves a bit of

DNS

a bit of web server configuration

but typically you don't see that dead end

because browsers these days if you typein foo.com and hit enter and

there is no foo.com IP address out there



the browser will presumptuously or helpfully

prepned "www." to the start of theaddress

and then retry that one

some browsers if you just type foowill automatically try foo.com, foo.net, foo.gov

some of the most popular ones so inshort

a lot of the technical processes thatare happening are being sort of hidden

now by browser user friendliness

for better or for worse

So, the story began with hitting enterthe story ended with you're seeing the

home page of Google.

Any questions on the various steps inbetween,

whether high level or lower level?

Allright, so that's the story told from theperspective of a user.

Why don't we tell the story from theperspective now of someone who owns a

website or wants to operate a website sosuppose one of your goals in this class

or some other

is to actually have your own presence onthe web

to actually buy your own domainname and have your own business orpersonal home page or whatever the casemay be.

How do you go about doing that? You needmore than just a laptop and a browser now

you need a server

on the internet because even thoughevery computer on the internet,

your laptop included

has an IP address

it's not necessarily publicly accessiblebecause even that statement's a bit of an

oversimplification.

You do not necessarily have apublic IP address. In fact if you gohome

and you have internet access at home,especially wireless

you probably have a home router like anApple Airport Extreme, or you have a Linksys

router or some device with antennasthat gives you wireless internet

access but Comcast or Verizon or whoeveryou're paying each month to give you

internet access into the house via yourcable modem or DSL modem

which in turn is probably connected tothat router

if it's not one in the same device whichsome of the ISPs provide these

all-in-one devices these days

Odds are you have one IP address and if youhave 3 brothers and sisters

or parents or grandkids in the house

all of you are sharing

that one IP address

and yet the individual computers in thehome still need an IP address.

so what actually is the case is thatwhen you're in a home network you have

what's called generally a privateIP address something of a form..

Anyone know what up popular internal IPaddresses is?

Exactly. Anything, in fact, starting with192.168.x.y

is a private IP address, so the folkswho invented the internet

along the way decided "You know what? Weshould probably have some IP addresses

that should never be given out."

So that within the company or home or alittle test network

you can have IP addresses that areguaranteed not to exist on the public



internet

so what home routers typically use iss192.168.0 or 192.168.1

and then the last digit, it can be againbetween 0-255, but some

exceptions. It really it can't be 0 or 255,

so there are some constraints, but it gives you

roughly 250 or so possible IP addresses

If you don't like that, there's:172.16.x.y

There's a few more constraintson this one, but then if you really need

a lot of internal IP addresses

you can have what's called a "class a"private network

10.x.y.z is a private addressand this actually gives you millions of

IP addresses for your home or yourbusiness

or your data center, but in short

any IP addresses beginning with thesefew other prefixes are considered

private

but the problem then is that even ifafter this class you know HTML and CSS

all the better. You know PHP, and SQL, and Javascript

and you creates a website and you'verun it on your laptop using softwarewe'll introduce you to.A web server called Apache

no one in the world

is going to be able to visit yourwebsite because

your address probably starts with one ofthese prefixes

and your home router or cablemodem or DSL modems is not going to

let outside random people into your homenetwork

to access this IP address

because

frankly there's tens of thousands ofpeople who probably have that exactsame private IP address, so it's justuniquely identifiable

and because your home router

and your cable modem is sometimes afirewall into itself this traffic not

gonna get into your home

so in short that won't work..

but you have at least two options, twoalternatives, how can you get your website

out on the internet?

You can. Port forwarding. So let's gothere. For those unfamiliar when you use

a protocol like HTTP:// you're actuallyusing other protocols behind the

scenes and in fact you probably at leastheard the

the buzzword TCP/IP transmissioncontrol protocol internet protocol

It's actually two protocols, two differentstandards or languages so to speak

that govern how data can be transmitted

on the internet and this is a bit of anoversimplification but for today's

purposes assume

that IP, the internet protocol,

is just a set of conventions thathumans came up with years ago

that govern how you associate numericaddresses with computers

so IP address derives from thisprotocol so IP is just the standard for

assigning computers addresses however justsigning someone an address

doesn't mean you can get data to thataddress for that you need another

standard another protocol

and that's typically TCP transmissioncontrol protocol

http://localhost/var/www/apps/conversion/tmp/scratch_3/website




So TCP

is the standard

that web browsers and web servers speak

in order to actually physically move dataor electronically move data

from point "A" to point "B"

using the higher level notion of anIP address to actually uniquely

identify points "A" and point "B"

so for those

who might want to go further in computerscience and in networking in particular

there's typically what's called theTCP/IP stack

and so there's topics like there's thetransport layer down here there's the

others the IP or addressing layer here

there's the application layer in shortmuch of the internet is the result of

smart people having design things andthen design things on top of things on

top of things

and so we just typically over simplifyand say TCP/IP.

So what's the point there?

TCP/IP allows not just the web towork but all sorts of applicationsThere's the web. There's email.

There's instant messaging.

There's things like Spotify. There's dedicated

applications they're using the internet

but aren't necessarily inside of abrowser

so

a server can actually do multiple things.It can receive email like Gmail can.

It can be a website and get HTTP:// traffic

so a server because it can do multiplething somehow needs to be able touniquely identify

the various things that it can do

and so the world introduced this notionof port numbers

and typically for a web server

Rather, for HTTP:// it uses thisprotocol TCP and the world decided some

years ago

the number 80 will arbitrarilybut consistently identified this service

so if you have a server and you have awebsite, and a website uses, as you

probably know, HTTP:// but will look atwhat that means in a bit

it is running so to speak on port 80it is listening so to speak on port 80

and the motivation for that

is because you might also have

an email server on the same physicalbox , right? Gmail, kind of an

oversimplification, but they are both awebsite and an email service, and if you

want to be able to send email to Gmailyou can also used TCP but you have to

use port 25

in other words if you've go to http://www.gmail.com

a with a browser you obviously want toweb page back

so even though you, the human,haven't typed 80, it's automatically

inserted for you by your browser, behindthe scenes

but if you send an email from Eudoraor apple mail or Outlook or whatever

you're using

you again probably don't have to care aboutthis detail but that program



is going to send data still to gmail.com

but specifically to port 25.

So, when a computer's on the internet, aserver, and it's listening for traffic all

of that traffic comes in on a specificport

a specific like pathway into the server

so that it knows if it's a webpage or an email, right? Because especially email; emails can

contain HTML now

so you need some way of distinguishingthe two fundamentally

so when you propose port forwarding, whatdoes this mean?

Well, if your home network

has a public IP address, and you usually, again, get 1 from your ISP

and that is some address of the formw.x.y.z

and your individual laptop on whichyou've created your final project that

you wanna make publicly available

is that one of these IP addresses,doesn't really matter what it is,

what you can do is configure your homerouter AKA firewall AKA cable

modem, it depends on what make and modelyou have,

but that device,you can configure it to say

any internet traffic that comes from theinternet to my home

on my public IP address

destined for port 80

should be "port forwarded"

to IP address 192.168.x.y

port 80

in other words you can tell this machineto take incoming data on that port

and then route it very specifically to thiscomputer, your's,so that it just works.

Now, there is one gotcha here.

Especially if you have siblings, for instance orother technically minded family members

or roommates

if you're doing port forwarding in thisway

only one of you can operate a webserver

behind your cable modem because you onlyhave one IP address to uniquely

identify your website and if you'vealready claimed 80 as your own and

that's the default for the worldbrowsers to use pretty much only your

webserver can be accessed

now there is a work around here if yourroommates really ticked off at you, you can

say "Fine, fine, fine, I will give you port 81."

but what does that mean? That means theentire world has to type out a URL like

let's say your address was indeed w.x.y.z

this would be your IP address

your URL

your roommates, unfortunately, would be thiscrazy looking thing (http://w.x.y.z:81/),

right, or any number really.

Now, there are some restrictions on thenumbers. Probably can't use 81,

but the point is the same.

This is not standard, and you probably don't want your users having to remember such an

esoteric detail as an arbitrary number.

However if on the internet



you visit any website with :80,

odds are you will get to the websitewith which you're familiar it's just the

browser is again for user convenienceinserting the port number

automatically for you.

and little trivia for HTTPS, the secure version of HTTP, what port number does that use?

443, and you sometimes do seethat in the URL and you also see some other

ports commonly like :8080

:8080 is just kind of arbitrarypopular port that some companies used to

run certain services but in short usinganything non-standard these days

especially for commercial production websites where you're trying to make money

or trying to stay online up one hundredpercent of the time

using non standard ports is bad, because thereare certain companies, there are certain

campuses that will pretty much block anyports besides 80 and 443,

but thankfully there's a work around,even if you wanna run some random server

like a bit torrent server, or something likethat

all you have to do is change the portnumber to be 80 or 443

so the reality is that with firewalling and willhave this conversation toward the end the

semester, when we talk about securitymore generally,in a lot of security mechanisms are kindof a joke because all you need is a

modicum of savy or you know,

having listened to the past30 seconds of words that I just said

you can circumvent these kinds of

restrictions. Hotels do this a lot,Starbucks does this a lot

the port numbers are really just this verybasic

mechanism, and the world and adopted somestandards, alright,

so, perfect! We have a solution. All youhave to do is somehow figure out

how to download the manual for yourLinksys router or Apple Airportand you can configure all this portforwarding stuff and run a website

from your own,

so not quite. Because if you actuallyhave a popular website, Verizon and Comcast

might very well notice and just shut you off entirely,

because that huge disclosure agreementyou probably clicked through and never read when

you signed up for internet serviceprobably said you may not run

a website on your home computer

so plus that this was a pain in theneck to do anyway, plus I might

unplug my laptop sometimes and so mywebsites gonna go down anytime i go to

go out

so not the best solution even if youhave a desktop so let's at least try to

push a little harder and assume that weneed to outsource this problem, or we

at least need to put your computer

on the internet itself, in a data center,on the campus, where it can stay plugged in

perpetually, under your desk at work ifthe system admins allows it,

and moreover i don't want my website to live atw.x.y.z,

or any number for that matter,

I want it to live it david.com orsome URL

that is sort of distinctly my brand ormy name,

so that begs the question how do you goabout

getting your own

domain name?

Has anyone done this before? Yeah, how do you do it?



Okay, where do you purchase them?

Okay, so namecheap.com is a verypopular place, fairly inexpensive

Go Daddy is another very popular place

This one (Go Daddy) is kind of riddledwith

up-sell attempts, trying to get you to buyeverything in the kitchen sink,

but you don't need to do that. There's all there's all sorts of

domain name registrars out there thesedays. A bunch of years ago

network solutions was the only one,

but then the market was created and sothere's a lot of places to buy domain

names.

For the most part, it doesn't matterwhere you buy your domain name from, but

you do sometimes get different features

in particular you get DNS featuressometimes, more control over your DNS

servers.

They might throw in free email accounts,free hosting,

but for the most part, it doesn't matter a hugeamount in particular, you don't need to go

to someone like network solutions andpay thirty dollars a year, when you could

go to someone like Go Daddy and pay$9.99 a year or namecheap andpay $4.99 a year

so in short paying more for domain name

isn't necessarily giving you anythingmore

uh... in the way of

uh... functionality. It depends on what maybe the add-ons are.

So, how do we go about doing this? Well,let's go to something like Go Daddy.

Go Daddy's kind of a...Well, let's actually try namecheap.

Let's go to namecheap, see what theylook like,

much of my friends have indeed used thiswebsite.right so let's see domain name to searchand the search for david.com

probably take. Oh,l that is a goodprice. Already doing better than Go Daddy

All right. So as I expected it is takenas are almost all forms of david.

*Ha* They've suggested I name myself "DavidJohn", "David Smith", "David Johnson", "King

David", "David Photography.us"

So one of the hardest things, frankly, ofstarting a business these days is

finding an available domain name, let aloneyour own personal vanity domain names

for people's names

but if we found something we like.. MaybeI do want DavidTV... Well, that's atrocious.

$6,000 for this domain but it's not yet taken.

It's probably one of the cheaper onesup above so let's assume we found something

we're happy with

so we add it to our cart and we check out

I now own some domain name,David something.com.

So what now do I do with it?

How do I associate it with my web server?

and for that matter, how do I get a web server?Let's assume I have a web server, and we'll

cross that bridge in a moment,

but I have a domain name.

What do I need to do with it to startusing it? Well I need to tell the world what

my IP address is.

So I need to, somehow, tell the world thatmy server.. I don't know who's going to be

hosting it, but i know it will have aIP address, by nature of how the web works.



so let's assume I know the IP address isgoing to be

w.x.y.z.

I somehow have to inform the whole world

that david.com's IP address isw.x.y.z.

So one of the things I'll have to do atnamecheap.com or Go Daddy or

networksolutions.com

is I tell the registrar

not what my own computers IP addresswill be

but rather what the IP address

of my domain names

DNS server's will be

and the convention is typically thatevery domain name in the world should have

2 DNS servers: primary and secondary

so a main one and a backup one.

They can be one in the same, but theworld really pushes people having at

least two for the sake of up time andredundancy

so I need to know not my own IPaddress, per se,

but I need to know the IP address of oneand then a second DNS serverNow I don't have my own DNS serversand I want to configure two more

computers in addition to my webserver

so this is where web hosting companiescome in.

So in addition to buying the domain nameI also wanna host my website somewhere

and it could very well be the same exactcompany. Could be Go Daddy, it could be

Name Cheap

depending on the service that theyprovide, but

we need to have

a web hostingoption. So what's the web host going to giveus? A web host is going to give us

hard drive to put my files on, you know,maybe not hard drive, per se, but some

illusion of storage space

they are going to have their ownconnections to the internet

this web hosting company

there hopefully gonna have a pool ofIP addresses so that I can have at least

one of them.

They're also going to have someRAM. they're also going to have technical

support staff. In short, they're gonnahave a server, and all of the things

necessary to keep a server alive on theinternet,

and hopefully they're also going to haveat least 2 of what..?

DNS servers.

So if I decide to host my website, let'ssay dreamhost.com. This is a very

popular sort of "El Cheapo" (basic)

kind of web hosting company

that I've used myself in thepast like $6.95 or $8.95 a month.

So that's pretty good butagain you get what you pay for.

I wouldn't necessarily build a big business on it

So for $8.95 a month

I have the ability to upload my HTML andCSS files and soon PHP and Javascript

files to their server.

Their server has nearby 2 DNSservers, each of which, have their own

IP addresses. So once I know whatDream Host's IP addresses are for its



nameservers, I'd tell Name Cheap

or Go Daddy, or wherever I bought my domainname

and that's it

the only time I have to talk to myregistrar again, most likely, is in a

year when they charge me another $5.99 or $99 for my

domain name. Unfortunately, "buying,"

you're really renting your domain namefrom these registrars.

Now there's a whole bunch more involvedin setting up of the web server

and getting my files there

but at least now I've told the world

that if you want to know where david.com is

Ask these people. These two IPaddresses of the name server. Either one

and those IP, those DNS serversshould hopefully know. Why?

Because so long as I keep payingdreamhost or someone else $8.95

per month

they will ensure that both of thoseDNS servers

know what my own website's IP address is,and how will they know?

Because of what I'm paying for is somestorage space and some internetconnectivity on one of their servers, oneof their servers has an IP address

so they just tell their DNS serversthat david.com's IP address,

is whatever the IP addresses is of theserver

they've told me to put my content on.

and will actually look in little moredetail

what's involved in that.

..but any questions?

so in answer to the somewhat

frequent problem where a websitedoes work at www.something.com but not atsomething.com

How do you fix something like that?There's usually two pieces to the

solution

1. You have to make sure that there's aDNS record for something.com

that is, there's an IP address associatedwith it. In addition to one being

associated with www.something.com

and you need to configure the webserverto accept requests for either something.com

or

www.something.com

but really let's focus on just thisDNS piece for now.

so DNS... turns out the DNS isrelatively straightforward and once you

start operating a whole bunch ofservices on your own website. Maybe you

have an email server,

maybe you want to use hostedservices like Google calendar

Google docs. You can do things like

actually for CS75, for this course,

the TFs (teaching fellows) and I

use Gmail essentially to host CS75.net's email

so that's the website as I'll soon reveal

if you haven't pulled up the website,

and we want to be able to have an emaillist so that each of us can email

everyone else very easily. So we want email addresses of the form [email protected]

Now how do we do this? Well, we couldset up a mail server, we could pay



someone to do this, but an amazing serviceout there is Google apps, some of you

might be familiar and for small fishlike us where we only have a few people

on staff

you can actually have hosted Gmail,hosted Google calendar, hosted

Google documents

for I think 20 or fewer people for free

and what you do is you configure yourown DNS servers

to map

something like mail.cs75.net

to essentially gmail.com so thatwhenever we send an email to

something of the form mail.cs75.net, it figures out

via DNS to actually go to Google.We could have calendar.cs75.net

and you hit enter,

you actually end up at Google Calendar,but our copy of

Google calendar, and this is all thanksto DNS and there's only a few

settings with which need to be familiarand we already talked about this one

an NS record

isa record in a DNS server

that tells the world what the IPaddress is for that domain.

So, what's inside a DNS server?

Frankly it's a database, and you canthink of it as like a database with

excel files so spreadsheets that justhave rows and columns

and those columns essentially represents..In each row, rather, you would

have for instance a domain name and an IP address.Domain name : IP address.Domain name :

IP address.

That's really allthat's underneath the hood in a DNSserver at least so far as we're concerned.

But there are different types of rows.So one of those rows can be an official

record

that says the name server, NS, for thisdomain is whatever IP address Dreamhost gave me.

For instance

Now, what else can I have?

Well there's an "A" record. So an "A"record, a row of type "A" in that this

spreadsheet of sorts

is literally

Domain name : IP addressit's as simple as that, so if I had something.com

In it's like the address should bexd w dot x dot y dot c

that's what's called in a record

and i can also have mail docs aresomething dot com or calendar dot

something dot com

and i can associate with an i_q_ dress

and how do i do this they totallydepends on your registrar or on your

d_m_s_ provider whether extreme postergo daddy like

but these days it's usually a webinterface back in the day

it was a command line you added a textfile on the server but these days it's

been made to be more user-friendly butit's essentially

a spreadsheet

thirst to his slightly fancier features

a c name



or canonical name

isn't alias so it turns out with a lotof these webservices like school blacks

where google's providing the service

you don't necessarily want to have toknow what google's i_p_ addresses

writers one deep right on the only onewho works there and so you can't really

ask them out frankly could run a commandin figured out

but if you hard code into your work in aserver

the i_p_o_ dress of google dot comimplication is that if they ever need to

change their i_q_ address which happensnot everyday pretty however few months

few years for whatever technical reasons

now your website goes down

it's common kinda be better

at least like a conceptually if

calendar dot something dot com

didn't resolve to google's likey addressbut rather what if pounder dot google

dot com could instead resolve moregenerically too

calendar dot google dot com

so don't have your domain map to a nikeaddresshad your domain name map to someoneelse's domain

and then let baird cnf server tell theworld

what the ac current i_q_ addresses of

calendar dot google dot com

so in other words if you want this layerof obstruction where you don't care what

the i_p_o_ dresses you just care thatyour domain india synonym for someone

else's domain name

then you use a c name record and whatthe two columns look like our domain

name domaininstead of the main aim aki address

so it's a wonderful useful feature

especially these days if you look intohosted solutions not just like to

collapse

but companies that have services like

uh... you know i customerservice forums

if you go to a website know often havean address like support dot dell dot com

or the like

well there's a lot of companies daysthat to provide

our customer service web sites

at but it would look kind of lame if igo to del dot com and i get redirected

to customerservice dot com

del would provide read rather re brandsomeone else's service

to look like dell even though someoneelse implemented and is hosting it so

why us by a c name someone like dellcould say support dot dell dot com

should actually result tocustomerservice dot com but the user

should never know that because the oralstage support dot dell dot com so that's

just one of the things you can do

with these things called seanangs

and lastly in annex record as a maleexchange record

and mail change record simply states

what is the i_p_o_ dress

of the server or servers that shouldhandle inbound mail



for this domain

and this is great

because when you use your door overgmail or outlook

and you type in the year uh... davidmail-in at harvard dot e_d_u_

and hit enter

similarly there you have no idea whatharvard's i_q_ dresses

but your computer does but it's not thei_q_ dress of harvard that you do you

per se that your email client needs

it's the acted as a partridge mailserver

so thanks today that's your mac or pc

can ask your icici is deanna server orgdot doc dot this whole hierarchy we

discussed earlier

in state what is the annex record forharvard idea

and harvard dot e_d_u_ still means nameservers should be able to say send all

mail to the psyche address

and what's nice about annex records asyou can have multiple wants with

priorities

so websites orf ratheruh... domains that had very old largenumbers of users were you really don't

want their mail servers going down

you could have two or three or tendifferent mail servers

and the d_n_a_ system all say try thisone than this one than this one than

this one

just in case any of those go offline

it's all thanks to d_n_ s and whileresearch take all this for granted

once you start developing your ownwebsites maybe creating your own

companies or confirming back your ownschool having these abilities iswonderfully powerful and it really boilsdown to

basics

any questions

all right so that was kind of a lot wantto take out three or so minute break

characters restrooms in the hallwaythere soda machines i think around the

whole corner

on the move rejoin in about three mins

alright we are back so

why don't we take a look at the courseitself and what you are in four and with

the courses expectations are so in termsof prerequisites the official

prerequisites are these so much moreyears of programming experience as well

as comfort

with html c_s_i_s_

so what does this mean in real terms sosummer school is very short since about

six weeks and of course has three nalunch for billy sized projects

and the gold really is to make sure thatat the end of this short semester

you feel quite comfortable going off anddoing much more on your own in the way

of website development not just htmlonce yes s

informed static websites but reallydynamic websites that are driven by

a language like p_h_p_ and javascriptback in the database like mysql

so it's a fairly intense course uh...

if you believe takin

something like computer science asks oneof the introductory computer science



class

we're just one or two courses i will sayfrom past experience

you'll probably find the core

challenging to say the least andtypically willy estimate about thirty

hours per project so there's threeprojects universally nine days for each

of them

on that's about thirty hours each butthat was beyond average so students for

whom programming is a little lessfamiliar or it's been a bunch of your

since you program to read only taken oneor two introductory courses but don't

really think of yourself as a programmer

on the course is definitely morechallenging so do beware uh... diving in

i will say if you're on that fence andnot sure if your comfort level in

background is there

but you can go to c_s_ seventy-five dottv which is the opencourseware site for

the course

where we have several previous semestersworth of lecture videos handouts of

projects some of which will be aresimilar to this summer's

so by looking for the past you canperhaps in for as to what this summerwill be like and get a sense then

if the p_b_s_ of pastors projectscompletely overwhelm you

or completely excites you

so i would try to use that as anadditional input tonight

uh... before deciding whether this isthe course for you

um... in terms of expectations

and there are these three projects inattending or watching if distant or

unable to make it all in-person thelectures

on the lectures will be structured asfollows two tonight our focus is onh_t_t_p_ and for the mechanics theunderlying fundamentals of the internet

that for years you prolly taken forgranted

but once you really start building yourown website and having to negotiate

things like configurations of serversand coding databases tonight will start

looking at some of those more technicaldetails

on wednesday and han next week will lookat p_h_p_

itself so one of p_h_d_'s on mostcompelling features these days is one

it's in tactically very familiar arevery similar to mine which is with which

many of the folks in this room in athome or familiar syntactic lee it's

similar to ciency plus plus

on and other a procedural languages

on this very much in vogue very popularit's pretty only present these days in

terms of the web hosting companies thatthey're out there and its super easy get

setup even mac o_s_ comes with p_h_p_ anapache the webserver pre-installed

and their packages for windows in thenixon other computers that make it super

simple to get setup on in terms ofrelated languages rop iphone in ruby

you're probably the to close thiscontenders in terms of popularity with

p_h_p_

and none of these is necessarily betterthan the others who could very quickly

devolve into a religious debate

but one of the nice things about p_h_p_is again the omnipresence of support for

a doubt there

and also i think pedagogical e thedocumentation for p_h_p_ is outstanding



and as you'll see

the p_h_p_ dotnet online referencemanual for functions and whatnot is rich

with examples intelligent discussionsand so we've just found

that it's a very nice way of diving indeeper to web programming in front of

course like this you should be able tocontinue on

if you haven't come from that directionare ready to the likes of pipeline

of ruby andrea speed for the job ofworld they espy's for the windows world

there's a lot of commonalities amongthem

will transition lecture three

to looking in exile alyssa when it comestime to actually store data whether

statically or dynamically

you don't need a full-fledged databaseyou don't need my sick we don't need

oracle you don't need anything alongthose lines you could just use text

files

but he'd be nice if it's easy to readand write those text file select some

now

is a very popular language of sorts ofmetal language with which to right now

textual files and to representative moregenerally of the topic will come back towhen our javascript lectures

on the document object models so they'llbe some commonalities there

uh... as sql are structured querylanguage is what's used by a many

relational databases these days amongthem my sequel

oracle postgresql theirs

also in vogue these days or are nosequel servers document uh... storage

engines which will look at later in thesemester as well

but will primarily used for the coursesprojects my sequel

will look at lecture six and seveneighths javascript and at this chat moregeneral technique of ajax the ability toyou

whose javascript

to query a server even after pagesloaded

to get back more data for instancegoogle maps does this to get more

reptile squares of mapping informationwhen you click and drag

a face book does this to push of liveupdates from your news feed in the light

i will look toward the end of thesemester then

at some higher level concepts like

security which wool interlacedthroughout the semester but will really

focus on it

in lecture eight looking at commonattacks on web servers on websites on

databases

so as to not necessarily acquaint youwith everything they can go wrong

but to at least plant the seeds in yourmind of things you should be thinking

about indeed there's so much code outthere

that is just one ruble because thepeople don't think do things like

sanitize user input that is they don'tcheck it for dangerous characters

so we'll talk about things like sequelinjection attacks will talk about

uh... prostate scripting attacks in anynumber of other ways

that are so darn easy to avoid

yet many people just

don't realize it or don't know howinferno typically

simple little function calls conflicts



and in the last lecture will look atscale build so would be of great problem

to have if you've got so much traffic

that all of the lessons you learn fromlecture zero two eight

uh... starts at your website searchcrumbling under the load and so will

conclude the semester by looking at

okay now you have to build now for a fewdozen people two hundred people your

school

but several thousand or maybe evenseveral thousand people per second how

you actually scale

from one little webserver to a biggerone

but then once you have the biggest andmost expensive available webserver what

do you do

we start to scale as they say poor isawfully so you get multiple servers

maybe even cheaper slower web servers

but you somehow figure out how tobalance lowdown so to speak traffic

across them

how do you do that we databases how doyou do that geographically

uh... how do you do that with cloudcomputing a buzzword that's all the ragethese days but has a very interestingtechnologies inter-lining

will wrap up this master looking atthose bigger picture

issues

in addition to second lectures

we will have most weeks on sections inoffice hours for the course has

uh... for teaching fellows folks whohave either taught or take in the course

before

who'll be with us in the form ofsections and office are sections will be

a more slightly more intimateopportunities so on wednesdays inmonday's typically right after lectureif you'd like to stick around to dive a

little deeper into that weeks project

so in addition to the pbf specificationyou'll get of a project

one of its yes will walk you through theweek uh... the week's project to give

point now

offer some design tips awesome helpfuldirection answer any confusion

why did something quite poorly inlecture we can revisit those kinds of

luck topics in sections that you getanother perspective altogether

and then office hours which is meant tosimply follow

section so one section officially wrapsafter an hour

uh... office hours will be anopportunity for one-on-one human a with

one or two fifty s

uh... and this will be an opportunity inparticular

for questions with the projects ifyou're having trouble understanding

something trouble chasing down some bugin addition to reaching out to us on

line with a bs in person opportunitiesfor those of you who are local for those

of you were dissent

more on the online opportunities in justa moment

in addition to

um... the courses classes there areprojects three of them and they will

outflow

roughly in the order of the topics onthe syllabus portal start in terms of

p_h_p_ which would be new to song ormost people in the room



then will introduce mid semesterdatabases in my sequel being will

introduce javascript and ajax

and so that all sense would be thetripartite approach

of the courses projects in terms of thetopics

um... in terms of grades on projects aregraded fairly holistic lead because

you'll be encouraged to make a lot ofdesign decisions on your own

you won't necessarily have to implementper slice lee

what we tell you to rather you'll haveto meet certain feature and technical

requirements

so will to evaluate the three projectson these axes cisco will be in axis that

and it'll be a numeric sport thatcaptures how much of the project you

actually attempted

uh... correctness will capture how muchof your code works in accordance with us

back

if it's very body that would not beconsidered very correct

design is more subjective design is painmight work might work perfectly

but does it look like a mass underneaththe hood you had like ten nested four

that's that is not good designed forinstanceand so designed to be an opportunity forpf particularly qualitative feedback

from the teaching fellows on your code

and style

is the more of the aesthetics or yourvariables reasonably named are is your

code well commented is it nicelyindented

the sordid easy things that are goodhabits to getting to meet if you're not

yet enough

that's what we define a style

and then just for reference things areweighted in roughly the order the amountof time that's required to get thingsright

so for instance this is the formidableused a computer total score for each of

the project

were correctness for instance isweighted more heavily

then style and uh... batch of capturethe fact that

inventing a code polish and take you allthat long but she seemed on bob's

concert retake

quite a bit of time

so the format was meant to capture

um... the courses website which helpopen just a moment has everything that

you will need for the course includingvideos of lectures if you can't make it

some evening work it's tricky because afull time work

totally fine to watch the courseslectures online all the handout

similarly will be available there

what will be rolling out over email thisweek is access to a tool that actually

uh... we've used in another class ofmine concious fifty but it's a

discussion tool that will allow you tointeract with classmates with myself

with the courses t_s_ online

sab online discussion forms of sorts butusing some of the same technologies that

will talk about

in the class including a jackson similar

on so you will soon receive emails fromus with invitations of sorts to create

accounts within the uh... website



so that we can you can start directingquestions to classmates poor privately

to the staff

biopsy is fifty discuss

so any questions on the structureexpectations of

but here in the right place

must of course itself

in terms of

attendance is uh... expected andencourage bucks not factored

so see it in a sense of protracted

uh...

then in terms of lecture typically wereese were slated for three fifteen to

six fifteen i think will rarely go lolthree hours typically the same course

during the year on these two hours ofclassical typically have a little bit of

wiggle room and let me not commit tojust two hours per night

on but we will typically not go i thinkas many as three hours for the frankly a

lot to take and com twice a week no less

uh... so uh...

where we end up its actany other questions

olin over there are two sections

the implication of that detail

is that sections will not startnecessarily eta preordained time what

will try to do is the test will come abit early

so if we do end up wrapping up a lecturewe'll take a short break the band i've

been right outright immediately tosection

an office hours so that you don't sithere awkwardly just waiting for an

arbitrary time to come aroundfor the distance students sections willbe filmed as well and we will be making

ample use of online interactions forstudents who are primarily distance on

and we've also experiment in the pastwith things like skype in video

conferencing or

online chats com were quite flexible forwhatever works uh... pedagogical for

folks

good question and typically not fordistance jeans with sections we do film

them but there is some leniency in whenwe post them we may experiment with

trying to straighten some things onlinebut this room is not equipped for that

so i shouldn't makeup promises to thatjust yet

but either way things will be availablein synchronously after the fact

the office hours will typically be rightafter sections on mondays and wednesdays

which are right after lectures

uh... the motivation being especiallyfor folks who commutes

we figured we try to compact things frommondays and wednesdays you'll have to

come to campus yet again

and we're flexible too if for instance

you're really struggling in the classyou have lots of questions or

your schedule you have a nighttime classright after work

'em were happy to do things byappointment as well

soldier will will meet you half way asbest we can

somewhat hosting companies we talkedearlier about d_n_a_ aspin sort of

getting traffic to some destination b



but once they get their what's waitingfor the use or where are your rates tim

allen's yes essence in p_h_p_ filesactually store

so this is a little screenshot from thisone company dreamhost and i don't

necessarily recommend them over anyothers

but they're popular among our own andsuper cheap and just to give you a sense

of what you get

and what you don't really get

here's a screenshot of what you get forparity for eight ninety five per month

so you'd have to get unlimited terabites

of disc storage space

uh... you get unlimited tera bites ofmonthly bandwidth you get an unlimited

number of domains hosted and you get anunlimited number of user counts email

account bicycle databases

and at the turn of the distribution ofthe next fall back

took ourselves to good to be true

so what is the capture

but that's an amazing deal for eightninety five

unlimited everythingso what are some of the taxes are whatare they doing here technologically to

make this possible

exactly so a lot of these web hostingcompanies are shared services whereby

you might get this

but they're also promising the exactsame thing to ten other people to one

hundred other people

now turns out that its g_d_p_ theprotocol we discussed earlier

there is a future for these days forwhat's called virtual hosting

so back in the day for the web everywebsite needed unique i_p_ addressessentially so that when you type insomething dot com

you went to one web sites and thatwebsite madonna server that server had a

nike address and if you want to thesecond website

you better get a second server or thesegive that computer a second i_p_ address

however in more recent versions ofh_t_t_p_

will see through some experimentationwith actual browsers

browsers send and other issue to behatter they don't just send gets

they also send a reminder to the webserver as to what the user typed into

the u r l

so that you can now have these daysmultiple websites foo dot com bardot

combats dot com all living on the samephysical server

at the exact same like he address

and because the browser's remind theserver what the user typed in

from dot com or bar dot com or about dotcom

the server

even though it's receiving traffic forthree different websites

can figure out from those so-calledheaders what was requested

and then return the appropriate

domains

homepage

so in this case

that's great 'cause it makes thispossible we only have four billion i_p_

addresses in the world in the arelegitimately running out and so this is



great that we can multiplex servers inthis way and put multiple people

multiple websites on the same mikeyaddress

but there's a couple dot that's what'sthe implication of yes

the fact that multiple customers on thesame machine

goods of the mission crashes now all ofyou are affected rather than just the

one

contention for resources right so you'rekind of in bad luck a bad place it for

instance when the other customers on thewebsite server is face book dot com or

something then take xiv unexpectedpopularity on all of a sudden

or maybe it's a web site that's really

text someone off

and is getting some kind ofinternet-based attacked like a denial of

service attack

because people going after that websiteand just because your server your web

site on the same server

now you are down or otherwise offline aswell

moreover at one of the res one of theways in which these

uh... companies offer such discountedprices this 'cause it's not just you andto other websites as prime not ten

it could be a hundred could be athousand other customers on the same

server

and so there must be some fine printhopefully there's some fine print

somewhere

that does say this is subject tosomething right they don't have infinite

tera bites on their web service infinitebandwidth there's gotta be some catch

here

otherwise the world monopoly thousandsof dollars a month to host a reallarge-scale websites

so you again sort of get what you payfor

and this is actually expense of yearsago i signed up for some fly-by-night

operation for like two ninety five byyear

um... to host my website and it was awebsite that i did not care much for and

that was good because it went down quitea bit um... so what they're not

guaranteeing here's unlimited uptime

for instance so there some

some doctors

but frankly if you're just startingsmall you just one experiment you need

it

place for testing website or

you don't you're eight ninety five ismore compelling than several hundreds of

dollars or even more

um... this is certainly fightscompelling

but as an aside things like emailingcalendar and what not there's another

alternatives you don't need to get thosethirty-year west coast when places like

google exist

but suppose you are

not so comfortable with that approachand you suppose to

that you're not comfortable also withthe fact that

we used to not have any control over adreamhost like server

because it's being shared by otherpeople in it because it's being managed



by other people

which is to say if they are runningp_h_p_ five point two which is a few

years old

so rio like you're running p_h_d_ fivepoint even if you want to take the

advantage of new language features theywere introduced in p_h_p_ five three

and more recently p_h_p_ five four

you're outta luck like you're gonna haveto other funny web poster just deal with

it you can't just install it yourselftypically

so similar they can you not upgradedifferent versions of software you can

assist early reconfigured the webserverat will

now they might give you some form ofcontrol but you'll reach a point perhaps

we're just too frustrating not to haveadministrative access to the server

so you can still achieve that so virtualprivate servers d_p_s_ is or an

alternative to shared web hosting model

and the d_p_s_ world

you get a dedicated server to yourself

lasorda

you get the allusion of the dedicatedserver to yourself so thanks to atechnology generically known asvirtualization

these days you can park by our serverwith like a bunch of six user a bunch of

course lots of ram lost of disk space

and then you can run virtualizationsoftware on it uh... something known

janet generally is a hyper by sir

like vmware or parallels or virtualboxthere's a whole bunch of these products

free in commercial like out there

that once you run them

and install them on the serveron top of that software you can theninstall multiple instances of windows

multiple instances of lyrics multipleinstances if they allowed it of mac o_s_

so you can create the illusion ofmultiple distinct computers

each of which has its own usernames andpasswords its own administrative or

so-called route account

and even though they're sharing thephysical hardware

they are not sharing the same software

so what you would get as the customer isthe root login or the administrator

login to your machine

now there's still the risk of resourcecontention

because these players to go to the quickover provision freshly if your pet

spending

in nineteen ninety five a month and nota hundred and fifty-nine ninety four

ninety five months

you're prolly gonna be on the serverwith fewer resources or with more

customers

but at least here you gain something

and if you've been following along

what is it fundamental you're gaining

from a d_p_s_ that you didn't get from aweb host

exactly

control you can to keep things up todate you can install whatever you want

and also



it's all morning altar serverscompromised

all it's our your words

might not p

whereas if the web hosting server iscompromised everything on that server

is potentially for durable

so still not perfect because the realityis too

even though you are the only one nowwith through ordnance traded access

because it's a dedicated albeit virtualserver for you

that she was kind of a white lie whoelse has access

the people there

even if they don't know your passwordthey have physical access the machines

easier physical access to any machine inthe world pretty much

you can't compromise that you can doanalytics computer for instance can be

glued in what's called single user mode

by pretty much any letter x when itsbooting up

and that sort of bands any request forpassword at which point you can even

change it

um... even on p_c_s in computers you canusually reset certain passwords byopening the case up

putting a little metal connector ontopins in a short circuits out the

password and clears it out

so in short physical access bat forsecurity so you're not gaining more

security off fundamentally

you're just making it less likely thatsomeone else's compromise will affect

you

and in some of these systems somesoftware

that system administrators we'll havethe password or at least access to theroot account on your server

so in short we should just assumed thatthis is for you

but probably at least one other personcould physically access

your conscience

so what do you get uh... for the money

well here and frankly these numbers area little more compelling 'cause it's not

on limited so what you're kind ofinclined to believe a bit more about the

quality of service for getting here

but twenty gigabytes of storage nothat's fine for typical website unless

your website

has a ridiculous amount of traffic indatabase traffic and logs which could

build up and start taking mags arebigger bites of space

uh... or if you're allow users to uploadfiles are photos then you might need a

lot of space

but many websites even if they aredynamic this is probably planning

transfers an interesting one twenty twohundred gigabytes per month

for most websites that's probably fineand less your website is a photo website

or worse a video website

then you have to start to do the mathand figure out exactly how much traffic

data will be coming in and out of yourserver

based on users patterns and moreoverthere's also corner cases this will

discuss toward the end of semester yougotta worry about the bad guys out there

if someone just unlike you words boardor download some free piece of software



that bangsar bangs the heck out of yourcomputer

they could just you've got your monthlyallotment of bandwidth

just by sending bogus traffic ordownloading the same video again and

again and again

so there's very interesting adversarialtax

when you have

finances somehow tied to usage so youneed to be where that especially with

cloud computing

uh... and let's see you get some amountof ran five hundred twelve megabytes

here

and so forth one of the things will lookat the ring the semesters we start

playing with apache

is all give you a sense of uh... how youcan assess how much ran your computers

using image disk space it's using

i dare say when the most commonplatforms for web hosting these days

whether it's a vp s

or it's is a

uh... sir by postizla nixon some form whether it's debbiein or for the world war ubuntu war red

hatter sent offer any number of versionsof the next

will happen to use the door of the classbut it's representative of many a

similar

operating systems

you can use mac o_s_ but it's not reallyuse commercially to host websites just

'cause that's not really xoxo

geared toward that

you can use windows on but you reallythere's no good reasonthere's no

come technically compelling reason touse a windows machine to host things

like p_h_p_ your python ruby

'cause you're paying money for windowslicense to run free software so it's not

necessarily compelling unless you are apowerful licenses and have the machines

uh... generally going with

these open-source tools is uh... quickcomment compelling because none of the

software reviews in the course

uh... cost any money whatsoever andthat's nonetheless quite popular and

robust

so

went out

declines so we will introduce it tonightbut we will in the form of the first

project so that you have an experience

in the class that is as realistic aspossible what will actually have each of

you do

is run your own webserver and run yourown database server and actually run

your own copy of lennox itself

for this will use another tool that iuse another possible i'm told this is

that the appliance and this will be adownloadable file

that inside of which he is ininstallation of land expat or lennox

pacific lee

but also installed for you in advancewill be apache which is web server



software my sequel which is databasesoftware

p_h_p_ as well as support for a bunchesof other languages in standard tools and

the like

and the up side of this is that ratherthan have you connect for instance to

some random harbored servers on whichyou only have

temporary access

this is a virtual machine that you'llhave a new computer for as long as you

want to keep it around and it's veryrepresentative of the configuration

you would find added d_p_s_

or at a commercial web host and becauseyou'll have a real access on its

and because it will be live on yourmachine only you'll have perfectly

secure access to it

ominous your laptop or desktop iscompromised

and you'll be able to configure apacheand p_h_p_ and really tinker with things

and best yet best yet

if you showed up

that's fine used on the new and you'reback to sort of beginning comes along as

you've saved your code somewhere whichwillencourage you a how and where to do

so more on that in a week or so

and how would you connect to this kindof thing uh...

so as the states

zen one u

news

so why not use this as a ship

status

so if you have any specific stands forsecure shelland this is a way sort of all school waybut now much more secure

of connecting to a remote server andexecuting commands on it so this is just

uh... free program that comes with maco_s_ terminal

and there's analogues for the windowsworld party has a free program for

windows that a lot of people like to use

and it allows you to open up essentiallya black and white window or white and

black window

and see

type in a username and password

connect to some remote server andexecute commands on it and those

commands can be to create files removedfiles configure the webserver turn the

database on or off for the like

so what they'll find once we start usingthe c_s_ fifty appliance a virtual

machine albeit running on your owncomputer not some server

is you will be able to connect to thatappliance

as though it's a remote server looks sothat you'd never even need to see the

appliance itself literally once you turnit on you can minimize it and pretend

that it's a server somewhere else on theinternet

because once you install it theappliance

into a virtual machine

is gonna have its own i_p_ address

but it's going to be what type of i_p_address

so it'll be private to your own laptopso no one else can you can access it but



you'll be able to go through preciselythe same motions that you would if you

are actually paying some third party tohost your website or you own some server

outs where on the internet servicesdates will be one of the techniques that

we use

s f three p for those unfamiliar this isa screen shot of a popular of windows

client for transferring files calledsecure effects but others exist free

ones in particular

just listed writing drop files from yourcomputer to a server

but in this case the server

is going to be a virtual machine runningon your own computer that may be

maybe or maybe not is minimize but again

experience of the precisely the same

sold where does that still be bouts so

turns out when you are writing

html

uh... you

at fairly static content but you do havethese mechanisms and i'm guessing most

people in the room have some were a lotof experience withit's you know and basic web sites on thelife

but these ultimately already

basic input mechanisms by which we canstart

making dynamic websites in other words

we have text field password fieldshidden fields checkboxes radio buttons

drop-down menus

so these are the mechanisms by which wecan start to get input from users

so that when they interact with ourwebsite they don't necessarily see the

same thingrather they might see different thingsevery time we visit that website so

let's do a little

example here

i'm gonna go ahead and

don't download this on your own just yetbecause we will be posting a newer

version soon but i'm gonna go ahead andopen up

a program coldfusion

vmware fusion this is what's calledgenerally again a hyper visor

virtualization software

and what i've just done is essentiallyrun lynn x on my own that

and you too can do this i'm gonnaactually use the lyrics desktop discuss

its here but i could similarly minimizeit as i will just few minutes and will

connect to his well so now i'm runninglyrics on my syndicator and notice i

currently have no idea dress that theyshould change in a few seconds once

identity there we go

so my lyrics computer virtual machinehas just asks for the network give me i

p address and it came

uh... the protocol

the computers use to get idea dressesdynamically does anyone know

dac p are dynamic host configurationprotocol that's what did that

it's also how your own personal computerworks at home and gets a nike address

from your links this router or airportextreme so i'm gonna go ahead and to do

with this first let me go to mike backto my mac



i'm gonna open up the simplest theprogram's text edit which is what we

used earlier

animated just make a very simple webpage on first thing i do doctype

html so in the course will use html fivewhich is the sort of the latest and

greatest

version of html

and so i'm gonna say hello

now let's do this

let's call this

and then body

and close body

and then on to say cool

on ok gonna save this ominous go aheadand save it on my desktop as google dot

html

i'm gonna say yes uses two million ofthe text file

and now i'm going to go ahead and pullup

google dot html

so i'm not exactly google just yet i cando a little better so let's make this alittle different slowly going here

did style text align center

so into any of this looks completelycritical new these are the kinds of

things that we will take for granted andof course that the stuff looks familiar

so let me say the relocate now looks alittle more like a low but it certainly

lacking in some key features among them

i searched far right so let's go thereso let me start to make a simple web

page that i get on thirty many of youcould have done are ready cuz you know

html and forms and what not solet's go ahead and do this it down hereon an essay form

close by for a minute ago and fear

and i needed inputs

tight equals taxed

and i prolly need a summit by hand solet me did

input by you poor summits if this aboutyou starts with

victory it as best we can saved

reload okay so now it's getting there

this isn't the prettiest things so letme go ahead and do style wear flats sade

two hundred pixels

school back here and say it it stilllooks a little small three hundred

pixels

uh... looks more global alike

and we really want to be an all here

we could do this

line lucky

so now we've got roughly google but inblack and white

so unfortunately takes away more work toimplement the back end of this website

writes a front-end pretty easy werepretty much done other than some colors

and some other features these days

but what about the back end so if iactually wanted a patch into google

let's see if we can now revisit thatconversation we started earlier when i

tried to dublin dub dot google dot comis the answer



what really is happening let's take alook underneath the hood let's look at

the age to be traffic and think aboutwhat it is we're gonna start building

next week in terms of the actual backand so let's

suspend this mental thread

pull up the actual global dot com

and take a look at what's is here

i'm gonna go ahead first so that this is

new lightning think it is

we have the disabled this annoyinginstant search feature

select this

here i come

search settings

google instance disabling

never showed instant results so thereason i wanna do this is ready to talk

about javascript and ajax thetechnologies that nobody's on

annoying or beneficial instant searchfeature we wanted to sort of all swollen

she d p

searches right nowsub disabled that's so now hopefully ican save

okay now i'm gonna go back to build adot com is what it is like five years

ago when you want a search for somethingon the internet

so now i'm going to go ahead and takefor instance harper

so it's still doing auto complete butit's not immediately showing me the

search results

so now notice before here's the or l onthat

dub dub dub dot google dot com

and now after early hit enternow known as the oracle

so they're this is now hinting

at the fundamental functionality ofh_t_t_p_ we had just issued one of those

debt requests we had two of them in factthe first one came up when i visited the

home page then i hit enter in it appearsthat another get request has been sent

wide because when you are all changed sogenerally anytime the

keyword get is involved

it's because the orals changed

or equivalent leave the aural changesyou just to get

most likely

so there's a whole lot of distractingstuff up there but what is relevant in

uh... what looks familiar up there

in the u r ellen gray

i have no idea what h_l_ is

site so i don't know source i don't knowbut what looks familiar

okay harbor

so let me delete manually all the stuffthat i had no idea about what it means

at least not yet so mummy i don't knowwhat this is

q equals harvard that i did

okay legals harvard apple q i don't knowi'm just gonna

presumptuous the whittle it down to thatanalysis answer

so interestingly still works

and what's nice is that there's muchless distraction we can have the same



story boat with fewer distractions indetail so it looks like

when hitting enter on the previous pageif i throw away the distractions

i have now been fitted snot slash butslash search

question mark

q equals harbor so what is q she wasgenerally known as the h_t_t_p_

parameter so it isn't input to a webserver

that's generally comes from a four butas we'll see a few weeks ago also

confirm javascript doesn't have to comefrom a form per se

harvard is obviously what i typed in sowhat is slash search

well it's not obvious here whatprogramming language google uses before

on face book we would probably seesearch dot p_h_p_ his face book is known

for using p_h_p_ there also known fornot hiding their file tensions which is

very easy to do but they just don't forsome reason

gold does hide their file tension but alot of google's code at least run-in has

written a currently in python

or in some other languages so

it's not clear what language is on theserver but slash search

is referring to some files or somefolder on the serverwhat is the question mark the no

the start of the parameters so anytimeyou have a question mark in your old

that the marks the path

and the preceding part of you are all

from all of the parameters andparameters are key value pairs something

equal something and if you have multipleparameters what separates them even

though i already deleted the others

ends the ampersand say assemble so if ihad it deleted all of that

recall that we saw something like thisjust a moment though andboat hwy quills harvard and i don't knowwhat took you is but

that's how you would separate parameterswith m percent

so this means we have submitted

uh... ke of q anna value of harvard tothe server

so now let's use a fairly common toolbuilt into chrome it's also built into

safari

firefox or something similar when werecommend something called fire bug on

the courses website

with which to do the same kind of thingbut i'm in a good of you

developer

and developer tools and i will say thesedays certainly when using lamp clinics

apache mysql and p_h_p_ which is thiscourses focused

uh... many people are increasingly usingchrome one because it's popular too

because it's faster because it comeswith some developer tools

i would say firefox is also wonderfullyconvenient for doing development the

mifsud certainly task on multiplebrowsers as well

uh... require in one of the prep in thefirst project spec

on you can get windows of rather internexplores getting better about having

some integrated development tools fromthe course of perspective

we don't care what browser you usebecause you'll be using again the

appliance as a server

you can use whatever browser whateveroperations from on your own computer

that you're most comfortable with but



you are coming to this with some

i'd say uh...

less familiarity uh... with varioustools

chrome is pretty popular in firefox tendto be packing better for development

purposes in indonesia task on all ofthem

so one of my senior i'd just opened thedeveloper tabs

and now i have elements resourcesnetwork scripts timeline profiles audits

and consul we're not gonna use all ofthese but if you would never quite

helpful one

the elements have shows you the page'shtml

but it pretty princess for u and itmakes of hierarchical so that with those

little triangles

you can dive in deeper n c

even though if we look at you source forthe page

it is an automatically of the page afaikuh...

over here

and view page source

this is what came back from the serverand i would argue this is not veryreadable

unanimity actually still al

even the html not that readable colorcoded maybe still not useful

so what is this still

x the developer toward actually parsesit for you see can start to navigate and

this is actually wonderfully compellingwhether it's your site or someone else's

if it's someone else's

it's a wonderful way of learning howthey did something or how they stylized

something if it's your own site sowonderful way of chasing down bugsand also as you'll see changing on thefly some of the aesthetics

without having to change actual filesand then relo

notary upload so we don't care so muchabout elements right now

we do care about network so let me go tothe networks have and what this tableau

do first is

uh...

smith

all of the network traffic between mybrowser and the server

and will show each peacekeeping requestone per line at the bomb

some gonna leave this window open andclick reload

and again this is my u r l

that's a lot i'd only hit reload oncebut why in the world that so many rose

appear down here

by clicking wants

but look how much stuff just happened

each of those again represents an eightyd p requests or virtual on bola from

browser to server and back yet

what does that mean behind the scenes

okay good civil winnie support otherthings to me and concrete example of

something as the polar

so inside of the

htmldiff initially downloaded therecould be an image tag outsource tackling

two tak two si es esta javascript imagescould be flash files



could be a whole bunch of other assetsso to speak

and to get those the browser ispredefined

to sort of a personal ego get thoseassets so if it sees a source tagore

image tag

it will send another virtual enveloperequesting that file specifically it

might do it over the same networkconnection the same t_c_ p socket so to

speak

but each of these rose represents adifferent file that was downloaded

ironically it seems that's harvard's notbehaving well win the terms of the auto

previews but that's good another day wecan look at why

uh... but let's look at the first onebecause that's the one that will be the

most enlightening for now

and when i click on this

there's a few details so one

the preview is just what was returned

and here's another big mess of resultsfrom the web server but we don't care so

much about that

i care about the headersso many zoom in on this

and rather than look at this fairlypretty printed version of it i want to

look at the brawl source over diving indeep sort of uh... intellectually here

so let me look at the source

now this

is what was literally sent

in that virtual envelope

that we started tonight's discussionwith

so there's the top-line debt slashsearch question mark you week washarvard stay safety p slash versionnumber so that was in the envelope

and we did promise to some other stuffin there

second line

is a reminder to the server

as to what the user type and so what isthe hostname

now frankly but was not sharing theirservers with other companies most likely

so this doesn't really matter there butfor shared web hosting companies the

fact that i'm being reminded what do u rl was means i can serve up food dot com

or bar dot com about us dot com sothankfully

it's d_p_ does that

there some arcane information here

related to passing and connectionsinefficiency

only wait my hand it back

for now user-agent is interesting

you might notice are ready but if youdon't every web page of adverb visited

is every website you've ever visited

knows what computer you have and whatopportune system you're running and what

browser you were using

why is that what browsers by default

reveal precisely that information i'dhave just told global

behind the scenes that i have a mac

running mac os x are ten point sevenpoint four and if i scrolled down

further or they will be able to inferthat i was using chrome versions



something or other

so why in the world is that useful

good so hard to believe this is use fullfrom the bugging purposes useful for

demographic purpose is to know who yourusers are

goods

so there's some features that could bedictated by what type of o_s_ or browser

someone's using for instance if you goto a website that lets you download

software

it's not necessary that you detect withusers opportune system browser are it's

kind of a nicer user experience if theserver only shows you the mac software

because you clearly have a mac asopposed to me having to figure out which

of the links to click for lenexa

windows or mac o_s_

uh... another argument frankly is thatthis is completely unnecessary and we

should never gotten to this habit in thefirst place because it for uh... it's

not necessarily used all that much

and indeed

writing websites that of require knowingwhat the user's browser is is actuallygenerally bad practice because therewill be certain privacy tools

that users can install on the computerglitches hide this information

altogether

for better or for worse and if you'rerelying on certain headers to be sent

your own website could misbehave

so they work turns out there's othertricks for doing detection

and typically is will see in javascriptit's better generally to detect

whether a browser has a certain feature

rather than is that a specific operatingsystem for specific version of a browserhowever databases for the billboardsthis

that allow you to figure out based onthe so-called user agents strings

what version

of browser inopportune system someanswers because frankly this is a little

hard to read so softer exist thatsimplifies this

so you can just check a boolean variableis mac ortiz pc

our butts below

so more pain details that always my handthat

cookies will come back to in a week ortwo when we have to start using them to

our advantage but will also talk aboutthe security implications of them

but in a nutshell

all of these headers just text is whatwas inside of

that virtual on book and the mostimportant one arguably was the very

first one 'cause that tells people whatto return

but now we see that it's not just last

it's a full path

so google has hopefully parks thatstring

so-to-speak slash search question markcubicles harbor

and then you

lustig you equals harvard as import

to its database or what not

to return customized results to me

now if you scroll down let's see howgoogle reply



so this is just a chrome thing

it is just kind of dumb down display ofthe query string printers justice useful

specially for developer you can see itmore easily this way

but let me go ahead and use source nowfor response headers

this is what the server responded with

so turns out

many of you have seen numbers return byservers who has ever seen message four

oh four comeback

it was for foreman

file not found right so it's a nation'sbee status code it's an arbiter number

the world decided on years ago thatmeans files not found what are some

others you might have seen

sizes

five oh one so internal server error ofsome sort

five oh three audience another internalerror

or resource are forbidden

there's four oh three rather which isforbidden

uh...three oh one and three oh two areredirects which are actually quite

useful will start using those in thenext lecturer to such aren't there some

codes that you've probably seen for fourth may be the most popular

two hundred you might not have ever seenbecause the best one of all

two hundred is literally ok in theseeverything worked out well see just

don't see it

because it indicates success as thoselittle green icon that we

uh... saw a moment ago before i expandedthis so this is the servers response two

hundred means found what you're lookingfor here it isnow what else comes down

we have the date from the server whichmight be useful

uh... expires in past controls sodirectives to the browser saying do or

don't pass this even though these arenot necessarily reliable talk about this

when we get the p_h_p_

uh... this is interesting set cookie

set cookie is amazingly powerful if nota little unsettling especially northern

advertising in tracking but we'll talkabout that in the context of p_h_p_

notice that the servers telling us thatit supports jeez it which is like uh...

compression utility

which is a compression utility in thisjust means a you can compress your date

of june from me

uh...

the name of the server g_w_ s probablygood google web services

and then some headers that they use forsome the security things will talk about

later in the semester so that's whatschool was returned

in addition to

the content that has come back from theserver

so let's see this outside the scope of abrowser on the boat open

uh... a program called terminal

the switches comes with mac o_s_ forthose of you with windows padi as

another option will look at that

uh... or encourage that info my musicsupply



uh... bull book at that

or recommend that for future projects aninterim program call telnet telnet is

like associates put uninfected nowthat's a bit of an oversimplification

i'm gonna go ahead and tell that togoogle dot com

and nothing actually happens but he didfigure out the was likely address so

that's interesting

but tell that by the fall uses porttwenty uh...

has been so long

twenty-one

tom is a sport twenty want to see peopleare twenty-one bikes there's no tone

that server their tone it used to be tosend messages and connected email

servers in the like

but what if i instead say eighty

so there's no colin in this programthere is in a browser

but this is going to connect from mylaptop to google dot com on ccp port

eighty

so this is interesting

now i've connected to their serverwine are how do i know that

stony connected to tell doubly dot dotdot l dot google dot com

where did this all come from

the days of the n_ s_ trickery tally forload balancing purposes they had

multiple server so they're fraud gottenone of them specifically

but i'm gonna pretend to be a browserunless they get me slash

using issue d_p_ version one point one

and the answer

and then if that's the last of myheaders i have to hit entered twiceand wala

what do i see

well the fonts kind of big in the htmljavascript kind of mina five but that's

exactly what my browser got back but ifi keep going up and open up and up

notice i can say

exactly what the servers response was

so i see my age to be headers they cameback from the server

uh... set cookie and all those samelines exactly what i saw on the browser

so i just pretended really

to be a browser and we can do this withany websites

and it's more than just a curiosity canactually help with the bugging great

actually seeing what's coming back froma server

i can do dot dot dot dot harvard dote_d_u_ eighty

death slap

slashes vp one point uh... one

answer answer

so interesting bad request

now why is that said we see some html isthis the webserver assumes that a

browser will typically be doing this

why might this be a bad requests

i'm actually in a guest here let's trythis gets slash is tepee one point one

post

prioritize u



so it didn't like the fact that i didnot say

the host hatter

which means harvard's web serversprobably using something called virtual

hosting which is that feature i alludedto earlier when a website

can support molt when webserver cansupport local websites

bought for that to work browsers have tocooperate and the fact that i did not

send that had her meant that the serverdidn't know who's hoping to return

so we gave me that

four hundred response of i don't knowwhat to do

now let's try one other thing on thecancelled s

and let me do

telnet sue not dubbed the dubbed aharbored idea let's try this one to see

what happens

so get slash h_d_t_v_ one point oneanswer answer

they didn't like that so let's fix thisagain

so gets slash uh... issue the p onepoint one

post harbor dot you do you answer answer

interestedthis is not the home page where i getthis time

some message about

it's moved

harbor but you do has moved permanentlyyou know that's and if i scroll up

more esoteric lian headers is one ofdifferent status code three oh one which

you mentioned earlier three oh one thesepermanent redirect

if a browser receives a three oh one

it should never asked that questionagain

it should just remember harbor dote_d_u_ movedany move to wear

to the value of the location field whichshould also be included in the response

centers

how did that happen

well some system administrator gene atharvard just decided arbitrarily

that's but reasonably

that we don't want to standardize onharbor dot e_d_u_ ann arbor authors in

people's browsers we want themautomatically to be redirected to dub

dub dub dot harvard dot the id a dotharvard dot e_d_u_ white

one printing minutes one

it's perfectly reasonable

to more technologically it can be betterfor

securities a bit of an overstatement butfor technical reasons having the w_w_w_

means your cookies can be isolated tow_w_w_ dot harvard dot e_d_u_

whereas if your cookies were insteadsent to harvard that you do you that

means your cookies could be read reallybite any websites so including c asp dot

harvard dot e_d_u_ or xd summer dotharvard dot you do you so they sing

doubly david w

you're also forcing uh... released bydefault cookies to be more precisely

define so there's some technical reasonsas well

only a year or two ago was this problemfixed on the recent a few years back

someone on a new came to harbor tour onthe news office and one of her first

things



i one of her first acts was to fix

eucharistic omission for years recoveredthat you do you did not exist

devito v_w_ dot harvard dot e_d_u_existed and they weren't even

redirecting south that is a bug that'snow been

uh...

and questions then

uh... what just happened

and one of the terminal window open themeat offer up some other troubleshooting

tips

anissa lookup nameserver lookup is awonderful way

of doing those d_m_s_ lookups we talkedabout before what i've just done is

asked the nearest city in a server whichhappens to be this

because that's how harvard's configuredthe campus that's the deanna server

and i've asked what's the idea dress ofharvard i do u and it's given me the

psyche address

so far we get curious that we do that'suh... they should be peak on five slash

i can address

interestingwhatever why this is not working willagain be hosting like the website is not

configured to understand mikey addressesby default

however let's try another one and it'slookup cnn.com

what c_n_n_ dot com

interesting

so it turns out we denounce you can alsodo what's called round robin you can

return multiple mikey addresses

for web server and those can rotateliterally in the order in which their

returnto do but balance

and we'll discuss that topping again forthe end of the semester and scale

ability but let me just one of these

and c_n_n_ either pretty day on guessingthey don't really share with some other

websites so let's just go to their i_p_address

and indeed

there's works

now notice my you are all hasn't changed

so now if i really want to get sort ofphone

uh...

i really want to get sort of

uh... creative i'm gonna do this on mymac and you can do this on a windows

machine is well there's typically fileon macs in my next computers is called

at sea coasts which is a text filebitmaps that hard cuts

ita dresses

four

domain names

this is useful generally for internalcorporate used for development purposes

so will be able to do this with projectsas well

uh... i'm gonna go ahead and uh... sentthe case here

just a text file and noticed this issome basic ones that come with the

system this is my t_v_ six version sixaddress written in a

uh... crazy form



i'm gonna go ahead and paste in not thatu r l

but the i_q_ dress of c_n_n_ and i'mgonna say this is

david news dot com

so this is like manually overriding

the mapping bataya ki address tosomething else here only for my own

computer i'm not running again a server

it's just that my

opportune system ako s in windows issupposed to look at a file like this

before asking india nasser

so now let's see

if this works doesn't work with allwebsites but let me go to

h_t_t_p_ colon slash slash

david news dot com

kamon

areas

i'd just made my own

or new site

frankly this is kind of stupid of themum...they go i was just joking with somefriends the other day that you could

kind of have fun with this and make

fairly offensive domain names of theonly to c_n_n_ somehow uh... and why is

this

so this is trivial defects frankly in aweb server i a web server could be

configured as you will be able to dowith features of the past you before

long

of checking

upon receipt of one of those virtualenvelopes what was in the to fieldif the to field does not match somethingthat were happy with

redirect the user how you respond withwhat sascha

three oh one

somebody's actually trivial to fix thiskind of things that could still be they

can't stop david news dot com fromneeding to c_n_n_ dot com

but they can stop the browser fromstaying there or the spy encouraging it

without three oh one to redirectelsewhere

and this redirection is super com andnot just for harbor dot you do you

but even the courses own website if i goto issue p

colon slash slash two seventy fivedotnet and hit enter

notice what the oral changes too

a few things happen there

so this is the courses website what aresome of the things that got answered in

automatically it seems

deaf indeed so idea then just go to thedub dub dub version i also went to the

secure person why

we've just gone into the habit and ipersonally guns out of using us as offer

everything it's relatively cheap to doit's relatively trivial to turn on

and it's only getting cheaper it'saccuser getting faster and

some of you might be familiar with abouta year-and-a-half ago uh... toolkit

caught fire shape was released

which was a wonderfully free proof ofconcept of something called the a

session hijacking attack something we'lltalk about in a few weeks time in the



context of security

long story short if you are visiting thewebsite that uses h_t_t_p_ colon slash

slash

it is fairly trivial

for someone in your nearby wirelessvicinity whether in this room at

starbucks even in your own home if youhave adversarial for gaza blends are

roomates

to can't login to your facebook accountor your google account or i cannot go

facebook account twitter account or anywebsites that's not using h_t_t_p_ ass

and that is because

if you're not using a g_p_s_

nothing's infected known

probably knew that but among the thingsthat are infected or things called

cookies so if you are just broadcastingcookies

and cookies it turns out is hosting aweaker to hard the mechanism by which

users are remembered as being loggedinto websites if you're just sending

that cookie tool website again and againto remind unlike n on login on login

that sign creek did anyone in starbuckscan sniff that cookieand with the right technical savvy asyou will soon have senate has their own

another log into whatever you work

doesn't mean they know your password

but it doesn't mean they can hijack yourcurrent sessions so to speak

so a protracted google because globalabout a year or two ago thanks to some

of the issues in china they had withcrack hacking and whatnot

they transition all their services to asteep yes at least if you opt into at

face book also find the offers this

but again we come back to this uh... youa few more weeks of insecurity in yourlives if you don't mind

but will come back to this and talkabout how you can have certain defenses

up

and i tragically

even websites that redirect

strong law

the uninfected version to the infectedversion might still be vulnerable

because many of those websites willfirst do a redirect

that sends your cooking in the clear andthen it realizes all of this to be

secure

by then it's too late so even thoughbanking websites almost always uses

there have been certain banks to beknown

to be not to technically

uh... savvy

who are still leaking cookies

on four uh... reasons that will soonreveal so i said the duh duh duh based

ups and then this stupid main page whichis a media with the thing which is the

tool we use for the courses website it'sfree with the software

and that's not really intellectuallyinteresting just their own software

contact any questions on a cd p

will delete david news dot com

and again that wouldn't work with allwebsites in fact harvard's probably

would not work for us



so which is the party's hdv headersstill become in invaluable resource when

it comes time to chase down blogs arefeatures in your own code

let me take another quick look atsomething within krone's

uh... developer toolbar in more than onelast thing with regard to google and see

if we can implement a little more of ourown version of the world

so let me go to

the elements tab

and just as a proof of concept here goeswhat's adds a little complex underneath

the hood

but let me go ahead and right-click onharvard university and they choose

inspect elements

and inspect element is nice because it'sgoing to jump me right too

the part of the html

that relates to that portion of the pagewhich is wonderful useful for diving in

deeper to specific place

so that is the a_h_ wrath that got me atharvard university link

now suppose i'm actually google'sdesigner

and we're not quite happy with the shadeof blue where the font size or font faceit so i want to take over the website

but frankly i don't have to log into theserver and change font size and save the

file dinh reload the browser

and go thro the suit

kinda like to do it

uh...

in line in the browser albeit at withoutsaving any changes

so notice you're on the right if you'venot used from before

that gordon developer tool barnotice on the right you have a summary

of all of the styles that relate to thatspecific elements in the web page

so from top to bottom here's the cvuh... there's the ciency assessed

cascading top-to-bottom

here all of the rules that apply to thatall so

there's apparently somewhere and googlecssc apparently the file called search

online sex

and a link uh... dot w class mention inall of this where they're specifying the

color of the link in the cursor thatshould be used over it

so let me just right for text legallyhere

let me just change this to

let's say something we the

random like or just

so that is what i've done a their changewho was elected or of course non

permanently and only for the links inthe page for which that csrs rule

applies but the point here is that thisis just a wonderfully quick and dirty

way of experimenting especially ifyou're quite evil

and you want to get let the picsalignment perfect in something

being able to just tweaked it ever soslightly here and then figure out the

values are and then write down in theactual file on the server

just wonderfully useful

also too if you're trying to figure outwhat font website uses

i mean fighting the computed stop asthis can be a little overwhelming like

http://localhost/var/www/apps/conversion/tmp/scratch_3/google

http://localhost/var/www/apps/conversion/tmp/scratch_3/google



my god there's so many rules that applyto this element because of the cascading

nature of c_s_ s

let me just look at the computed styleswhich is a summary of the end result of

all of these styles that have beenapplied

enough i look for font-family

indeed this is

uh... appliances aerial followed bysensor so i know what font now google

said just the debugging trick if you'venot used it

this and the networks have one abusing

quite a bit

most likely

so now back to our own version of googleunfortunately if i typed and harbored

at google search

doesn't go anywhere sort of the kind ofdid where did it end up

urals almost the same it's a crazylooking you are opposite is obviously a

file on my hard drive not on theinternet but what the change in the oro

yeah

good so the question mark unattendedbut nope rameters got sent

so let me go ahead and take a look at myfile o

well no predators were sent to them andgive any of the main so let me go back

and fix this restrict the fought so wecan see more once

and the need to input name equal skewhere

and let me go back over here and reloadthe page

and now we go ahead and take harbor andnow clickable search

so now we have some progress

so this is interestingnow unfortunately google dot html is nota website

nor is that dynamic it's literally justa static files you can send any

parameters you want

it's just you know inorg everytime

but what is byproducts each year

i'm kind of in a hurry to implement myown search engine uh... you know i read

uh... knocked off my own new sites

now would you mind search engine

well i can actually do this form

action should actually go to let's saydot dot dot dot google dot com slash

search

and i'm gonna say math the equals andget in all our case here

slight inconsistency

with what we've seen before

now let me go back to this page

reload

and now mimetype harbored and watch theoral as i could answer

uh... now i have implemented my ownversion of gul but how

right all i did was i constructed a form

on a specified a method of deathsinaction that happens to be a point b

elsewhere

but because of its dpm because a browserknows how to handle foreign it compiled

all of the



key value pairs in this case just wantyou equal something put it in the oral

consented

to that action

attribute sent it to that particular u rl

so now we have implemented

our own version approval now of course

denies that they were our search resultsand they were completely cutting corners

here

but that's where we'll need somethinglike p_h_p_ to do things

server-side

let me pause for just a moment peter dowant to say hello to class peters one of

our for teaching fellows the others areat work right now

do on a lot too

actual hole up i have to come near youwith a microphone value what you want to

come this way so the cameras

little more really available

uh... although i a look forward toworking with all of you and i will see

you on wednesdaymuch

any questions that about the wolf

faqs

pgp

precaution that's it

had it not been named kit would this bebroken so let me go back into here and

let's just call a query thinking that'sa reasonable name to give a parameter to

mini reload mates gml me take thatharvard answer

and interesting they support we're solet me misspellings

and that's probably not supported butmaybe let's say

family reload type harvard center

okay that doesn't work

so there's a bar cleary r_k_o_ forwhatever backwards compatibility agrees

other questions

yes and on the entirety apartmentscampus your sessions can be hijacked

so if you have malicious roommates orare you aria this thurs four technical

people around you you are vulnerable tothis issue hijacking can happen anywhere

worker can is not use whether betweenyou and the access points

the wireless access point we're betweenyou and the endpoints uh... webserver

and i should say especially those of youare from out of town realize that harbor

does that fine print in rules about notdoing this to other people otherwise

they'd

that you can solve this problem byexpelling people that's one way if you

can't do technologically

so this is one of these things werereturned educators how it can be done

but don't go trying this in the dorms oncampus

which he go home on your own homenetwork

other questions

so where does this leave so we startedby talking about global and we keep

talking about who will be discussed sopopular but it above the story applies

to really any website out there





so

we talked about the in az and theprocess of not only booking up a web

page is your rayl rather mikey addressbut also getting your own ita dress and

getting your own web server in your owndomain name

we talked a little bit about html formswhich would which you might be tonight

are ready to the tools with which youcan get a little more comfortable with

diagnosing things in debugging thingsand we've written so that you know

that's a that's a form

all that we haven't done yet is actuallyimplement the dynamic website for that

we've completely outsourced to c_n_n_and global today

one of the first things we will do thiscoming wednesday is diving deeper to

p_h_p_ and things like depts imposedconcessions and shopping carts

awesome the security implications aroundthem will dive in cbc is fifty appliance

in this virtual machine environment withwhich you get to

uh... play you in terms of apache inp_h_p_ and mysql

so tonight will turn abid early allstick around with peter for anyone with

questions you might happen otherwise wewill see you again on wednesday and

after wednesday's lecture will flowright intersection office hours if youhave questions about

contents even though the first projectwill be released for a week or so

sienna couple days

google websites development

Documents