[jira] [Updated] (KNOX-3508) Knox UIs load Material Icons/Roboto fonts from the internet (fonts.googleapis.com/gstatic.com), breaking icons in air-gapped environments

["Sandor Molnar (Jira)" <ji...@apache.org>]

     [ https://issues.apache.org/jira/browse/KNOX-3508?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Sandor Molnar updated KNOX-3508:
--------------------------------
    Status: Patch Available  (was: In Progress)

> Knox UIs load Material Icons/Roboto fonts from the internet (fonts.googleapis.com/gstatic.com), breaking icons in air-gapped environments
> -----------------------------------------------------------------------------------------------------------------------------------------
>
>                 Key: KNOX-3508
>                 URL: https://issues.apache.org/jira/browse/KNOX-3508
>             Project: Apache Knox
>          Issue Type: Bug
>          Components: AdminUI, Homepage, TokenGenerationUI, TokenManagementUI
>    Affects Versions: 3.0.0
>            Reporter: Sandor Molnar
>            Assignee: Sandor Molnar
>            Priority: Major
>             Fix For: 3.1.0
>
>          Time Spent: 10m
>  Remaining Estimate: 0h
>
> In air-gapped networks (and any environment that blocks outbound internet), the Knox Angular UIs render Material Icons as literal ligature text — e.g. the gear/settings and pin icons appear as the words settings / push_pin, visible on mouse-over in a small space — instead of as glyphs.
> Browser network analysis shows the UI attempting to download the icon font from the internet:
> [https://fonts.gstatic.com/s/materialicons/v145/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2]
> Root cause: The Angular 21 Admin UI upgrade (KNOX-3234) and the other Angular UIs reintroduced external font <link> tags into index.html:
>  - [https://fonts.googleapis.com/icon?family=Material+Icons] (admin-ui, home, token-generation, token-management)
>  - [https://fonts.googleapis.com/css2?family=Roboto:]... + preconnect to gstatic (admin-ui only)
> This regresses KNOX-1731 ("Gateway Admin UI should not include external js/css"), which had removed all external CSS/JS so the UI worked offline. Earlier Knox versions packaged these icons locally.
> There are two failures:
>  # Runtime — the browser cannot reach Google Fonts, so icon ligatures display as text.
>  # Build-time — the Angular production build (Beasties critical-CSS inlining) fetches the fonts from Google at build time and inlines them into the built HTML/CSS, so the build itself requires internet access. The built admin-ui/index.html currently embeds the exact gstatic woff2 URL above plus 27 Roboto glyph-range URLs.
> *Affected modules:* gateway-admin-ui, knox-homepage-ui, knox-token-generation-ui, knox-token-management-ui. knox-webshell-ui is unaffected (no icons/fonts).
> *Fix:* Bundle every icon used by the UIs locally as inline SVGs sourced from Google Material Symbols (Apache-2.0), remove all external font <link> tags, and drop the Roboto web font in favor of the system font stack. No font files are fetched at build or runtime. ~22 distinct Material Symbols are used across the UIs. Also clean up two pre-existing dead icon references found during analysis (a <i class="icon-warning"> with no backing CSS/font, and a Bootstrap-3 glyphicon-info-sign that Bootstrap 5 no longer renders).
> *Acceptance:* With all outbound network blocked
> * (a) mvn package builds every UI module successfully
> * (b) the built index.html and hashed CSS/JS contain no googleapis/gstatic references, and 
> * (c) every icon renders as a glyph with correct color/size theming.



--
This message was sent by Atlassian Jira
(v8.20.10#820010)