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
Parcel
React
Vue
License Key Management
Even though it is impossible to fully secure a client-side license key, we recommend the following best practices:
If your app requires authentication, expose the license key only on authenticated routes.
If your app has a dynamic configuration mechanism, store your license key there instead of hard-coding it in your app. This will make it easier to exchange your license key if it expires (offline keys) or in case it's compromised.
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:
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:
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: