Step-by-Step Setup

Step 1: Create External Application

Why do you need to create an External Application?

The External Application serves as your authentication mechanism for secure communication between your website and Firstoken Monitor. When CSP violations occur on your payment pages, your server needs to authenticate these reports using a signed JWT token before sending them to our monitoring endpoints. This ensures that:

  • Only legitimate reports from your domain are processed

  • Malicious actors cannot flood your monitoring with fake violations

  • Each report is cryptographically signed and verifiable

  • Your monitoring data remains secure and tamper-proof

The Signing key type generates the secret key you'll use to create JWT tokens that authenticate each CSP violation report.

Setup Instructions:

  1. Access your Firstoken console and navigate to External Applications

  2. Click "+ New External Application"

  3. Fill in the basic information:

    • Name: Monitor my checkout page (or your preferred name)

    • Description: Application for payment page monitoring

    • Key Type: Select "Signing"

  4. In Permissions, make sure to select:

    • Monitor a Page

  5. Configure IP Whitelist:

    • Add IPs from where requests will be made

    • For development, you can temporarily use 0.0.0.0/0

  6. Save the configuration

Important: Securely save your Secret Key - you'll need it to generate JWT tokens.

Step 2: Create Page Monitor

  1. Go to Monitor > Pages in the console

  2. Click "+ New Page Monitor"

  3. Configure the page information:

    • Name: Monitor my Checkout Page

    • Description: Description of your payment page

    • Base URL: https://your-site.com/checkout (your payment page)

    • URL patterns: /* (to monitor all sub-routes)

  4. Connect your External Application:

    • In the "External Application" section

    • Select the application you created in Step 1

  5. Configure notifications:

    • Add email addresses that will receive alerts

    • The account owner's email is automatically included

  6. Save the configuration

After creating the monitor, you'll receive a unique URL like:

https://monitor.firstoken.co/v1/pages/8BD7A644AC

Step 3: Implement CSP on your server

Now you need to configure your Content Security Policy (CSP) to send reports to Firstoken Monitor when security violations are detected.

Basic example with Express.js:

const express = require('express');
const jwt = require('jsonwebtoken');

const app = express();
const SECRET_KEY = 'your-firstoken-secret-key'; // From Step 1
const MONITOR_URL = 'https://monitor.firstoken.co/v1/pages/8BD7A644AC'; // From Step 2

// Function to generate JWT token
function generateToken() {
    return jwt.sign(
        { jwtPayload: {} }, 
        SECRET_KEY, 
        { expiresIn: '5d' }
    );
}

// CSP middleware for payment pages
app.use('/checkout', (req, res, next) => {
    const token = generateToken();
    
    res.setHeader('Content-Security-Policy', 
        `default-src 'self'; ` +
        `script-src 'self' https://captures.firstoken.co https://api.firstoken.co; ` +
        `style-src 'self' https://fonts.googleapis.com; ` +
        `img-src 'self' data: https://fonts.googleapis.com; ` +
        `connect-src 'self' https://api.firstoken.co; ` +
        `font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com; ` +
        `object-src 'none'; ` +
        `base-uri 'self'; ` +
        `form-action 'self'; ` +
        `frame-ancestors 'self'; ` +
        `frame-src https://captures.firstoken.co; ` +
        `child-src 'self'; ` +
        `worker-src 'none'; ` +
        `report-uri ${MONITOR_URL}?t=${token}`
    );
    
    next();
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

Even simpler example (no dependencies):

const jwt = require('jsonwebtoken');

const SECRET_KEY = 'your-firstoken-secret-key';
const MONITOR_URL = 'https://monitor.firstoken.co/v1/pages/8BD7A644AC';

function generateToken() {
    return jwt.sign({ jwtPayload: {} }, SECRET_KEY, { expiresIn: '5d' });
}

function addCSPHeader(req, res, next) {
    const token = generateToken();
    
    res.setHeader('Content-Security-Policy', 
        `default-src 'self'; script-src 'self'; style-src 'self'; ` +
        `img-src 'self'; font-src 'self'; connect-src 'self'; ` +
        `frame-ancestors 'self'; frame-src 'self'; child-src 'self'; ` +
        `worker-src 'none'; report-uri ${MONITOR_URL}?t=${token}`
    );
    
    next();
}

// Use on your payment routes
app.use('/checkout', addCSPHeader);
app.use('/payment', addCSPHeader);

CSP Configuration for different scenarios

For sites with external JavaScript:

function generateCSPForPaymentProviders() {
    const token = generateToken();
    
    return `default-src 'self'; ` +
           `script-src 'self' https://captures.firstoken.co https://api.firstoken.co https://www.googletagmanager.com; ` +
           `connect-src 'self' https://api.firstoken.co https://www.google-analytics.com; ` +
           `frame-src https://captures.firstoken.co https://api.firstoken.co/proxy; ` +
           `style-src 'self' https://fonts.googleapis.com; ` +
           `font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com; ` +
           `img-src 'self' data: https://www.google-analytics.com; ` +
           `report-uri https://monitor.firstoken.co/v1/pages/8BD7A644AC?t=${token}`;
}

For sites with CDN:

function generateCSPForCDN() {
    const token = generateToken();
    
    return `default-src 'self'; ` +
           `script-src 'self' https://cdn.firstoken.co https://captures.firstoken.co; ` +
           `style-src 'self' https://cdn.firstoken.co https://fonts.googleapis.com; ` +
           `font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com; ` +
           `img-src 'self' data: https://cdn.firstoken.co; ` +
           `frame-src https://captures.firstoken.co; ` +
           `frame-ancestors 'self' https://captures.firstoken.co; ` +
           `report-uri https://monitor.firstoken.co/v1/pages/8BD7A644AC?t=${token}`;
}

Step 4: Verification and Testing

1. Verify your CSP is active:

Open your browser's developer tools and go to the Network tab. Look for response headers and confirm that Content-Security-Policy is present.

2. Test report generation:

Try loading an unauthorized script on your page to generate a CSP violation and verify that the report is sent to Firstoken Monitor.

3. Check notifications:

Verify that alerts reach the configured destinations:

  • Email notifications: Alerts sent to configured email addresses

  • Webhook notifications: If you've configured a webhook in the Firstoken console, violations will also be sent via HTTP POST to your specified URL

4. Monitor the dashboard:

Log into your Firstoken console to view real-time violation reports and detailed incident analysis.

PreviousFirstoken Monitor ImplementationNextHow it works in practice

Last updated

Was this helpful?