Upgrading to Version 6

Benefits

Installable NPM Package

Prior to version 6, the enforcer was provided as a pre-bundled worker rather than an installable library, which meant it was difficult to distinguish between the enforcer (HUMAN code) and the Cloudflare worker (your code). These were separated within the bundle provided, but differentiating between these components was not always intuitive. This made customizations and updates complicated and cumbersome.

Version 6 of the HUMAN Cloudflare Enforcer provides the enforcer as an installable NPM library rather than a pre-bundled worker. This allows for a cleaner separation between HUMAN code and your Cloudflare worker code, more flexibility in how you write and deploy your Cloudflare worker, and easier upgrades going forward. For information on how to install and use the NPM package, see the installation instructions here.

TypeScript Support

For those who prefer TypeScript, version 6 of the HUMAN Cloudflare Enforcer also provides TypeScript definition files for the Cloudflare library. Adding TypeScript support reduces the likelihood of errors when configuring and integrating the enforcer into your Cloudflare worker.

Upgrade Process

Updating the Configuration

If you’re upgrading from version 4.x or 5.x of the Cloudflare worker, many of the configuration fields have remained the same.

The following configuration fields have been modified:

• px_identifier_header_name has been renamed px_client_uuid_header_name.
• px_additional_activity_handler has been changed. The function signature has been modified from (pxCtx, config) => Promise<void> to (config, context, request) => Promise<void>.
• px_enrich_custom_parameters has been changed. The function signature has been modified from (pxCtx, request) => Promise<CustomParameters> to (config, request) => Promise<CustomParameters>.
• px_cors_custom_preflight_handler has been changed. The function signature has been modified from (request) => Promise<Response> to (request) => Promise<{ body: string, headers: Record<string, string[]>, status: number }>.
• px_custom_cors_block_response_headers has been renamed to px_cors_create_custom_block_response_headers. The function signature has also been modified from (request) => Promise<Record<string, string>> to (request) => Promise<Record<string, string[]>>.

The following configuration fields have been removed:

• px_send_async_activities_enabled
• px_first_party_xhr_enabled
• px_deferred_activities
• px_snippet_provider_enabled
• px_snippet_provider_cache_ttl_seconds
• px_csp_enabled
• px_csp_no_updates_max_interval_minutes
• px_bot_enforcer
• px_code_enforcer
• px_login_credentials_http_body_size_limit
• px_filter_by_header
• px_custom_verification_handler
• px_pre_enforce_handler

Updating the Cloudflare Worker Integration

In prior versions of the Cloudflare Enforcer, a default main function was provided that called three separate functions in the px module. See the code sample below for the v5.x integration main function.

1
const customConfig = {
2
    "px_app_id": "APP_ID",
3
    "px_cookie_secret": "COOKIE_SECRET",
4
    "px_auth_token": "AUTH_TOKEN"
5
};
6
7
const customFunctions = (function() {
8
    return {
9
        //px_additional_activity_handler: (pxCtx, config) => { },
10
        //px_custom_verification_handler: (pxCtx, request) => { },
11
        //px_enrich_custom_parameters: async (pxCtx, request) => { },
12
        //px_pre_enforce_handler: (pxCtx, request) => { },
13
        //px_custom_cors_block_response_headers: (request) => { },
14
        //px_cors_custom_preflight_handler: (request) => { },
15
        //px_custom_is_sensitive_request: async (request) => { }
16
    };
17
})();
18
19
// service worker syntax
20
(function() {
21
    async function handleFetchEvent(event) {
22
        // Initialize PX module by setting the configuration
23
        px.setConfig(customConfig, customFunctions);
24
25
        // Call to HUMAN to receive request or response
26
        let { request, response } = await px.middleware(event.request, event);
27
28
        // PX first party or block response
29
        if (response) {
30
            return response;
31
        }
32
33
        // Sending the request returned from px.middleware (not original req) since
34
        // it includes additional headers that the origin server may require
35
        response = await fetch(request);
36
37
        // Send reporting activities to HUMAN asynchronously,
38
        // only awaits if code defender functionality enabled
39
        response = await px.postFetch(request, response, event);
40
        return response;
41
    }
42
43
    addEventListener('fetch', event => {
44
        event.respondWith(handleFetchEvent(event));
45
    });
46
})();

Notice the three px functions that are invoked:

• setConfig() to set the HUMAN enforcer configuration,
• middleware() to invoke the HUMAN enforcement logic, and
• postFetch() to perform any response-based logic.

In principle, the integration for version 6 remains the same, only with the functions provided by the HumanSecurityEnforcer class:

• initialize() to set the HUMAN enforcer configuration and initialize the enforcer
• enforce() to invoke the HUMAN enforcement logic, and
• postEnforce() perform any response-based logic.

Note that the parameters and return values for these functions have changed from previous versions. They differ slightly between Service Worker and ES Modules syntaxes as well.

See the code samples and explanatory comments below.

Service Worker Syntax

1
import { HumanSecurityEnforcer } from '@humansecurity/cloudflare-enforcer';
2
3
// define an enforcer configuration however you see fit
4
const config = {
5
    px_app_id: '<APP_ID>',
6
    px_auth_token: '<AUTH_TOKEN>',
7
    px_cookie_secret: '<COOKIE_SECRET>',
8
    // ...
9
};
10
11
async function handleEvent(event) {
12
    // provide the enforcer configuration as an argument and await the returned Promise
13
    // to receive an instance of the HumanSecurityEnforcer
14
    const enforcer = await HumanSecurityEnforcer.initialize(config);
15
16
    // call enforce
17
    const retVal = await enforcer.enforce(event);
18
19
    // if enforce returned a response, return that response
20
    if (retVal instanceof Response) {
21
        return retVal;
22
    }
23
24
    // retrieve the resource from the cache or origin server
25
    // make sure to use the value returned from enforce
26
    const response = await fetch(retVal);
27
28
    // call postEnforce and return the resulting response
29
    return await enforcer.postEnforce(event, response);
30
}
31
32
addEventListener('fetch', (event) => {
33
    event.respondWith(handleEvent(event));
34
});

ES Modules Syntax

1
import { HumanSecurityEnforcer } from "@humansecurity/cloudflare-enforcer";
2
3
const config = {
4
    px_app_id: '<APP_ID>',
5
    px_auth_token: '<AUTH_TOKEN>',
6
    px_cookie_secret: '<COOKIE_SECRET>',
7
    // ...
8
};
9
10
export default {
11
    async fetch(request, env, ctx) {
12
        // create a new enforcer
13
        const enforcer = await HumanSecurityEnforcer.initialize(config, env);
14
15
        // call enforce
16
        const retVal = await enforcer.enforce(ctx, request);
17
18
        // if enforce returned a response, return that response
19
        if (retVal instanceof Response) {
20
            return retVal;
21
        }
22
23
        // retrieve the resource from the cache or origin server
24
        // make sure to use the value returned from enforce
25
        const response = await fetch(retVal);
26
27
        // call postEnforce and return the resulting response
28
        return await enforcer.postEnforce(ctx, response);
29
    },
30
};

Remote configuration

Version 6 now includes remote configuration for the Enforcer. Remote configuration is a feature that lets you access and modify your Enforcer’s configuration remotely without redeploying your Cloudflare Worker. This also allows the HUMAN team to troubleshoot or customize your Enforcer directly. Remote configuration is required as part of your Enforcer setup.