Démarrage

Ce guide vous explique comment ajouter Noxtica à votre application web en quelques minutes.

Prérequis

• Un compte Noxtica (demandez l’accès via contact)
• Votre clé de site (fournie après la création du compte)

Intégration rapide

Une fois votre compte configuré et votre clé de site en main, ajoutez notre collecteur à votre HTML — c’est toute l’installation.

Collecte automatique (recommandée)

La façon la plus simple de démarrer est de laisser Noxtica s’exécuter de lui-même, en utilisant le mode run-once :

<script
	src="https://collect.noxtica.com/collector/noxtica.js"
	data-site-key="pk_prod_your_site_key_here"
	data-auto-init
	data-auto-check-once
	async
></script>

Cela va :

• Évaluer un visiteur lors de sa première visite
• Réutiliser ce résultat pour les visites suivantes dans la fenêtre de cache (par défaut : 7 jours)
• Enregistrer silencieusement les visites de retour sans refaire l’évaluation complète
• Coordonner entre les onglets ouverts pour qu’un visiteur ne soit évalué qu’une seule fois

Les résultats sont disponibles via :

// Listen for results
document.addEventListener('noxtica:collected', function (e) {
	console.log('Fingerprint collected:', e.detail);
	console.log('Risk score:', e.detail.score);
	console.log('Risk level:', e.detail.risk_level);
});

// Or access directly after collection
console.log(window.noxticaResult);

Collecte manuelle

Pour plus de contrôle, utilisez l’API JavaScript :

<script src="https://collect.noxtica.com/collector/noxtica.js"></script>
<script>
	// Create a client with your Site Key
	const client = NoxticaCollector.createClient({
		siteKey: 'pk_prod_your_site_key_here',
	});

	// Collect and submit in one call
	client.collectAndSubmit().then((result) => {
		console.log('Risk score:', result.score);
		console.log('Risk level:', result.risk_level);
		console.log('Flags:', result.flags);
	});
</script>

Collecte intelligente avec checkOnce()

Pour l’empreinte la plus légère, utilisez checkOnce() — cela respecte l’intervalle de collecte que vous configurez côté serveur, afin que les visiteurs ne soient pas réévalués plus souvent que nécessaire :

const client = NoxticaCollector.createClient({
	siteKey: 'pk_prod_your_site_key_here',
});

// Only collects if outside the check interval window (default: 7 days)
// Otherwise records a visit and returns cached result
const result = await client.checkOnce();

if (result.fromCache) {
	console.log('Using cached result, next collection in:', result.nextSubmitIn, 'days');
} else {
	console.log('Fresh collection submitted');
}
console.log('Risk level:', result.risk_level);

Performance et impact sur votre site

Le collecteur est conçu pour avoir un impact minimal sur le chargement de la page et la latence perçue par l’utilisateur :

Comment nous restons légers :

• Attribut async — le collecteur se charge en arrière-plan et ne retarde jamais l’affichage ou l’interactivité de votre page.
• Mode run-once (data-auto-check-once) — après la première évaluation, les visites suivantes dans la fenêtre de cache n’envoient qu’un petit ping de visite (~150 octets).
• Coordination entre onglets — plusieurs onglets ouverts se regroupent en une seule évaluation.
• Mis en cache après le premier chargement — le KHAN VM résistant à l’altération est mis en cache par le navigateur, donc il se charge instantanément lors des visites ultérieures.
• Traitement en arrière-plan lorsque c’est possible, pour que le travail reste hors du thread principal et que votre page reste réactive.

Si vous remarquez un ralentissement après l’ajout du SDK, capturez un profil avec await client.collectAndSubmit({ telemetry: true }) — le result.telemetry retourné inclut une décomposition temporelle.

Sandbox vs Production

Vous aurez deux clés de site : une pour le développement et la staging, une pour la production. Chacune fonctionne sous ses propres politiques et conserve ses données entièrement séparées.

Changez toujours la clé de site selon l’environnement. N’utilisez jamais une clé pk_sand_* en production — les données sandbox n’apparaîtront pas dans vos tableaux de bord de production et le scoring sera trop permissif. Inversement, utiliser une clé pk_prod_* en développement consomme votre budget de limite de débit de production.

