SDK Documentation Help

Deployment Guide

Advice on deploying an app that uses STRICH SDK to a hosting service.

Serving From a Secure Origin

STRICH accesses the smartphone camera using the web browser's getUserMedia API. This API can only be used in secure contexts, meaning your app needs to be served from an HTTPS, file:/// or localhost URL.

Many developers of mobile web apps use tools like ngrok to expose a publicly accessible HTTPS endpoint with automatically generated TLS certificate.

For local development, web frameworks such as Angular usually include a built-in web server, which will default to serving the app on localhost using HTTP, not HTTPS. There are usually options that can be supplied to control the interface the server binds and TLS support. Some examples for popular frameworks are included below.

Angular

ng serve --host 0.0.0.0 --ssl

Parcel

parcel src/index.html --https

React

HTTPS=true npm start

Vue

Add https: true field to the vue.config.js file.

Firewall Configuration

For Basic and Professional licenses, an online license check is performed via an HTTPS request. If you are running in a restricted environment, make sure that HTTPS connections to hosts *.strich.io are allowed, otherwise the SDK can not be initialized.

Content Security Policy (CSP)

When apps are being served with a Content Security Policy, a few entries are needed for STRICH license checking to work.

Directive

Values

Description

connect-src

*.strich.io, data:

Required for license verification and analytics, as well as loading embedded Web Assembly from data URLs.

script-src

wasm-unsafe-eval, unsafe-eval

Required for Web Assembly execution. Older browsers may not yet support wasm-unsafe-eval, and therefore require unsafe-eval.

img-src

data:

Required for STRICH to load embedded image assets such as icons.

media-src

data:

Required for STRICH to load embedded sound assets such as the beep sound played in audio feedback.

User-Agent Client Hints (optional)

Recent versions of Chrome (starting mid-2023) and browsers based on Chrome (i.e. Edge) include a privacy feature called User-Agent reduction which limits the amount of data a browser sends as part of its requests, especially the User-Agent HTTP header. Instead of the device model, e.g. SM-G991 for a Samsung Galaxy S21, Chrome will now just send the value K, hiding the actual device model.

Websites have the ability to ask the browser for additional information, so-called Client hints. This is commonly done by including an Accept-CH header in the response serving the website. Alternatively, and often easier to achieve for application developers, Client Hints can also be requested by including Accept-CH in a meta tag of the application's HTML code:

<meta http-equiv="Accept-CH" content="Sec-CH-UA, Sec-CH-UA-Model, Sec-CH-UA-Mobile, Sec-CH-UA-Form-Factor, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version">

To pass the Client Hints to STRICH for more detailed statistics, you need to delegate them. STRICH infrastructure is a third-party origin ― the first party being the origin that serves the app (you).

To delegate the Client Hints to STRICH, also add the following snippet to the HEAD section of your HTML code:

<meta http-equiv="Accept-CH" content="Sec-CH-UA, Sec-CH-UA-Model, Sec-CH-UA-Mobile, Sec-CH-UA-Form-Factor, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version"> <meta http-equiv="Delegate-CH" content="Sec-CH-UA https://license.strich.io; Sec-CH-UA-Model https://license.strich.io; Sec-CH-UA-Mobile https://license.strich.io; Sec-CH-UA-Form-Factor https://license.strich.io; Sec-CH-UA-Platform https://license.strich.io; Sec-CH-UA-Platform-Version https://license.strich.io">

After you put both mechanisms in place (requesting Client Hints, and delegating them to STRICH), you should start seeing detailed device models in the usage stats.

Optimizing Online License Check (optional)

The SDK performs a check of the license key by contacting the license service. You can provide a hint to the web browser that will cause it to preemptively perform the DNS lookup for the license service, making the check run faster in some cases.

To enable DNS-prefetching, add the following snippet to the HEAD section of your HTML code:

<link rel="dns-prefetch" href="https://license.strich.io" />
Last modified: 14 February 2024