1 / 42

Scripting

Scripting. Website. In its simplest form, a website is collection of documents written in the HTML language. When a user looks at a website with a browser, the browser is able to follow the instructions presented to it in HTML to make a website look a particular way. . Static.

rainer
Download Presentation

Scripting

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

  2. Website In its simplest form, a website is collection of documents written in the HTML language. When a user looks at a website with a browser, the browser is able to follow the instructions presented to it in HTML to make a website look a particular way.

  3. Static The HTML code for this type of website is static. In other words, when the user reloads the static website, they see the exact same content every time.

  4. Static cont. Its content is written directly by an author, and when the user goes to the site, that code is downloaded into a browser and interpreted.

  5. Dynamic In contrast to a static website, a dynamic website’s content is regenerated every time a user visits or reloads the site. User interactions cause changes to the page, or websites have pages that look different to different users. Weather pages and Google maps are examples of dynamic web content.

  6. Dynamic Content Dynamic content is only possible if user interactions can cause some chunk of code to execute. However, allowing code to execute in response to user input poses security risks.

  7. Turning off Scripts You could turn off scripts in your browser; how depends on the browser. Of course lots of useful and fun websites then become useless or boring. More functionality often means less security. The tradeoff is something to consider.

  8. How are scripts included in web pages? What are some basic commands to make dynamic pages accept user input? How are these commands used to generate some unexpected and/or malicious results?

  9. Many web pages are static; what displays on the current page does not change with user input <html> <head> <title>A Static Web Page</title> </head> <body bgcolor="#000003" text="#ffcc33"> <h1>A Static Web Page</h1> <p>It can have <a href="http://www.marylandpublicschools.org/msde">links</a>. </html> <body> GO TO: http://edtechpolicy.org/DemoCode/staticwebsite.html

  10. Static vs. DynamicStatic Static web pages typically contain text, hyper links, photos, and graphics. Pages may also contain interactive media such as: Movie Clips (YouTube for example), Adobe Flash presentations, and other media types. Pages are called Static because text, photos, and other content will not change unless the actual web page file itself is edited.

  11. <html> <head> <title> </title> </head> <table width="400px" border="2" cellspacing="4" cellpadding="4"> <tr> <th scope="col"> <b>Select each option below</b><br> <script type="text/javascript"> function dynExAct(n) { var bid = 'bb' + n, did = 'dd' + n; vartheButton = document.getElementById(bid); vartheDiv = document.getElementById(did); if (theButton.innerHTML == '*') { theButton.innerHTML = '='; theDiv.style.display = 'block'; } else { theButton.innerHTML = '*'; theDiv.style.display = 'none'; } } </script> <b><span id="bb1" style="font-family: monospace; cursor: pointer;" onclick='dynExAct(1)'>*</span> Click this one.</b><br> <div id="dd1" style="display: none;">Nice job</div> <b><span id="bb2" style="font-family: monospace; cursor: pointer;" onclick='dynExAct(2)'>*</span> and here</b><br> <div id="dd2" style="display: none;">Exactly right.</div> <b><span id="bb3" style="font-family: monospace; cursor: pointer;" onclick='dynExAct(3)'>*</span> You are a star</b><br> <div id="dd3" style="display: none;">For clicking correctly.</div> </th> </tr> </table> <body> </body> </html> Go to: http://edtechpolicy.org/DemoCode/OpeningJavascript.html

  12. Dynamic Dynamic Websites employ dynamic pages that allow code to execute in response to user input.

  13. The code executed by the user input can occur by two mechanisms. If the code is executed on the client machines or in the web browser it is called client-side scripting. If the code is executed on the server it is called server-side scripting.

  14. The consequences associated with the type of scripting are important, especially as related to security issues. In client-side scripting, the computer displaying the website is the one that could be compromised, and is therefore at risk. In server-side scripting, the computer generating the webpage could be at risk.

  15. CPU time Executing scripts require processing, and therefore use CPU cycles. The computers running the scripts therefore have an additional work load. Client-side scripting puts the load on the machine displaying the web page, while server-side scripts generate more work for the computer generating the webpage, which could end up being significant if it is generating many web pages simultaneously for multiple users.

  16. Understanding the type of web page you are accessing, helps you evaluate potential risks and act accordingly.

  17. Embedding ScriptsLet’s look more about embedding scripts within web pages. In order to create dynamic websites, it is necessary to have a defined way to interact with the web pages. The HTML Document Object Model (DOM) provides a standard way for accessing and manipulating HTML documents where a document is presented as a tree type structure.

  18. <script type="text/javascript">...</script>  DOM presents an interface to allow programs and scripts to access and update the content, structure, and style of a document. In other words, it describes the way to get, change, add, or delete HTML elements. \ Browsers allow javascript to be embedded within the HTML code within <script type="text/javascript">...</script> 

  19. http://edtechpolicy.org/DemoCode/GoMD.html <html> <head></head> <body> <script type="text/javascript"> variter = 0; while(iter < 1000) { iter = iter + 1; document.write("G O M A R Y L A N D!"); } </script> </body> </html> G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D! G O M A R Y L A N D!

  20. http://edtechpolicy.org/DemoCode/GoMDcolor.html <html> <head></head> <body> <script type="text/javascript"> variter = 0; while(iter < 1000) { iter = iter + 1; document.write('<span style="color: #960000">G O</span> <b><span style="color: #FFB900">M A R Y</span></b> <span style="color: #960000">L A N D ! </span>'); } </script> </body> </html>

  21. http://edtechpolicy.org/DemoCode/MD3.html <html> <head></head> <body> <script type="text/javascript">document.write("Maryland");</script> <script type="text/javascript">document.write(“ moves");</script>to the: <script type="text/javascript">document.write(“ <span style='color: #ff0000;'>Big</span>");</script> <script type="text/javascript">document.write(“ <span style='color: #0000ff;'> 10</span>");</script>. </body>< /html> Maryland moves to the: Big10

  22. “src” attribute: Code reuse <!DOCTYPE html> <html> <body> <script src="demo_script_src.js"> </script> </body> </html> For example, rather than write… <script type="text/javascript">document.write("Go Maryland.");<script> write: <script type="text/javascript" src="ex.js"><script>

  23. http://edtechpolicy.org/DemoCode/TimeTest.html

  24. http://edtechpolicy.org/DemoCode/TimeTest.html <div style="border-style: solid; padding: 1em; margin: 1em;"> <script type="text/javascript"> var today = new Date(); varGradDay = new Date(2016,5,31,12,0,0,0); // noon on May 31, 2016 varmsLeft = (GradDay.getTime() - today.getTime()); varsLeft = Math.floor(msLeft/1000); varsfinal = sLeft % 60; varmfinal = Math.floor(sLeft / 60) % 60; varhfinal = Math.floor(sLeft / 60 / 60) % 24; vardLeft = Math.floor(sLeft/60/60/24); document.write("Only " + dLeft + " days, " + hfinal + " hours, " + mfinal + " minutes, " + sfinal + " seconds left 'til 2016's graduation (assuming May 31)!"); </script> </div> Only 1129 days, 5 hours, 36 minutes, 50 seconds left 'til 2016's graduation (assuming May 31)!

  25. Update Automatically http://edtechpolicy.org/DemoCode/TimeTest2.html <div id="gradDayTimer" style="border-style: solid; padding: 1em; margin: 1em;"> </div> <script type="text/javascript"> setInterval(function(){ var today = new Date(); varGradDay = new Date(2016,5,31,12,0,0,0); // noon on May 31, 2016 varmsLeft = (GradDay.getTime() - today.getTime()); varsLeft = Math.floor(msLeft/1000); varsfinal = sLeft % 60; varmfinal = Math.floor(sLeft / 60) % 60; varhfinal = Math.floor(sLeft / 60 / 60) % 24; vardLeft = Math.floor(sLeft/60/60/24); document.getElementById("gradDayTimer").innerHTML = "Only " + dLeft + " days, “ + hfinal + " hours, " + mfinal + " minutes, " + sfinal + " seconds left 'til 2016's graduation!"; },1000); </script> Click it several times to see what happens

  26. But what does this have to do with security? Imagine you had a link that said you were going to one page, but within the page there was a javascript command that said <script type="text/javascript"> document.location = 'http://www.malware.com'; </script> You thought you were going to one location, but instead – ended up somewhere else!

  27. Embedded images within an html email <imgsrc=”www.marylandpublicschools.org/MSDE/Images/msde_logowithoutborder.gif”>

  28. Vocabulary and Functions

  29. Event Driven http://www.marylandpublicschools.org/msde“ onclick="document.getElementById('notmsde').href='http://edtechpolicy.org/DemoCode/notMSDE.html';">MSDE</a>) http://edtechpolicy.org/DemoCode/MouseOverDemo.html What happened? How did it happen? When you hovered over the link you saw it going to http://www.marylandpublicschools.org/msde, but when you clicked on the link, it first executed the “onclick” action and reset the link to http://edtechpolicy.org/DemoCode/notMSDE.html.

  30. How could we make this even trickier? Try hovering over MSDE to see where it redirects too? <span onmouseover='document.location = "http://edtechpolicy.org/DemoCode/notMSDEonmouseover.html"'>MSDE</span>. http://edtechpolicy.org/DemoCode/MouseOverDemo.html • But wait I didn’t even click? This time this was an onmouseover function. Codes for these items are listed below.

  31. http://edtechpolicy.org/DemoCode/MouseOverDemo.html

  32. FORMShttp://edtechpolicy.org/DemoCode/FtoC.html <form name="convert" onsubmit="return false;"> <input type="text" name="faren" value="0" onchange="var f = document.forms.convert.faren.value; document.forms.convert.celsius.value = 5/9*(f-32);"> degrees Farenheit = <input type="text" name="celsius" value="0" onchange="var c = document.forms.convert.celsius.value; document.forms.convert.faren.value = 9/5*c+32;"> degrees Celsius </form>

  33. PASSWORDS http://edtechpolicy.org/DemoCode/passwordDemo.html and also need unseen.js

  34. Buttons <form name="buttonForm" onSubmit="return false;"> <input type="text" name="x" value="2"> <input type="button" value="Cube It" onclick="var n = document.forms.buttonForm.x.value; document.forms.buttonForm.x.value = n*n*n;"> </form> http://edtechpolicy.org/DemoCode/cubeit.html

  35. Server-side

  36. G O M A R Y L A N D! 1000 times. <html> <head></head> <body> <script type="text/javascript"> variter = 0; while(iter < 1000) { iter = iter + 1; document.write("G O M A R Y L A N D! "); } </script> </body> </html> function () { var out = ""; variter = 0; while(iter < 1000) { out = out + "G O M A R Y L A N D! "; iter = iter + 1; } return out; }

  37. Regardless of the technology, all server side script queries are built similarly. For example, paste https://maps.google.com/maps?q=college+park,+md In your browser. Replace with your hometown and see if it still works.

More Related