Professional Documents
Culture Documents
20 Things I Learned About Browsers and The Web
20 Things I Learned About Browsers and The Web
31334_20Things_book_v2_20101119.indd 1
11/19/10 9:28 AM
31334_20Things_book_v2_20101119.indd 2
11/19/10 9:28 AM
31334_20Things_book_v2_20101119.indd 3
11/19/10 9:28 AM
Thing
31334_20Things_book_v2_20101119.indd 4
11/19/10 9:28 AM
called the Internet Protocol Suite, or TCP/IP for short. TCP/IP created a set of rules that
allowed computers to talk to each other and send information back and forth.
TCP/IP is somewhat like human communication: when we speak to each other, the
rules of grammar provide structure to language and ensure that we can understand
each other and exchange ideas. Similarly, TCP/IP provides the rules of communication
that ensure interconnected devices understand each other so that they can send
information back and forth. As that group of interconnected devices grew from one
room to many rooms and then to many buildings, and then to many cities and countries
the Internet was born.
The early creators of the Internet discovered that data and information could be sent
Those chunks are called packets. So when you send an email across the Internet, your
full email message is broken down into packets, sent to your recipient, and reassembled.
The same thing happens when you watch a video on a website like YouTube: the video
servers around the world and reassembled to form the video that you watch through
your browser.
Fix Pages.indd 1
11/29/10 9:53:13 AM
Fix Pages.indd 2
11/29/10 9:53:21 AM
Thing
Cloud
Computing
Thing 0
31334_20Things_book_v2_20101119.indd 7
11/19/10 9:28 AM
Cloud computing offers other benefits as well. Not too long ago, many of us
worried about losing our documents, photos and files if something bad happened to our
computers, like a virus or a hardware malfunction. Today, our data is migrating beyond
the boundaries of our personal computers. Instead, were moving our data online into
the cloud. If you upload your photos, store critical files online and use a web-based email
service like Gmail or Yahoo! Mail, an 18-wheel truck could run over your laptop and all
your data would still safely reside on the web, accessible from any Internet-connected
computer, anywhere in the world.
31334_20Things_book_v2_20101119.indd 8
11/19/10 9:28 AM
Thing
Web Apps
or, Life, Liberty and the Pursuit of Appiness
31334_20Things_book_v2_20101119.indd 9
11/19/10 9:28 AM
Thing
10
31334_20Things_book_v2_20101119.indd 10
11/19/10 9:28 AM
4. Its safer.
Web apps run in the browser and I never have to
download them onto my computer. Because of this
separation between the app code and my computers
code, web apps cant interfere with other tasks on
my computer or the overall performance of my
machine. This means that Im better protected
from threats like viruses, malware and spyware.
11
31334_20Things_book_v2_20101119.indd 11
11/19/10 9:28 AM
Thing
12
31334_20Things_book_v2_20101119.indd 12
11/19/10 9:28 AM
13
31334_20Things_book_v2_20101119.indd 13
11/19/10 9:28 AM
14
31334_20Things_book_v2_20101119.indd 14
11/19/10 9:28 AM
Thing
HTML5
or, in the beginning there was no <video>
15
31334_20Things_book_v2_20101119.indd 15
11/19/10 9:28 AM
16
31334_20Things_book_v2_20101119.indd 16
11/19/10 9:28 AM
Thing
3D in the Browser
or, browsing with more depth
Why? Mostly because creating a 3D experience in games and other applications requires
data lots and lots of data to display intricate
textures and shapes. In the past, these large
amounts of data demanded more Internet ban
width and more computing power than most
17
31334_20Things_book_v2_20101119.indd 17
11/19/10 9:28 AM
Thing
18
31334_20Things_book_v2_20101119.indd 18
11/19/10 9:28 AM
19
31334_20Things_book_v2_20101119.indd 19
11/19/10 9:28 AM
Thing
A Browser Madrigal
20
31334_20Things_book_v2_20101119.indd 20
11/19/10 9:28 AM
21
31334_20Things_book_v2_20101119.indd 21
11/19/10 9:28 AM
Thing
Third and last, old browsers slow down innovation on the web. If lots of Internet users cling to old
browsers, web developers are forced to design websites that work with both old and new technologies.
Facing limited time and resources, they end up developing for the lowest common denominator and
not building the next generation of useful, groundbreaking web applications. (Imagine if todays highway
engineers were required to design high-speed freeways that would still be perfectly safe for a Model T.)
Thats why outdated browsers are bad for users overall and bad for innovation on the web.
22
31334_20Things_book_v2_20101119.indd 22
11/19/10 9:28 AM
23
31334_20Things_book_v2_20101119.indd 23
11/19/10 9:28 AM
Thing
Plug-ins
24
31334_20Things_book_v2_20101119.indd 24
11/19/10 9:28 AM
25
31334_20Things_book_v2_20101119.indd 25
11/19/10 9:28 AM
Thing
Browser
Extensions
or, superpowers for your browser
26
31334_20Things_book_v2_20101119.indd 26
11/19/10 9:28 AM
Browser extensions can also act on their own, outside of web pages. An email
notifier extension can live on your browser toolbar, quietly check for new messages
in your email account and let you know when one arrives. In this case, the extension
is always working in the background no matter what web page youre looking at
and you dont have to log in to your email in a separate window to see if you have
new messages.
When browser extensions were first introduced, developers often had to build
them in unusual programming languages or in heavy-duty mainstream languages like
C++. This took a lot of work, time and expertise. Adding more code to the browser also
added to security concerns, as it gave attackers more chances to exploit the browser.
Because the code was sometimes arcane, extensions were notorious for causing browser
crashes, too.
Today, most browsers let developers write extensions in the basic, friendly programming
languages of the web: HTML, JavaScript and CSS. Those are the same languages used to
build most modern web apps and web pages, so todays extensions are much closer cousins
to the web apps and pages they work with. Theyre faster and easier to build, safer, and
get better and better right along with the web standards theyre built upon.
27
31334_20Things_book_v2_20101119.indd 27
11/19/10 9:28 AM
28
31334_20Things_book_v2_20101119.indd 28
11/19/10 9:28 AM
Thing
10
29
31334_20Things_book_v2_20101119.indd 29
11/19/10 9:28 AM
30
31334_20Things_book_v2_20101119.indd 30
11/19/10 9:28 AM
Thing
11
Browser
Cookies
or, thanks for the memories
31
31334_20Things_book_v2_20101119.indd 31
11/19/10 9:28 AM
32
31334_20Things_book_v2_20101119.indd 32
11/19/10 9:28 AM
Thing
12
33
31334_20Things_book_v2_20101119.indd 33
11/19/10 9:28 AM
Thing
12
34
31334_20Things_book_v2_20101119.indd 34
11/19/10 9:28 AM
Fix Pages.indd 3
11/29/10 9:53:32 AM
36
31334_20Things_book_v2_20101119.indd 36
11/19/10 9:28 AM
Thing
13
Malware, Phishing,
and Security Risks
or, if it quacks like a duck but isnt a duck
37
31334_20Things_book_v2_20101119.indd 37
11/19/10 9:28 AM
Thing
13
Phishing takes place when someone masquerades as someone else, often with a fake
website, to trick you into sharing personal information. (Its called phishing because
the bad guys throw out electronic bait and wait for someone to bite.) In a typical phishing
scam, the attacker sends an email that looks like its from a bank or familiar web service
you use. The subject line might say, Please update your information at your bank! The
email contains phishing links that look like they go to your banks website, but really take
you to an impostor website. There youre asked to log in, and inadvertently reveal your
bank account number, credit card numbers, passwords, or other sensitive information to
the bad guys.
Malware, on the other hand, is malicious software installed on your machine, usually
without your knowledge. You may be asked to download an anti-virus software that is
actually a virus itself. Or you may visit a page that installs software on your computer
without even asking. The software is really designed to steal credit card numbers or
passwords from your computer, or in some cases, harm your computer. Once the malware
is on your computer, its not only difficult to remove, but its also free to access all the
data and files it finds, send that information elsewhere, and generally wreak havoc on
your computer.
38
31334_20Things_book_v2_20101119.indd 38
11/19/10 9:28 AM
39
31334_20Things_book_v2_20101119.indd 39
11/19/10 9:28 AM
Thing
14
40
31334_20Things_book_v2_20101119.indd 40
11/19/10 9:28 AM
For example, Google Chrome uses Safe Browsing technology, which is also used in several other
modern browsers. As you browse the web, each
page is checked quickly against a list of suspected
phishing and malware websites. This list is stored
and maintained locally on your computer to help
protect your browsing privacy. If a match against
the local list is found, the browser then sends a
request to Google for more information. (This
request is completely obscured and the browser
does not send it in plain text.) If Google verifies
the match, Chrome shows a red warning page to
alert you that the page youre trying to visit may
be dangerous.
Risk 2: How vulnerable your browser is if its
attacked
Old browsers that havent been upgraded are likely to have security vulnerabilities that attackers
can exploit. All outdated software,
41
31334_20Things_book_v2_20101119.indd 41
11/19/10 9:28 AM
when a newer, more secure version of the browser is available, and third, using the browser sandbox to curb malicious code from causing further
damage to your computer.
42
31334_20Things_book_v2_20101119.indd 42
11/19/10 9:28 AM
Thing
15
43
31334_20Things_book_v2_20101119.indd 43
11/19/10 9:28 AM
Thing
15
...to get to the news website for the British Broadcasting Corporation
(.co.uk indicates registration in the United Kingdom)
...to get to the website for Museo Nacional Del Prado, the Madrid-based art museum.
(.es indicates registration in Spain)
44
31334_20Things_book_v2_20101119.indd 44
11/19/10 9:28 AM
http://www.google.com/maps
scheme
hostname
path
45
31334_20Things_book_v2_20101119.indd 45
11/19/10 9:28 AM
Thing
SUSPICIOUS:
bankofamerica.xyz.com is not Bank of Americas
website. Instead, bankofamerica is a subdomain
of the website xyz.com.
15
46
31334_20Things_book_v2_20101119.indd 46
11/19/10 9:28 AM
47
31334_20Things_book_v2_20101119.indd 47
11/19/10 9:28 AM
Thing
16
48
31334_20Things_book_v2_20101119.indd 48
11/19/10 9:28 AM
computer. Its a bit like moms phone number: just as the phone number tells an
operator which house to route a call to so it reaches your mom, an IP address tells
your computer which other device on the Internet to communicate with to send
data to and get data from.
Your browser doesnt automatically know every IP address for the 35 billion (or
more) devices on the planet that are connected on the Internet. It has to look each
one up, using something called the Domain Name System. The DNS is essentially the
phone book of the Web: while a phone book translates a name like Acme Pizza
into the right phone number to call, the DNS translates a URL or web address (like
www.google.com) into the right IP address to contact (like 74.125.19.147) in
order to get the information that you want (in this case, the Google homepage).
So when you type in google.com into your web browser, the browser looks up
google.coms IP address through a DNS and contacts it, waits for a response to confirm
the connection, and then sends your request for google.coms web page to that IP
address. Googles server at that IP address will then send back the requested web page
to your computers IP address for your browser to display.
49
31334_20Things_book_v2_20101119.indd 49
11/19/10 9:28 AM
50
31334_20Things_book_v2_20101119.indd 50
11/19/10 9:28 AM
THING
17
VALIDATING
IDENTITIES
ONLINE
or, Dr. Livingstone, I presume?
51
Fix Pages.indd 4
11/29/10 9:53:42 AM
Thing
name of the organization that runs the web site. The extended validation certificate
gives you the information you need to help ensure that youre not entrusting your
information to a fake website.
17
52
31334_20Things_book_v2_20101119.indd 52
11/19/10 9:28 AM
53
31334_20Things_book_v2_20101119.indd 53
11/19/10 9:28 AM
Thing
18
54
31334_20Things_book_v2_20101119.indd 54
11/19/10 9:28 AM
55
31334_20Things_book_v2_20101119.indd 55
11/19/10 9:28 AM
Thing
18
56
31334_20Things_book_v2_20101119.indd 56
11/19/10 9:28 AM
57
31334_20Things_book_v2_20101119.indd 57
11/19/10 9:28 AM
Thing
19
58
31334_20Things_book_v2_20101119.indd 58
11/19/10 9:28 AM
59
31334_20Things_book_v2_20101119.indd 59
11/19/10 9:28 AM
Thing
19 Things
Later...
20
60
31334_20Things_book_v2_20101119.indd 60
11/19/10 9:28 AM
61
31334_20Things_book_v2_20101119.indd 61
11/19/10 9:28 AM
62
31334_20Things_book_v2_20101119.indd 62
11/19/10 9:28 AM
CREDITS
ILUSTRATION:
Christoph Niemann
WRITERS/EDITORS:
PROJECT CURATOR:
DESIGN: DEVELOPMENT
Fi Fi
Paul Truong
63
31334_20Things_book_v2_20101119.indd 63
11/19/10 9:28 AM
31334_20Things_book_v2_20101119.indd 64
11/19/10 9:28 AM