8/13/2019 WEBSITE Developm et
1/44
website developm et
Go Here
http://www.prismintelligentsolutions.com.au
Level 7, 91 Phillip Street,
Parramatta NSW 2150
1300 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 same
endpoint eventually
Perfect. So we first need to translatethe name of the site in this case thewww.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
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
http://www.prismintelligentsolutions.com.au/http://www.prismintelligentsolutions.com.au/8/13/2019 WEBSITE Developm et
2/44
8/13/2019 WEBSITE Developm et
3/44
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 all
or very frequently
but your ISPknows 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.com
in other words those root servers know
who the authority is for instance forall of the .com's in the world, for allof 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
8/13/2019 WEBSITE Developm et
4/44
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 ISP
has what's called the default-gateway
also known as a routerand 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 thirty
different 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://
8/13/2019 WEBSITE Developm et
5/44
8/13/2019 WEBSITE Developm et
6/44
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 or
personal home page or whatever the casemay be.
How do you go about doing that? You needmore than just a laptop and a browser nowyou need a server
on the internetbecause 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 go
home
and you have internet access at home,especially wirelessyou 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
http://localhost/var/www/apps/conversion/tmp/scratch_7/internethttp://localhost/var/www/apps/conversion/tmp/scratch_7/internet8/13/2019 WEBSITE Developm et
7/44
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 software
we'll introduce you to.A web server called Apache
no one in the worldis 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 exact
same private IP address, so it's justuniquely identifiable
and because your home routerand 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
So TCP
is the standard
8/13/2019 WEBSITE Developm et
8/44
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 applications
There'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 to
uniquely identify
the various things that it can doand 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.
8/13/2019 WEBSITE Developm et
9/44
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 homeon 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
8/13/2019 WEBSITE Developm et
10/44
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 Airport
and 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
8/13/2019 WEBSITE Developm et
11/44
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 and
pay $4.99 a year
so in short paying more for domain nameisn'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 DaddyAll 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.
8/13/2019 WEBSITE Developm et
12/44
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 server
Now I don't have my own DNS serversand I want to configure two more
computers in addition to my webserverso 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 hosting
option. 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 someillusion 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
8/13/2019 WEBSITE Developm et
13/44
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 internet
connectivity 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 at
something.com
How do you fix something like that?There's usually two pieces to thesolution
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
http://localhost/var/www/apps/conversion/tmp/scratch_7/internethttp://localhost/var/www/apps/conversion/tmp/scratch_7/internet8/13/2019 WEBSITE Developm et
14/44
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
is
a 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 DNS
server at least so far as we're concerned.
But there are different types of rows.So one of those rows can be an officialrecord
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
8/13/2019 WEBSITE Developm et
15/44
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 nikeaddress
had your domain name map to someoneelse's domain
and then let baird cnf server tell theworldwhat 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 domain
instead of the main aim aki address
so it's a wonderful useful featureespecially 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
8/13/2019 WEBSITE Developm et
16/44
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 rather
uh... domains that had very old largenumbers of users were you really don't
want their mail servers going downyou 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 is
wonderfully powerful and it really boilsdown to
basicsany 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
8/13/2019 WEBSITE Developm et
17/44
8/13/2019 WEBSITE Developm et
18/44
8/13/2019 WEBSITE Developm et
19/44
8/13/2019 WEBSITE Developm et
20/44
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 forinstance
and so designed to be an opportunity forpf particularly qualitative feedback
from the teaching fellows on your codeand 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 amount
of time that's required to get thingsright
so for instance this is the formidableused a computer total score for each ofthe 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
8/13/2019 WEBSITE Developm et
21/44
8/13/2019 WEBSITE Developm et
22/44
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 everything
so what are some of the taxes are whatare they doing here technologically to
make this possibleexactly 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_ address
essentially so that when you type insomething dot com
you went to one web sites and thatwebsite madonna server that server had anike 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
8/13/2019 WEBSITE Developm et
23/44
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 and
to other websites as prime not ten
it could be a hundred could be athousand other customers on the sameserver
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 real
large-scale websites
so you again sort of get what you payforand 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
8/13/2019 WEBSITE Developm et
24/44
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 a
technology generically known asvirtualization
these days you can park by our serverwith like a bunch of six user a bunch ofcourse 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 server
on 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
8/13/2019 WEBSITE Developm et
25/44
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 by
opening the case up
putting a little metal connector ontopins in a short circuits out thepassword 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 the
root account on your server
so in short we should just assumed thatthis is for youbut 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
8/13/2019 WEBSITE Developm et
26/44
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 post
izla nixon some form whether it's debbiein or for the world war ubuntu war red
hatter sent offer any number of versionsof the nextwill 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 reason
there's no
come technically compelling reason touse a windows machine to host thingslike 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
8/13/2019 WEBSITE Developm et
27/44
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 whichwill
encourage you a how and where to do
so more on that in a week or soand 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 shell
and 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 justuh... 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
8/13/2019 WEBSITE Developm et
28/44
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 with
it's you know and basic web sites on thelife
but these ultimately alreadybasic 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 thing
rather they might see different thingsevery time we visit that website so
let's do a littleexample 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
8/13/2019 WEBSITE Developm et
29/44
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 a
little different slowly going here
did style text align centerso 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 so
let's go ahead and do this it down hereon an essay form
close by for a minute ago and fearand 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
8/13/2019 WEBSITE Developm et
30/44
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 now
sub 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 yearsago 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 enter
now known as the oracle
so they're this is now hintingat 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
8/13/2019 WEBSITE Developm et
31/44
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 server
what is the question mark the no
the start of the parameters so anytimeyou have a question mark in your oldthat 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 and
boat hwy quills harvard and i don't knowwhat took you is but
that's how you would separate parameterswith m percentso 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...
8/13/2019 WEBSITE Developm et
32/44
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 server
and i would argue this is not veryreadable
unanimity actually still aleven 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 bugs
and also as you'll see changing on thefly some of the aesthetics
without having to change actual filesand then relonotary 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
8/13/2019 WEBSITE Developm et
33/44
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 headers
so many zoom in on this
and rather than look at this fairlypretty printed version of it i want tolook 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 was
harvard stay safety p slash versionnumber so that was in the envelope
and we did promise to some other stuffin theresecond 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
8/13/2019 WEBSITE Developm et
34/44
8/13/2019 WEBSITE Developm et
35/44
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 somecodes 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 is
now what else comes down
we have the date from the server whichmight be usefuluh... 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
8/13/2019 WEBSITE Developm et
36/44
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 server
wine are how do i know that
stony connected to tell doubly dot dotdot l dot google dot comwhere 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 twice
and wala
what do i seewell 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
8/13/2019 WEBSITE Developm et
37/44
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
interested
this is not the home page where i getthis time
some message aboutit'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_ moved
any move to wear
to the value of the location field whichshould also be included in the responsecenters
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
8/13/2019 WEBSITE Developm et
38/44
8/13/2019 WEBSITE Developm et
39/44
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 makefairly 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 field
if the to field does not match somethingthat were happy with
redirect the user how you respond withwhat saschathree 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
8/13/2019 WEBSITE Developm et
40/44
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 cookie
and with the right technical savvy asyou will soon have senate has their own
another log into whatever you workdoesn'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 your
lives if you don't mind
but will come back to this and talkabout how you can have certain defensesup
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
8/13/2019 WEBSITE Developm et
41/44
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 g