How to Create a ViewBits API Backend for Your Website

When you visit a website, your web browser (like Chrome, Firefox, or Safari) works by downloading and running code sent from the website. This code often includes HTML, CSS, and JavaScript. These files are what make the website look and function the way it does.

Since this code runs in your browser, anyone can view it using developer tools, which are built into most browsers. Developer tools allow you to inspect the website’s code, see how it works, and even view any data being sent or received by the site.

The Problem: JavaScript Code Reveals Your API Key

If your JavaScript code includes a sensitive API key (a kind of password that lets your code access an external service), that key is visible to anyone who checks the code using developer tools. This means someone could copy your API key and use it themselves, potentially costing you money, violating terms of use, or exposing your account to misuse.

The solution is to keep your API key hidden by moving it to a backend server. Instead of including the key in the JavaScript code that runs in the browser, you set up your own backend API wrapper. A backend is like the “brain” of a website that runs on a secure server (not visible to visitors).

Your backend takes requests from your website, adds the hidden API key, forwards the request to the external service, and then sends the result back to your website. This way, the key stays on your server, where it’s safe from prying eyes.

The Solution: Move API Keys to a Backend Server

The most secure way to handle sensitive information like API keys is to never expose it on the client side. In this example we will be creating a simple API wrapper using PHP that will take your website API requests and append your key on the backend to prevent hijacking.

This works because the frontend sends requests to your backend server, which forwards the requests to the ViewBits API using the stored key. Your backend returns the data to the frontend, and the API key remains hidden on the server.

Using the example script below, you can add your API key and make calls to ViewBits using https://yourwebsite.tld/api.viewbits.php instead of using https://api.viewbits.com directly.

Important: When using a wrapper, the data to retrieve is specified using the “dataset” tag rather than slashes in the URL. The version is also not required as this is specified on the backend. For example: https://api.viewbits.php?dataset=headlines&c=tech would take the place of https://api.viewbits.com/v1/headlines/?c=tech

You can use the example code below to create an ViewBits API wrapper for your website. Simply copy the example to a new file on your server named api.viewbits.php and make your calls to the wrapper.

Example Code:

Backend (PHP)

<?php

// api.viewbits.php

header("Content-Type: application/json");
header("Access-Control-Allow-Origin: *"); // Replace * with your frontend's domain for better security

// Your API key
$apiKey = 'YOUR_API_KEY';

// Base URL of the API
$apiBaseUrl = 'https://api.viewbits.com/v1/';

// Collect all user-provided GET parameters
$queryParams = $_GET;

// Add supplied API key to the query parameters
$queryParams['key'] = $apiKey;

// Build the query string for the API
$queryString = http_build_query($queryParams);

// Final API URL with the API key and user-provided parameters
$apiUrl = $apiBaseUrl . '?' . $queryString;

// Initialize a cURL session
$ch = curl_init();

// Set cURL options
curl_setopt($ch, CURLOPT_URL, $apiUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
    "Content-Type: application/json"
));

// Execute the request
$response = curl_exec($ch);

// Check for errors
if ($response === false) {
    $error = curl_error($ch);
    http_response_code(500);
    echo json_encode(array("error" => "Request failed: $error"));
    curl_close($ch);
    exit;
}

// Close the cURL session
curl_close($ch);

// Return the response from the API
echo $response;

Frontend (Javascript)

const response = await fetch(`/api.viewbits.php?dataset=jester&mode=random`);
const data = await response.json();

Now you can make JavaScript calls to ViewBits without revealing your API key on the front end!

Related Posts