Learn About Serverless Scripting Sandbox

What is the Serverless Scripting Sandbox?

The Serverless Scripting Sandbox (sandbox.edgeengine.io) is a great tool for testing your serverless scripts before deploying them to our edge. Before diving deeper into the sandbox, it's worth briefly running through what Serverless Scripting is.

Serverless Scripting is a platform that enables you to upload JavaScript scripts on a per-site basis that can interact with any and all requests coming through your StackPath site, allowing you to manipulate requests before reaching the edge or your origin. This also allows manipulation of response data before reaching the client (among other use cases). To learn more about the basics of Serverless Scripting with examples, you can view our online documentation here.

What can I do with Serverless Scripting Sandbox?

You can freely test your scripts before deployment to ensure they work as expected. The first major element of the sandbox is the simple to use code editor, which you should be familiar with if you've used Serverless Scripting before.

The editor includes code complete and contextual information on hover (including errors), as seen in the screenshot:

Next, we can look at the request window. Here, you can choose between an Iframe, which will give you a browser-like visual experience, or Raw, which will issue requests and return the resource as text:

The final element of the sandbox is the console, which is great for debugging your scripts on the fly, and also for confirming your script is working as intended:

Using Sandbox with an example

Here's an example script for our Sandbox. It will take an array of paths that will be redirected back to the apex domain if the path is found in the user's request:

// Redirect users based on path
addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request));
});

/**
 * Fetch and return the request body
 * @param {Request} request
 */
async function handleRequest(request) {
  try {
    /* Fetch the response */
    console.log(request.url);
    let response = await fetch(request);
    
    /* Set our paths that will be redirected, and the Location header which is the URL we will redirect to */
    var paths = ["/path1", "/path2"];
    const modifiedHeaders = new Headers(response.headers);
    modifiedHeaders.append("Location", "https://www.google.com");
    
    /* Here, we chech each path in the paths against the request URL */
    paths.forEach(item => {if (request.url.search(item) != -1) {
    /* If we match, we edit status code, text, and headers to redirect back to apex URL */
        response.status = 301;
        response.statusText = "Moved Permanently"
        response.headers = modifiedHeaders
        return response;
      }});
    /* If we don't find a desired path in the request URL, we don't edit the response */ 
    return response;
  } catch (e) {
    return new Response(e.stack || e, { status: 500 });
  }
}

We're going to use this script as an example, so feel free to read through the comments. With the script in place in Sandbox, let's observe the results.

Request #1 

https://google.com/path1

Note that "/path1" is in our paths variable, so we want users to be redirected. Let's take a look at the response:

The default response for that path is a 404 page since it doesn't actually exist, however, the request works for our purposes. You can see we hit Google's homepage, which suggests we got redirected successfully. You can confirm this by looking at the console, where we're logging request URLs. Note that the last URL is the pathless URL, which is what we want.

Request #2

https://www.google.com/path3

 This path isn't in our paths variable, so we don't want to redirect. We expect a 404 page:

As expected, the response wasn't edited and we didn't get redirected. This is a simple example that we hope will display what Serverless Scripting can do, and how you can test your scripts quickly and easily before deployment.