AppNavi Data-URI Free CSP & Embedding Strategy

📖 Overview: What is a Data-URI and Why Remove It?

Normally, when a website needs an icon, a flag, or a custom font, it downloads a separate file. However, using Data-URIs (Base64), these images and fonts are converted into a long string of text and placed directly inside the CSS code.

While this is great for loading speeds, extremely strict Content Security Policies (CSP) often block Data-URIs (using the data: rule) to prevent malicious code injection.

To support the strictest security environments, AppNavi now offers a "Data-URI Free" option using our new Embedding Strategy toggle!

🎛️ How the "Embedding Strategy" Toggle Works

We have added a simple configuration switch in the AppNavi Portal at the Application level. This toggle controls exactly how AppNavi loads its visual assets.

1. Embedding Strategy ON (Standard Base64 Mode)

• What it does: The AppNavi loader fetches the standard an-core-dark.css file.
• How assets load: All fonts, images, and flags are loaded directly from inside the CSS using Base64 text (Data-URIs). This is the default behavior.

2. Embedding Strategy OFF (Data-URI Free / CDN Mode)

• What it does: The AppNavi loader dynamically detects your environment and loads an environment-specific CSS file (e.g., an-core-dark-embedded-dev.css for development, or an-core-dark-embedded-prod.css for production).
• How assets load: Instead of using Base64 text, this CSS file uses standard URL references. All fonts and images are downloaded safely from the AppNavi CDN (e.g., data-dev.inappnavi.com or cdn-dev.inappnavi.com).

🛡️ The "Data-URI Free" Strict CSP Template

If you turn the Embedding Strategy OFF, you no longer need to allow the data: directive for your fonts and images in your Content Security Policy!

Here is what your updated, Data-URI Free CSP should look like. Notice that data: has been completely removed from the img-src and font-src rules:

Content-Security-Policy:
  default-src 'none'; 
  script-src 'nonce-{{YOUR_NONCE}}' 'unsafe-eval' data-dev.inappnavi.com 127.0.0.1:1337; 
  style-src 'nonce-{{YOUR_NONCE}}' data-dev.inappnavi.com; 
  object-src 'none'; 
  base-uri 'none'; 
  connect-src api-dev-eu-central-1.inappnavi.com data-dev.inappnavi.com unpkg.com localhost:1338; 
  font-src fonts.gstatic.com data-dev.inappnavi.com;  /* 'data:' has been removed! */
  img-src data-dev.inappnavi.com localhost:1338 upload.wikimedia.org cdn-icons-png.flaticon.com; /* 'data:' has been removed! */
  frame-src [www.youtube.com](https://www.youtube.com) localhost:1338 youtu.be www.wikipedia.org;

💻 Technical Summary for Developers

Under the hood, our CI/CD pipeline automatically generates two distinct CSS distributions during the build process:

1. Base64 Included: Standard CSS containing embedded Data-URIs.
2. CDN Referenced: CSS containing only secure URL references pointing to our AppNavi CDN.

When an-loader.js runs on the client's application, it checks the Portal configuration. If the Embedding Strategy is disabled (OFF), it automatically intercepts the default styling and fetches the CDN-referenced CSS file instead, ensuring total compliance with your strict CSP.