1 / 28

Section: Web Programming

Spring 2007. CS 155. Section: Web Programming. Collin Jackson. Deadlines. HTML. Web publishing language. URLs. Global identifiers of network-retrievable documents Example: http://user:pass@stanford.edu:81/class?name=cs155#officehours

tanyad
Download Presentation

Section: Web Programming

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Spring 2007 CS 155 Section: Web Programming Collin Jackson

  2. Deadlines

  3. HTML Web publishing language

  4. URLs • Global identifiers of network-retrievable documents • Example: http://user:pass@stanford.edu:81/class?name=cs155#officehours • Another acronym, URI, is similar but slightly more general • Special characters are encoded as hex: • %0A = newline • %20 or + = space, %2B = + (special exception) Protocol Fragment Hostname Username Port Path Query Password

  5. Example HTTP Request GET / HTTP/1.0 Browser Web server HTTP/1.1 200 OK index.html <html> <head> <title>Title of page</title> </head> <body> <b>Hello world!</b> </body> </html> Hello world!

  6. Tags • Surrounded by angle brackets<> • <html> - wraps entire page • <head> - header information, not displayed • <title> - displayed at top of browser • <body> - content that will be displayed • Normally come in pairs • Optional for some older tags, e.g. <br> • Can also be self-closed: <td/> = <td></td> • Not case sensitive, but usually lower case

  7. More examples • Headings: <h1>This text will be large</h1> • Paragraphs: <p>This paragraph has a margin</p> • Page regions: <div><span>Stop</span> it!</div> • Comments: <!-- This text is ignored --> • Tables: <table> <tr><th>Header1</th><th>Header2</th></tr> <tr><td>Data</td><td><Data2</td></tr> </table>

  8. Properties • Key=value pairs inside a tag • <img src="hamster.gif" /> • Can represent URLs in different ways • relative: images/hamster.gif • server-relative: /images/hamster.gif • absolute: http://animals.com/images/hamster.gif • Use relative where possible on Project 2 • Can delimit value with ' or " or nothing

  9. Frames • Embed HTML documents in other documents <iframe name=“myframe” src=“http://www.google.com/”> This text is ignored by most browsers. </iframe>

  10. Anchor Tags • Hyperlink navigates the browser to a URL when clicked <a href=“cs155.html#officehours”>link text</a> • Can set an anchor for a fragment <a name=“officehours”></a>My office hours are… • Can target a frame or new window <a href=“http://mysite.com” target=“myframe”> <a href=“http://mysite.com” target=“_top”> <a href=“http://mysite.com” target=“_parent”> <a href=“http://mysite.com” target=“_blank”>

  11. Forms • Provides a way to interact with server-side scripts <form action=“/login.php”> <input type=“text” name=“username” value=“”> <input type=“password” name=“password” value=“”> <input type=“submit” value=“Log in”> </form> • Use method=“GET” for queries that do not send state • Use method=“POST” for requests have side effects, or passwords • Use target=“myframe” to avoid navigating away

  12. CSS Style Information • Style information can be set as a property <span style="color: red”>This will be red.</span> • Stylesheets set styles globally <style type="text/css"> body { margin-left: 1em; font-size: 10pt; } /* by tag */ #par3 { font-size: 14pt; } /* by id */ .conclusion { font-weight: bold; } /* class only */ p.conclusion { display: block } /* by tag+class */ </style>

  13. JavaScript Client-side scripting language

  14. JavaScript Overview • Browser scripting language with C-like syntax • Sandboxed, garbage collected • Closures var x = 3; var y = function() { alert(x); }; return y; • Encapsulation/objects function X() { this.y = 3; } var z = new X(); alert(z.y); • Can interpret data as code (eval) • Browser-dependent

  15. Invoking JavaScript • Tags: <script>alert( ‘Hello world!’ )</script> • Links: javascript:alert( ‘Hello world!’ ) • Wrap code in “void” if it has return value • Beware, newlines in URIs require encoding • Event handlers: <button onclick=“alert( ‘Hello world!’ )”> • CSS (IE only) <style>body { background: url(javascript:alert( ‘Hello world!’ )); }</style>

  16. DOM Manipulation Examples • document.getElementByID(id) • document.getElementsByTagName(tag) • document.write(htmltext) • document.createElement(tagname) • document.body.appendChild(node) • document.forms[index].fieldname.value = … • document.formname.fieldname.value = … • frame.contentDocument.getElementById(id)

  17. Arrays and Loops Example: Change href of all links on a page <script> var links = document.getElementsByTagName(‘a’); for (var i = 0; i < links.length; i++) { var link = links[i]; link.href = “javascript:alert(‘Sorry!’);”; } </script>

  18. Enumerating Properties <script> var myobj = { color: “red”, shape: “circle” }; for (var prop in myobj) { alert(“The “ + prop + “ is “ + myobj[prop]); } </script> • Useful for inspecting DOM objects

  19. Firefox JavaScript console Shows JavaScript errors DOM Inspector Advanced debugging: Page structure DOM properties JavaScript properties CSS style rules Needs to be selected during installation Client-side Debugging Tools Undefined = No properties!

  20. Demo • http://www.google.com • http://scriptasylum.com/tutorials/encdec/encode-decode.html

  21. Other Useful Functions • Navigation • document.location • document.formname.submit() • document.forms[0].submitfield.click() • Delayed Events • node.addEventListener(eventname, handler, useCapture) • node.removeEventListener(eventname, handler, useCapture) • window.setTimeout(handler, milliseconds)

  22. Stealthy Styles var node = document.getElementByID(“mynodeid”); node.style.display = ‘none’; // may not load at all node.style.visibility = ‘hidden’; // still takes up space node.style.position = ‘absolute’; // not included in flow document.write( // can also write CSS rules to page “<style>#mynodeid { visibility:hidden; }</style>”);

  23. PHP Server-side scripting language

  24. PHP: Hypertext Preprocessor • Server scripting language with C-like syntax • Can intermingle static HTML and code <input value=<?php echo $myvalue; ?>> • Encapsulation/objects class X { public $y = 3; } $z = new X(); echo $z->y; • Can embed variables in double-quote strings $user = “world”; echo “Hello $user!”; or $user = “world”; echo “Hello” . $user . “!”; • Form data in global arrays $_GET, $_POST, …

  25. Dynamic Web Application GET / HTTP/1.0 Browser Web server HTTP/1.1 200 OK index.php Database server

  26. SQL • Widely used database query language • Fetch a set of records SELECT * FROM Person WHERE Username=‘grader’ • Add data to the table INSERT INTO Person (Username, Zoobars) VALUES (‘grader’, 10) • Modify data UPDATE Person SET Zoobars=42 WHERE PersonID=5 • Query syntax (mostly) independent of vendor

  27. Recommended Resources • w3schools.com Tutorials on: • HTML • CSS • JavaScript • PHP • php.net Searchable PHP reference

  28. Next section: Project 2 Finding vulnerabilities Crafting exploits Sanitization Validation

More Related