Advanced client integration

Advanced Client Integration helps you to get the Hash Score and Risk Response (HUMAN Cookie), in real time, by a subscription to a special event on the JavaScript Client. 

Advanced Client Integration requires special configuration. Contact HUMAN Customer Support to enable it. 

The Risk Cookie must be enabled on the relevant policy to get access to Risk Response or Hashed Score on the client side.

Risk Response (HUMAN Cookie)

To access the Risk Response on the client side, integrate with the HUMAN Client Side SDK with the following initialization code:

1
window.<app_id>_asyncInit = function (px) {
2
    px.Events.on('risk', function (risk, name) {
3
        // name - reported cookie name (ex: _px)
4
        console.log('DATA', risk);
5
    });
6
};

The value of the Risk Response is also reported on the Risk Cookie (_human)

The initialization code should be located before the HUMAN JS Snippet on your site pages. The event is triggered for each Risk Cookie update. For ‘score’, an event based on your custom configuration hashed score or binary score is be reported.

Hashed Score / Block Decision

In order to gain access to the Hashed Score or Block Decision on the client side, integrate with the HUMAN client side SDK with the following initialization code. Block decision is based on the policy defined score.

1
window.<app_id>_asyncInit = function (px) {
2
    px.Events.on('score', function (score, kind) {
3
        // kind - "hashed" for “Hashed Score” or "binary" for “Block Decision”
4
        console.log('SCORE', score);
5
    });
6
};

Contact HUMAN Support to access your Hashed Score mapping

Custom Cookie Header

In some cases the client network library may strip the Cookie header in the event of cross-domain calls (For example React).
In these cases we add a custom header to every outgoing network call, containing the HUMAN cookie.

Server Integration

When setting the Custom Cookie header, the Custom header name that contains the HUMAN Cookie must be specified. The cookie is extracted from the Custom Cookie header rather than the default HUMAN Cookie header.
Fastly - https://console.humansecurity.com/docs/fastly_enforcer.html#enable-cookie-from-header

Cloudflare - https://portal.document360.io/v1/docs/cloudflare-config#custom-cookie-header

NGINX - https://github.com/PerimeterX/perimeterx-nginx-plugin#custom-cookie-header

Client Integration

Whenever you do this on the server, the client needs to send the cookies on the specified header name. To send the cookies on the specified header:

1. Save the cookie content every time it refreshes (for example, in local storage or as a global variable).
   To get the cookie, add the following event listener (make sure you replace <app_id> with your app ID):

1
window.<app_id>_asyncInit = function (px) {
2
    px.Events.on('risk', function (risk, name) {
3
    // save the cookie name and content. for example - localStorage
4
localStorage.setItem("pxcookie",`${name}=${risk}`)
5
});

2. Intercept the outgoing requests and append the new header containing the Cookie value from step 1. This example assumes you are using axios for all outgoing requests, for any other library your front-end implementation is using - make sure requests include the information saved in local storage as mentioned above.

1
axios.interceptors.request.use(async (config) => {
2
    const cookie = localStorage.getItem("pxcookie");
3
    if (cookie) {
4
        config.headers["x-px-cookie"] = cookie;
5
    }
6
    return config
7
}, function (error) {
8
    throw error;
9
});

The name of the header (“x-human-cookie”) should be the same as the name of the header set in the Server Integration section.