Un schéma courant :

<script>
	// Pick the key by hostname; fall back to sandbox in dev.
	const KEY = location.hostname === 'www.example.com' ? 'pk_prod_REPLACE_ME' : 'pk_sand_REPLACE_ME';
	const s = document.createElement('script');
	s.src = 'https://collect.noxtica.com/collector/noxtica.js';
	s.async = true;
	s.dataset.siteKey = KEY;
	s.dataset.autoInit = '';
	s.dataset.autoCheckOnce = '';
	document.head.appendChild(s);
</script>

Compatibilité avec les gestionnaires de tags

Le collecteur fonctionne dans Google Tag Manager, Adobe Launch, Tealium et Segment, MAIS avec des mises en garde :

Recommandé (préféré) : ajoutez le script directement dans votre HTML, juste avant </body> ou dans <head> avec async. Démarrer aussi tôt que possible donne au collecteur le meilleur avantage, pour qu’il soit prêt au moment où un visiteur interagit.

Gestionnaires de tags — fonctionne, avec des mises en garde :

• ✅ La plupart des gestionnaires de tags modernes (GTM Custom HTML, Adobe Launch Custom Code, Segment Custom Source) chargent le collecteur avec succès.
• ⚠️ Les portes de consentement qui bloquent les scripts jusqu’à l’acceptation d’un visiteur retarderont la première évaluation — généralement rien ne s’exécute avant que la bannière de consentement ne soit fermée. C’est le bon comportement ; sachez simplement que cela peut fausser vos métriques de « temps jusqu’à la décision ».
• ⚠️ Certains gestionnaires de tags plus anciens suppriment les attributs data-* personnalisés. Si data-site-key n’atteint pas la balise script, l’auto-init ne démarrera pas. Configurez-le vous-même dans le code à la place :

  NoxticaCollector.createClient({ siteKey: 'pk_prod_...' }).checkOnce();

• ❌ Quelques conteneurs de tags fortement isolés (rares) empêchent le démarrage de l’environnement d’exécution résistant à l’altération. Le SDK continue de fonctionner avec une collecte plus légère et affiche un avertissement dans la console.

Si vous devez intégrer via un gestionnaire de tags, configurez-le pour déclencher le tag Noxtica sur All Pages — Window Loaded (ou équivalent) plutôt que DOM Ready — cela garantit que l’état du consentement est définitif avant que quoi que ce soit ne s’exécute.

Content Security Policy

Si votre site utilise une content-security-policy, vous devrez autoriser Noxtica à se charger, exécuter son environnement d’exécution résistant à l’altération (le KHAN VM) et communiquer avec notre API. L’exemple ci-dessous couvre les trois :

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'wasm-unsafe-eval' https://collect.noxtica.com;
  connect-src 'self' https://collect.noxtica.com;

Si la politique omet le jeton 'wasm-unsafe-eval', le navigateur bloque l’environnement d’exécution résistant à l’altération et vous verrez un avertissement dans la console. Noxtica continue de fonctionner — il revient à une collecte plus légère — mais avec une protection contre l’altération plus faible. Ajouter le jeton ci-dessus restaure l’expérience complète.

Clés de site

Votre clé de site (pk_...) est un identifiant public qui authentifie les requêtes depuis votre domaine. Chaque domaine que vous ajoutez dans le Backoffice reçoit une clé de site unique.

Points importants :

