Options de Configuration

htmx offre également des options de configuration liées à la sécurité :

htmx.config.selfRequestsOnly : si défini sur true, seules les requêtes vers le même domaine que le document actuel seront autorisées.
htmx.config.allowScriptTags : htmx traitera les balises <script> trouvées dans le nouveau contenu qu’il charge. Si vous souhaitez désactiver ce comportement, vous pouvez définir cette variable de configuration sur false.
htmx.config.historyCacheSize : peut être défini sur 0 pour éviter de stocker tout HTML dans le cache localStorage.
htmx.config.allowEval : peut être défini sur false pour désactiver toutes les fonctionnalités de htmx qui reposent sur eval :
- Filtres d’événements
- Attributs hx-on:
- hx-vals avec le préfixe js:
- hx-headers avec le préfixe js:

Notez que toutes les fonctionnalités supprimées en désactivant eval() peuvent être réimplémentées à l’aide de votre propre JavaScript personnalisé et du modèle d’événements de htmx.

Événements

Si vous souhaitez autoriser des requêtes vers certains domaines au-delà du domaine actuel, mais ne pas laisser les choses complètement ouvertes, vous pouvez utiliser l’événement htmx:validateUrl. Cet événement aura l’URL de la requête disponible dans le slot detail.url, ainsi qu’une propriété sameHost.

Vous pouvez inspecter ces valeurs et, si la requête n’est pas valide, invoquer preventDefault() sur l’événement pour empêcher que la requête ne soit émise.

document.body.addEventListener('htmx:validateUrl', function(evt) {
  // n'autoriser que les requêtes vers le serveur actuel ainsi que myserver.com
  if (!evt.detail.sameHost && evt.detail.url.hostname !== "myserver.com") {
    evt.preventDefault();
  }
});

Options CSP

Les navigateurs fournissent également des outils pour sécuriser davantage votre application web. L’outil le plus puissant disponible est une Content Security Policy (CSP). En utilisant une CSP, vous pouvez dire au navigateur, par exemple, de ne pas émettre de requêtes vers des hôtes non-origines, de ne pas évaluer les balises <script> en ligne, etc.

Voici un exemple de CSP dans une balise meta :

<meta http-equiv="Content-Security-Policy" content="default-src 'self';">

Cela indique au navigateur “Autorisez uniquement les connexions au domaine source original”. Cela serait redondant avec htmx.config.selfRequestsOnly, mais une approche en couches de la sécurité est justifiée et, en fait, idéale lorsqu’il s’agit de sécurité des applications.

Une discussion complète sur les CSP est au-delà de la portée de ce document, mais l’Article MDN fournit un bon point de départ pour explorer ce sujet.

Configuration de htmx

htmx dispose de quelques options de configuration qui peuvent être accessibles soit de manière programmatique, soit de manière déclarative. Elles sont répertoriées ci-dessous :

Variable de Configuration	Information
`htmx.config.historyEnabled`	Par défaut à `true`, vraiment utile uniquement pour les tests
`htmx.config.historyCacheSize`	Par défaut à 10
`htmx.config.refreshOnHistoryMiss`	Par défaut à `false`, si défini à `true`, htmx effectuera un rafraîchissement complet de la page en cas de manquement de l’historique plutôt que d’utiliser une requête AJAX
`htmx.config.defaultSwapStyle`	Par défaut à `innerHTML`
`htmx.config.defaultSwapDelay`	Par défaut à 0
`htmx.config.defaultSettleDelay`	Par défaut à 20
`htmx.config.includeIndicatorStyles`	Par défaut à `true` (détermine si les styles des indicateurs sont chargés)
`htmx.config.indicatorClass`	Par défaut à `htmx-indicator`
`htmx.config.requestClass`	Par défaut à `htmx-request`
`htmx.config.addedClass`	Par défaut à `htmx-added`
`htmx.config.settlingClass`	Par défaut à `htmx-settling`
`htmx.config.swappingClass`	Par défaut à `htmx-swapping`
`htmx.config.allowEval`	Par défaut à `true`, peut être utilisé pour désactiver l’utilisation de `eval` par htmx pour certaines fonctionnalités (par exemple, les filtres de déclenchement)
`htmx.config.allowScriptTags`	Par défaut à `true`, détermine si htmx traitera les balises `<script>` trouvées dans le nouveau contenu
`htmx.config.inlineScriptNonce`	Par défaut à `''`, signifiant qu’aucun nonce ne sera ajouté aux scripts en ligne
`htmx.config.attributesToSettle`	Par défaut à `["class", "style", "width", "height"]`, les attributs à stabiliser lors de la phase de stabilisation
`htmx.config.inlineStyleNonce`	Par défaut à `''`, signifiant qu’aucun nonce ne sera ajouté aux styles en ligne
`htmx.config.useTemplateFragments`	Par défaut à `false`, balises de modèle HTML pour l’analyse de contenu depuis le

