websec demos

Demo webpages for Web Security

This directory contains some examples that illustrate some features of the web (or more in particular, of HTTP and HTML). They are all bare-bones examples consisting of just a few lines of HTML. Things are kept as simple as possible to make the fundamental concepts clear. Most webpages these days make use of frameworks to make them look nicer. They usually also include JavaScript that is executed client-side in the browser: they are then called web apps rather than web pages.

The web page you are currently seeing is simply a directory listing that is exposed to the internet by a web server. It is the default behaviour of our university web server to display the content of any README.html file present in a directory, so the bottom part of this webpage is the content of the file README.html in the directory web-docs/websec/demo of my Linux home directory.

We sometimes we will refer to the official HTML specification for some details. The HTML spec is not part of the exam material: the spec is constantly updated and the PDF version is over 1400 pages long. The spec is available as one page of HTML but the multipage version may make for more pleasant browsing.

Demos for lecture 1:

demo_get_post.html is a page with GET and POST requests to inspect in the browser or using a proxy.
demo_javascript.html is a page with some simple JavaScript that uses the DOM API.
demo_DOM.html is a JavaScript demo that shows some more features of the DOM. The button at the bottom of this page leads you to a exercise to explore the capabilities of JavaScript and the DOM from the console in your browser, incl. the possibilities for so-called (reverse) tabnabbing, where JavaScript code can open new browser tabs or change existing browser tabs to try to confuse the user. We will go into this in lecture 4.
demo_DOM2.html gives more examples of how JavaScript can interact with the DOM, for instance to inspect the URL.

Demos for lecture 2:

mixed_content.html is a page which mixes HTTP and HTTPS content.

Demos for lecture 4:

test_SOP.html is a page with an iframe (inline frame), which is effectively a webpage embedded inside another webpage, that tests the Single Origin Policy (SOP): in particular, it shows JavaScript from one origin cannot access content coming from another origin.

Demos for lecture 5:

xss_via_DOM.html shows how a webpage can import parameters from the URL, and how that can be abused for XSS attacks, where JavaScript is sneaked into a webpage via a poisoned parameter in the URL.

Demos for lecture 7:

Web pages with ClickJacking/UI redressing:
- clickjack_basic.html
- clickjack_some_button.html and a version where the inner redressed frame is made transparent clickjack_some_button_transparent.html
- clickjack_some_button_transparent.html
Brightspace does not have any protection against reusing Brightspace webpages inside other pages: the webpage UI_redressing_brightspace.html includes Brightspace inside another page without any problems.
framebusting1.html shows how the iframe framebuster.html it includes will bust the outer framebusting1.html and become the top webpage.
framebusting2.html shows how using sandboxing for the iframes can prevent such framebusting.

About the webpage you are seeing now: ~erikpoll/webdocs/demo is simply a directory on the local file system of our Linux server that has been set to be world-readable. When you access the URL http://www.cs.ru.nl/~erikpoll/websec/demo the web server will show the directory listing of ~erikpoll/webdocs/demo (which you can see at the top of the page) and the content of the file called README.html in that directory, if that file exists.