web pages originally static page is delivered exactly as stored on server same information...
DESCRIPTION
Two classes of dynamic content Distinction lies in where the code is executed Client-side Code is executed on the computer running the client (i.e., web browser) Server-side Code is executed by the server based on a client request Result provided to the client Can be static or provide for client-side content Most modern web sites make use of both client- side and server-side scripting Advantages, disadvantage, and risks associated with both 3Client-Side ScriptingTRANSCRIPT
Client-Side Scripting 2
Static vs. Dynamic Content Web pages originally static
Page is delivered exactly as stored on server Same information displayed for all users, from all
contexts Dynamic pages allow page content to
change base on user actions, contexts, or other conditions Page layout and content created separately
Content is often retrieved from an external source (e.g., database)
Content is placed within the layout only when needed or requested
Client-Side Scripting 3
Client-side vs. Server-side Two classes of dynamic content
Distinction lies in where the code is executed Client-side
Code is executed on the computer running the client (i.e., web browser)
Server-side Code is executed by the server based on a client request Result provided to the client
Can be static or provide for client-side content Most modern web sites make use of both client-
side and server-side scripting Advantages, disadvantage, and risks associated
with both
Client-Side Scripting 4
Common Scripting Languages
Client-side JavaScript VBScript ActionScript (Adobe Flash) Asynchronous JavaScript and XML (AJAX)
Server-side Perl Common Gateway Interface (CGI) JavaScript PHP Active Server Pages (ASP) ASP.NET JavaServer Pages (JSP) ColdFusion
Client-Side Scripting 5
Design Issues Computational resources
Which system does the work? Data access
Which system has access to the required data?
Security Which system carries the risk? Which system can an attacker target? What attack vectors are available?
Client-Side Scripting 6
JavaScript Used to provide enhanced users
interfaces and dynamic web sites Interpreted language
Scripts are executed without compiling Relies on a run-time environment to
interact with “the outside world” Interprets JavaScript code and generates
machine code executed by the CPU Enables browser to handle Content-Type
text/javascript
Client-Side Scripting 7
Embedding JavaScript JavaScript can be attached to a web page
In the header (<head>…</head>) In the body (<body>…</body>) As an event handler/listener
Code executed when an action is taken (e.g., click mouse button)
JavaScript embedded in the header or body is included within the <script> tag <script type="text/javascript">…</script>
Client-Side Scripting 8
External JavaScript Files JavaScript can be stored in separate file
Large scripts Code used in multiple pages
JavaScript files traditionally use .js extension example.js
Syntax <script type="text/javascript" src="example.js"></script>
Note: the src attribute doesn’t have to point to a file on the same site as the webpage using it <script type=“text/javascript” src=“http://anothersite.com/example.js”></script>
Client-Side Scripting 9
JavaScript Execution Scripts contained in the header or body are
executed as they are encountered (when the page loads) Code included in a function is NOT executed
unless the function is called Code that manipulates page elements MUST be
defined (or called) after the element it manipulates
Execution assumes user has JavaScript enabled Most browsers allow the user to disable JavaScript
Client-Side Scripting 10
Document Object Model (DOM) Scripts without ability to interact with
webpage are of limited utility Scripts interact with webpage via the DOM
Allows scripts to change any aspect of the page DOM is a convention for representing and
interacting with objects in HTML Constructed from a page’s HTML file
Reflects the structure of the page Browser’s internal representation of a webpage
Most browsers have a similar (but not identical) DOM
Client-Side Scripting 11
DOM Access The DOM is accessed via the document
object document.write(…)
Allows script to write HTML code to the page document.location
Holds the URL for the current page Can view the current URL
Ex: alert(document.location); Can also set the current URL
Ex: document.location = “http://url.com/”; Used to redirect users to another site
Client-Side Scripting 12
HTML and E-mail Almost all e-mail clients support
attachments Can attach an HTML to e-mail
If recipient opens attachment, the page will be rendered in the recipients browser Including embedding JavaScript Can be used for redirection (or more malicious
purposes) Most e-mail clients support HTML
formatting Client renders HTML-formatted e-mails
Embedded scripts can be executed if the e-mail client supports script execution
Just opening the e-mail can cause scripts to execute