serveur (non compatible avec IE11 !) | | htmx.config.wsReconnectDelay | Par défaut à full-jitter | | htmx.config.wsBinaryType | Par défaut à blob, le type de données binaires reçu via la connexion WebSocket | | htmx.config.disableSelector | Par défaut à [hx-disable], [data-hx-disable], htmx ne traitera pas les éléments ayant cet attribut ou un parent avec cet attribut | | htmx.config.withCredentials | Par défaut à false, permet les requêtes Access-Control inter-sites en utilisant des informations d’identification telles que des cookies, des en-têtes d’autorisation ou des certificats clients TLS | | htmx.config.timeout | Par défaut à 0, le nombre de millisecondes qu’une requête peut prendre avant d’être automatiquement interrompue | | htmx.config.scrollBehavior | Par défaut à smooth, le comportement d’un lien boosté lors des transitions de page. Les valeurs autorisées sont auto et smooth. Smooth fera un défilement doux jusqu’en haut de la page, tandis que auto se comportera comme un lien standard. | | htmx.config.defaultFocusScroll | Si l’élément focalisé doit être défilé dans la vue, par défaut à false et peut être remplacé par le modificateur de swap focus-scroll. | | htmx.config.getCacheBusterParam | Par défaut à false, si défini à true, htmx ajoutera un paramètre de destruction de cache à la requête GET sous la forme org.htmx.cache-buster=targetElementId. | | htmx.config.globalViewTransitions | Si défini à true, htmx utilisera l’API de transition de vue lors du swap de nouveau contenu. | | htmx.config.methodsThatUseUrlParams | Par défaut à ["get"], htmx formatera les requêtes avec ces méthodes en encodant leurs paramètres dans l’URL, pas dans le corps de la requête | | htmx.config.selfRequestsOnly | Par défaut à true, si seulement les requêtes AJAX au même domaine que le document actuel sont autorisées | | htmx.config.ignoreTitle | Par défaut à false, si défini à true, htmx ne mettra pas à jour le titre du document lorsqu’une balise <title> est trouvée dans le nouveau contenu | | htmx.config.disableInheritance | Désactive l’héritage des attributs dans htmx, ce qui peut ensuite être contourné par l’attribut hx-inherit. | | htmx.config.scrollIntoViewOnBoost | Par défaut à true, si la cible d’un élément boosté doit être défilée dans la vue. Si hx-target est omis sur un élément boosté, la cible par défaut est body, ce qui fait défiler la page vers le haut. | | htmx.config.triggerSpecsCache | Par défaut à null, le cache pour stocker les spécifications de déclenchement évaluées, améliorant les performances d’analyse au coût d’une utilisation de mémoire accrue. Vous pouvez définir un objet simple pour utiliser un cache jamais purgé, ou implémenter votre propre système en utilisant un objet proxy. | | htmx.config.allowNestedOobSwaps | Par défaut à true, si les swaps OOB sur les éléments imbriqués dans l’élément de réponse principal doivent être traités. Voir Nested OOB Swaps. |

Vous pouvez les définir directement en JavaScript, ou vous pouvez utiliser une balise meta :

<meta name="htmx-config" content='{"defaultSwapStyle":"outerHTML"}'>