• Les clés de site sont publiques et peuvent être intégrées en toute sécurité dans votre HTML
• Chaque clé de site est liée à une origine spécifique (par ex. https://example.com)
• L’API rejettera les requêtes dont l’origine ne correspond pas au domaine enregistré pour la clé de site

Options de configuration

const client = NoxticaCollector.createClient({
	// Your Site Key (required)
	siteKey: 'pk_prod_your_site_key_here',

	// API endpoint (defaults to production)
	apiUrl: 'https://collect.noxtica.com',

	// Collection mode: 'max' (default), 'standard', or 'minimal'
	// Omit to use max mode (recommended)
	// mode: 'standard', // Uncomment to opt out of max-only signals
});

Modes de collecte

Format de réponse

Après la collecte et la soumission, vous recevez :

{
	"success": true,
	"fingerprintId": "abc123...",
	"score": 15,
	"risk_level": "minimal",
	"confidence": 0.5,
	"flags": [],
	"details": {
		"summary": "Detected 0 risk indicator(s)."
	}
}

Niveaux de risque

Authentification

Le SDK authentifie chaque visite avec des identifiants à courte durée de vie, renouvelés automatiquement et liés à votre clé de site. Il les demande, les actualise et les attache à chaque soumission pour vous.

Vous n’avez rien à gérer — le SDK s’en charge automatiquement.

Processus d’intégration

1. Demander l’accès : Contactez-nous pour demander une démo ou démarrer
2. Configuration du compte : nous créons votre compte tenant sur la plateforme
3. Ajouter des domaines : connectez-vous au Backoffice, allez dans Domaines et ajoutez vos origines
4. Copier la clé de site : chaque domaine reçoit une clé de site unique
5. Intégrer : ajoutez le script avec votre clé de site à vos pages
6. Surveiller : consultez les empreintes et l’analytique dans le tableau de bord Backoffice

Gérer plusieurs domaines

Noxtica prend en charge plusieurs domaines par compte :

• Production : https://www.yoursite.com
• Staging : https://staging.yoursite.com
• Mobile : https://m.yoursite.com

Chaque domaine a sa propre clé de site. Vous pouvez :

• Activer/désactiver des domaines sans régénérer les clés
• Effectuer une rotation des clés de site si elles sont compromises
• Consulter l’analytique filtrée par domaine

Version du SDK

Version actuelle du SDK : 3.3.0 (Schéma : 2026-05-24)

Nouveautés dans la version 3.3.0

• Signaux comportementaux légers (toujours actifs) — des indices de timing simples, comme la durée d’une session et la rapidité avec laquelle un visiteur interagit pour la première fois. Pas de données biométriques, et aucun consentement de l’utilisateur final requis.
• Biométrie comportementale (opt-in) — lorsque vous l’activez dans Backoffice → Paramètres → Biométrie comportementale, Noxtica observe également le rythme des mouvements de souris, le timing des clics et du défilement. Ces données sont considérées comme des données biométriques selon les réglementations strictes sur la vie privée, donc un consentement explicite de l’utilisateur final est requis. Voir Biométrie comportementale ci-dessous.
• Vérification de cohérence Apple Pay — confirme qu’un appareil se prétendant être un iPhone se comporte réellement comme tel, détectant ainsi une technique d’usurpation courante.
• Correspondance d’empreinte réseau — reconnaît les schémas de connexion caractéristiques des outils d’automatisation courants, afin que le trafic provenant de scripts et de bots se distingue même quand le navigateur semble convaincant.
• Réputation IP — signale les visiteurs arrivant depuis des réseaux à mauvaise réputation, avec la possibilité d’y brancher votre propre flux de renseignements sur les menaces.

Biométrie comportementale (optionnelle, opt-in)

Noxtica peut également étudier le rythme avec lequel quelqu’un déplace la souris, clique et fait défiler. Il s’agit d’une fonctionnalité opt-in, désactivée par défaut.

Pourquoi opt-in ? Ce type de données comportementales est considéré comme des données personnelles sensibles selon les réglementations strictes sur la vie privée, donc les capturer nécessite le consentement explicite de votre utilisateur final. Nous en faisons un opt-in pour que vous gardiez le contrôle sur quand et comment elles sont utilisées.

Pour l’activer :

1. Connectez-vous au Backoffice → Paramètres → Biométrie comportementale
2. Examinez l’avis de conformité avec votre équipe juridique ou vie privée
3. Mettez à jour votre politique de confidentialité et votre bannière de consentement pour divulguer cette collecte
4. Activez la fonctionnalité

Une fois activée, Noxtica intègre automatiquement ces signaux comportementaux dans les évaluations futures, et votre tableau de bord affiche le score comportemental résultant par domaine.

Prochaines étapes

• Essayez la démo en direct pour voir le fingerprinting en action
• Consultez le guide Intégration backend pour les lookups côté serveur
• Accédez au tableau de bord pour explorer les données collectées