Front-end Integration

one of forter's key features is our ability to track user real time behavior on your site and use it in our decision model to separate fraudsters from legitimate buyers in order to apply this technology, we require an integration with your front end website and mobile applications web integration (javascript) add forter's javascript snippet to every page of your website so that it can load and asynchronously collect important behavioral data from your customer including mouse movements, clicks, pageviews, etc the script will generate a unique token for each user on your site that should be included in the order api request to install the javascript snippet, follow the front end integration /#web integration steps below mobile app integration (sdks) to set up the forter client side code for mobile applications, please refer to the mobile sdk documentation https //docs forter com/mobile sdks for further integration instructions web integration steps add the forter javascript snippet copy your custom forter javascript snippet https //portal forter com/app/integration/js snippets from integration center in forter portal and add it to every web page on your site before the closing \</body> html tag do not place this snippet inside a tag manager of any kind and instead place it directly on the page tag managers are often blocked by privacy browser extensions and by fraudsters our snippet has the ability to detect and workaround innocent or malicious blocking of our script we realize a tag manager is convenient, but we believe the security benefit is worth the extra effort of installing this snippet outside of a tag manager ensure you use the snippet corresponding to the environment you're working with, as a different snippet is provided for your sandbox and your production site set up token trigger integration (tti) the token trigger integration (tti) allows the js integration to work without having to rely on the ability to write a cookie tti will allow you to retrieve the fortertoken value generated from the forter javascript snippet to include in your forter api request to implement, add an event listener prior to the custom forter javascript snippet your js code should register a js event called ftr\ tokenready with the forter token in the event detail document addeventlistener('ftr\ tokenready', function(evt) { var token = evt detail; // retrieve the token to be sent to your back end }); important details the tti event listener code should be included on the page before the forter javascript snippet, in order not to miss events make sure to update the token every time this event is triggered for example, if you update a js data model in js memory, it's important to keep updating the token every time the ftr\ tokenready event is triggered, in order to have the latest token value when you next make an api call to forter in the event the token trigger event was unsuccessful, we recommend having a fallback that sends the fortertoken value in the cookie section of your network request headers update csp headers if your site uses content security policy, set the csp boolean value inside the merchantconfig variable in the forter script to true in order to avoid csp reports var merchantconfig = { csp true, }; if your site's content security policy restricts inline js tags, add the csp rules provided in integration center https //portal forter com/app/integration/js snippets to your csp header in order whitelist the forter script note the worker src rule is not required, but is highly recommended, as it allows the script to enhance its performance by offloading some of its work off the main thread to a webworker https //developer mozilla org/en us/docs/web/api/web workers api in case inline scripts are prohibited by your site's csp, use the csp hash provided in integration center https //portal forter com/app/integration/js snippets within forter portal to whitelist them (for more information on csp hashes, see mozilla docs https //developer mozilla org/en us/docs/web/http/headers/content security policy/script src ) ensure you use the csp hash corresponding to the environment you're working with, as a different hash is provided for your sandbox and your production site performance and site impact assurance how we ensure that we are not influencing your site our script is loaded before the closing \</body> tag in an asynchronous way, and only after the page finishes rendering, without delaying the onload event we have tested our script with selenium on dozens of devices and browsers we make sure our javascript does not conflict with any 3rd party libraries (loading everything in the script scope) we add your site to our external monitoring system and measure it regularly