Notes

This document addresses some technical considerations or information when using htswap.

CSP Compliance

htswap, similar to some other content swapping libraries, dynamically re-executes inline scripts after swapping content. This conflicts with strict Content Security Policies, which are designed to prevent exactly this kind of dynamic script execution.

You have two options to get around that:

Option 1: Avoid Inline Scripts (Safest)

Move all JavaScript to external .js files and replace inline event handlers (onclick, etc.) with event delegation. This requires no CSP configuration and works with strictest policies.

Option 2: Use Strict CSP with strict-dynamic

Implement a nonce-based policy:

Content-Security-Policy: 
  script-src 'nonce-{RANDOM}' 'strict-dynamic' 'unsafe-inline' https:;
  object-src 'none';
  base-uri 'none';

Also add nonce="{RANDOM}" to your initial <script src="htswap.js"> tag. strict-dynamic allows htswap to create new script elements dynamically and have them be trusted.

Note that this requires CSP Level 3 (Chrome 52+, Firefox 52+, Safari 15.4+).

Browser Compatibility

Loader Styling