Java Script Cookies
1
Overview
Cookies
What, why
In JavaScript
2
Typical Web Application
Design
Runs on a Web server or application server
Takes input from Web users (via Web server)
Interacts with back-end databases and third
parties
Prepares and outputs results for users (via
Web server)
Dynamically generated HTML pages
Contain content from many different sources,
often including regular users Blogs, social
networks, photo-sharing websites…
3
HTTP and Cookies
HTTP (Hypertext Transfer Protocol) is a stateless request/response
protocol. Each request is independent of previous requests
Advantage being stateless: servers do not need to retain
information about users between requests.
Web applications are often stateful. So the Client has to
remember things that the Server needs to know.
Cookie is a common way for maintaining states.
A cookie is a piece of information that contains the state (or
session ID) of
a client. A cookie consists of one or more name-value pairs.
Server: uses Set-Cookie parameters to ask client’s browser to
store a cookie.
Client: stores the cookie and sends the unchanged cookie in
EVERY request to the same server.
4
Cookies
5
Web Cookies (or HTTP
Cookies)
Browsers allow the storage of
limited data on the client machine
Can be created by the server
Or by a client-side scripts
Sent back to the server that left it
Or ready by a client-side script
6
What’s the Need Behind
Cookies?
HTTP is a stateless protocol
Client requests a page, and server sends it
Client later requests a 2nd page; it is sent
But HTTP doesn’t give a way for the
server to know it’s from the same user
Being stateless is simpler for HTTP
But limiting to applications
7
Cookies in Action
The scenario is:
Browser about to send a request for a URL
But it first looks for cookies linked to that
URL that are stored on client machine
If found, the cookie is sent to the server with
the HTTP request for the URL
Server uses cookie data
E.g. associate this current visit with a previous visit
Server may then set updated cookie on
client machine
E.g. to be sent back with the next request
8
Purposes of Cookies
Authentication
User-id, password stored on client
Sent on next visit. No login required!
Personalization
Remember user preference for fonts, colors,
skin, site-options, etc.
Shopping carts
Tracking
How is our site used?
Multi-site tracking by companies looking for
usage profiles etc.
9
Cookie FAQs and Myths
They don’t transmit viruses.
Can’t erase data on client machine.
Can’t read personal info on client
machine.
Not used for spamming, pop-ups.
Are they spyware? Discuss!
10
What’s in a Cookie?
It’s just text data as follows:
NAME=VALUE
Name value pairs
expires=<date> (optional)
Without a date, deleted when browser
closed
path=<path> (optional)
domain=<domain> (optional)
secure (optional)
11
Create a Cookie with
JavaScript
document.cookie = "username=J
ohn Doe";
document.cookie = "username=J
ohn Doe; expires=Thu, 18 Dec
2013 12:00:00 UTC";
12
Read a Cookie with
JavaScript
let x = document.cookie;
document.cookie will return all
cookies in one string much like:
cookie1=value; cookie2=value;
cookie3=value;
13
Delete a Cookie with
JavaScript
Deleting a cookie is very simple.
You don't have to specify a cookie
value when you delete a cookie.
Just set the expires parameter to a
past date:
document.cookie = "username=;
expires=Thu, 01 Jan 1970
00:00:00 UTC; path=/;";
14
A Function to Set a Cookie
function setCookie(cname, cvalue, exdays)
{
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires
+ ";path=/";
}
15
A Function to Get a Cookie
function getCookie(cname) {
let name = cname + "=";
let decodedCookie
=decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
16
A Function to Check a
Cookie
If the cookie is set it will display a greeting.
If the cookie is not set, it will display a prompt box, asking for the name
of the user, and stores the username cookie for 365 days, by calling the
setCookie function:
function checkCookie() {
let username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
17
Browser Control of Cookies
At least 20 cookies per domain
Newer browsers store more
But most sites use just one, and have
an ID value to reference info stored
on server
Total size limit on all cookies (e.g.
4K for IE)
18
Browser Control of Cookies
(2)
User can control how they’re handled:
Don’t let server write them to client PC
Asks permission (perhaps with a white-list)
Always accept them
Perhaps except for those on a black-list
User can view and manage cookies
E.g. Firefox’s Preferences->Privacy->Show
Cookies
19
Try This at Home!
In your browser’s address field, type:
javascript:alert("Cookies:
"+document.cookie)
Note javascript: pseudo protocol
You know alert in JavaScript now
Looks like the DOM lets us see a
cookie
20
To Do at Home
On your machine, explore your own
cookies
Try to see what some of them might be for
Based on what you know of the site
21
JavaScript on the Client-
Side
Can just do this (on one line):
document.cookie=“user=tom;domain=
cs.uva.edu;path=/cs453; secure;”
we have three functions for your .js
library
SetCookie(…), GetCookie(name),
DeleteCookie(…)
22
More Reading
Wikipedia has a nice article
Note issues on laws governing
cookies!
Why? The White House, the NSA and
the have used cookies to track users
Various websites
Check your browser for what it
does and what it can tell you
23
Cookie Example
The domain and path tell the browser
that the cookie has to be sent back to
the server when requesting URLs of a
given domain and path.
Cookies are identified by the
combination of their name, domain,
and path, as opposed to only their
name.
Cookie values are changed only if a
new value is given for the same name,
domain, and path
24
Cookie Uses: Session
Management
Session Management: stores user related data across multiple accesses.
Originally, web developers put shopping cart content directly in a cookie.
This may make the cookie too big: cookies are intended to be used only for
infrequent storage of a small amount of data on the user’s machine.
Cookie limitations depend on browsers. But the following limits generally
apply:
─ 300 cookies total.
─ 20 cookies per server (not per page or site) So, web developers should try to
combine name-value pairs into one cookie.
─ 4K data per cookie (including everything).
Nowadays, web developers typically store the shopping cart contents in a
database on the server, and stores the unique session ID in the cookie.
25
Cookie Uses:
Authentication and
Personalization
Authentication: enable users to log in once but request multiple pages
─ Allowing users to log in to a website is a frequent use of cookies. Typically the web
server will first send a cookie containing a unique session identifier. Users then submit
their credentials and the web application authenticates the session and allows the user
access to services.
Personalization: Cookies may be used to remember the information about the user who
has visited a website in order to show relevant content in the future. Many websites use
cookies for personalization based on users' preferences. Users select their preferences
by entering them in a web form and submitting the form to the server. The server
encodes the preferences in a cookie and sends the cookie back to the browser. This
way, every time the user accesses a page, the browser sends to the server the cookie
where the preferences are stored, and then the server personalizes the page according
to the user preferences.
─ For example, the Wikipedia website allows authenticated users to choose the webpage
skin
they like best; the Google search engine allows users (even non-registered ones) to decide
how many search results per page they want to see.
26
Cookie Uses: Tracking
within One Site
1. If the user requests a page of the site, but the request contains no
cookie, the server presumes that this is the first page visited by the user;
the server creates a cookie back to the browser together with the
requested page.
2. From this point on, the cookie will be automatically sent by the browser
to the server every time a new page from the site is requested; the server
sends the page as usual, but also stores the URL of the requested page,
the date/time of the request, and the cookie in a log file.
3. By looking at the log file, it is then possible to find out which pages the
user has visited and in what sequence.
For example, if the log contains some requests done using the cookie
id=abc, it can be determined that these requests all come from the same
user. The URL and date/time stored with the cookie allows for finding out
which pages the user has visited, and at what time
27
Cookie Uses: Tracking
across Multiple Sites
A web page often contains objects from other sites.
When browser retrieves these objects from these sites that users do not know, these sites
may set cookies. These cookies are called third-party cookies. The cookies set by the
site in user’s browser address bar is called first-party cookies.
Modern browsers, such as Mozilla Firefox, Internet Explorer and Opera, by default, allow third-
party cookies, although users can change the settings to block them.
There is no inherent security risk of third-party cookies (they do not harm the user's
computer) and they make lots of functionality of the web possible, however some internet
users disable them because they can be used to track a user browsing from one website to
another. This tracking is most often done by on-line advertising companies to assist in
targeting advertisements.
For example: Suppose a user visits www.domain1.com and an advertiser sets a cookie in the
user's browser, and then the user later visits www.domain2.com. If the same company
advertises on both sites, the advertiser knows that this particular user who is now viewing
www.domain2.com also viewed www.domain1.com in the past and may avoid repeating
advertisements.
28
Cookie Privacy Concerns
and Misconceptions
Jupiter Research published the results of a survey, according to which some
people believed some of the following false claims:
─ Cookies are like viruses in that they can infect the user's hard disks
─ Cookies generate pop-ups
─ Cookies are used for spamming
─ Cookies are used only for advertising
The possibility of building a profile of users is considered by some a potential
privacy threat, especially when tracking is done across multiple domains using
third-party cookies. For this reason, some countries have legislation about
cookies.
Third-party cookies can be blocked by most browsers to increase
privacy and reduce tracking by advertising and tracking companies without
negatively affecting the user's Web experience.
29
Secure Cookie Scheme -
Requirements
1.Authentication
─ Login phase
2.Confidentiality
─ Need to toggle the “secure” flag. Then this cookie is only sent
over SSL.
3.Integrity
─ Need to detect whether a cookie is compromised.
4.Anti-replay
─ Detect replay of stolen cookies.
30
Insecure Cookies Schemes
Example of a silly mistake:
─ Shopping cart software:
Set-cookie: shopping-cart-total = 100 ($)
─ User edits cookie file (cookie poisoning):
Cookie: shopping-cart-total = 1 ($)
31
Cross Site Scripting -
Overview
Attacker causes a legitimate web server to send user
executable content (Javascript, Flash ActiveScript) of
attacker’s choosing.
Same- Origin Policy ─ Browser only allows Javascript from site
X to access cookies and other data from site X.
─ Key idea of XSS: Attacker needs to make attack come from
site X. Victim’s browser loads code from site X and runs it.
Vulnerable Server Program ─ Any program that returns user
input without filtering out dangerous code.
XSS used to obtain cookies used as authenticators for ─ Bank
site (transfer money to attacker) ─ Shopping site (buy goods
for attacker) ─ E-mail
32
Cross Site Scripting –
Sequence Diagram
33
Reflected XSS – Detailed
Flow
Reflected XSS ─ Injected script returned by
one-time message. ─ Requires tricking user to
click on link. ─ Non-persistent. Only works
when user clicks.
34
Stored XSS
Stored XSS ─ Injected script stored in comment, message,
blog, etc. ─ When visitor loads the page, web server
displays the content and visitor’s browser executes the
malicious script.
Many sites try to filter out scripts from user content, but
this is difficult. ─ Requires ability to insert malicious code
into web documents (comments, reviews, etc.) ─
Persistent until message deleted.
Example: auction site that allows buyers to post
questions and sellers to post responses. ─ If an attacker
can post a question containing a script, the attacker could
get a user to bid without intending to or get the seller to
close the auction and accept the attacker’s low bid.
35
XSS Conquences
An attacker can run a script in the wrong security
context
─ Cookies can be read/written
─ Attackers can hijack user accounts. Attacker can do
anything a user can do.
─ Plug-ins and native code can be launched or scripted
with untrusted data
─ User input can be intercepted
─ Complete credential exposure if the site is Passport
enabled
Only one vulnerable page on one Web server in a
domain is required to compromise the entire domain.
36
Why Users Click Malicious
Links?
Phishing email in webmail client
(e.g., Gmail).
Link in DoubleClick banner ad.
Many ways to fool user into
clicking.
37
Email Snare
Example: From: “Example Customer Services”
To: “J Q Customer”
Dear Valued Customer, You have been selected to participate
in our customer survey. Please complete our easy 5 question
survey, and return we will credit $5 to your account.
To access the survey, please log in to your account using your
usual bookmark, and then click on the following
link: https://example.com/%65%72%72...?message%3d...att
%61%63%6b.com...docum%65..%63ookie...
The link contains the correct domain name (unlike phishing).
The URL has been obfuscated. Below is another example: ─
ASCII Usage: http://host/a.php?variable=>
38
Past XSS Attacks
MySpace worm (October 2005) ─ When someone
viewed Samy’s profile:
Set him as friend of viewer.
Incorporated code in viewer’s profile.
Paypal (2006) ─ XSS redirect used to steal money from
Paypal users in a phishing scam.
BBC, CBS (2006) ─ By following XSS link from
securitylab.ru, you could read an apparently valid story
on the BBC or CBS site claiming that Bush appointed a
9-year old as head of the Information Security
department
39
XSS Countermeasures
Validate all input ─ Lack of proper input validation is the single
biggest cause of Web-App compromise
─ Dos
● Do Validate for Length, Range, Format and Type
● Do Validate from all sources: QueryStrings, Cookies, HTML
Controls
─ Don’ts
● Do not rely on Client-side Validation
● Do not rely on ASP.net Request Validation
● Do not use user-supplied file name and path input
● Do not directly echo Web-based user input
Filter output ─ Replace HTML special characters in output
Tagged cookies: Include IP address in cookie and only allow access
to original IP address that cookie was created for.
40
41
42
43
44
45
46
47
48
49
50
51
Style Sheets
Recall: design goal to separate
structure of documents from display
But display matters a lot
CSS: Cascading Style Sheets
For us, with HTML
Brief details here
Web resources: many, including:
http://www.w3schools.com/css/
default.asp
52
Ways to Specify Style
Multiple ways
Put STYLE= attribute on elements
<P STYLE=“font-size: 20pt; color:
#0000ff”> blah blah </P>
Use a STYLE element in your HTML
file
Use an external style-sheet
53
STYLE element in HTML
Think of this as an in-line style-sheet
Assigns style-rules for element types
Defines new style-classes
Groups a set of styles and gives them a name.
They can be applied to HTML elements.
Put in the <HEAD>
<STYLE TYPE=“text/css”>
<!-- style rules and class in here -->
</STYLE>
54
Example
<style type="text/css">
<!--
body { margin-left: 0px; margin-top: 0px;
background: blue; color: white; }
h1 { font-family: Arial, sans-serif;
color: yellow; }
h1:hover { color: red; }
.strong { font-weight: bold; color: red; }
-->
</style>
55
Example
<HTML><HEAD>
<TITLE>CSS Demo 1</TITLE>
<style type="text/css">
<!-- CSS on previous slide goes here -->
</style>
</HEAD>
<BODY>
<H1>A Header</H1>
<P>First paragraph</P>
<P CLASS="strong">Second Paragraph with
<SPAN STYLE="color: white">something that overrides</SPAN>
a style.</P>
</BODY></HTML>
56
Output
“A Header” turns red on mouse-over
57
External Style Sheets
Want a common look and feel?
Write once!
Put CSS statements in a .css file
In your HTML file:
<HEAD>
<TITLE>CSS Demo 2</TITLE>
<LINK REL="stylesheet" TYPE="text/css"
HREF="demo1.css">
</HEAD>
REL means relationship between two files
58
Another Example
The CSS
A { text-decoration: none }
A:hover { text-decoration: underline; color: red;
background-color: #CCFFCC; }
LI EM { color: red; font-weight: bold; }
UL { margin-left: 1cm; }
UL UL { text-decoration: underline; margin-left:
3cm; }
59
HTML for previous CSS
<BODY><H1>Demo 3: More CSS</H1>
Here's <A HREF="http://www.sun.com">a link</A>
to <EM>Sun's site.</EM>
<UL>
<LI> Item one. <EM>Of course!</EM>
<UL>
<LI> SubItem one.
<LI> SubItem two.
</UL>
<LI> Item two.
</UL>
</BODY>
60
Output
Note <EM> style governed by nesting
Note separate style for nested <UL>s
Link displayed different on mouse-over
61
More, Advanced CSS
Positioning options not normally
possible in HTML
Background images
Element dimensions
Text flow
User style sheets can override
page author’s
Compatibility issues
62
References
W3C
Documentation on various levels of
CSS
And Wikipedia
And many many books
See UVa’s Safari on-line collection
63
Concluding Remarks
the components of DHTML
HTML
JavaScript
CSS
the idea of Cookies
something more about client/server
relationships and web pages
64
