[
https://issues.apache.org/jira/browse/KNOX-3508?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=18124394#comment-18124394
]
ASF subversion and git services commented on KNOX-3508:
-------------------------------------------------------
Commit 234b966c9d76b63a3b3114712137ffbc18700dac in knox's branch
refs/heads/master from Sandor Molnar
[ https://gitbox.apache.org/repos/asf?p=knox.git;h=234b966c9 ]
KNOX-3508: Bundle UI icons locally so they render in air-gapped networks (#1444)
* KNOX-3508: Bundle UI icons locally so they render in air-gapped networks
The Angular 21 UI upgrade (KNOX-3234) and the mat-icon-based UIs
reintroduced external font <link> tags to fonts.googleapis.com /
fonts.gstatic.com for Material Icons (and Roboto in admin-ui),
regressing KNOX-1731. In air-gapped environments the browser cannot
fetch the icon font, so icons render as literal ligature text (e.g.
"settings", "push_pin"). The production build also fetched the fonts at
build time via Beasties critical-CSS inlining, so the build itself
required internet access.
Vendor every icon used by the UIs as local inline SVGs (Google Material
Symbols Outlined, Apache-2.0), remove all external font <link> tags, and
drop the Roboto web font in favor of the system font stack. No font/CSS
is fetched at build or runtime.
- gateway-admin-ui: new <app-icon> component + icon.data.ts render the
SVGs; host keeps the material-icons class so existing theming applies.
- home, token-generation, token-management: register inline SVGs with
MatIconRegistry.addSvgIconLiteral and switch to <mat-icon svgIcon>.
- Remove Google font links from all four index.html files; add a
system-font fallback for the dropped Roboto web font.
- Clean up two dead icon references found during analysis (an
<i class="icon-warning"> with no backing font, and a Bootstrap-3
glyphicon-info-sign that Bootstrap 5 no longer renders).
- Delete orphaned fontawesome/fontopensans binaries (no references).
- Add Material Symbols attribution to NOTICE.
Verified: mvn package builds all four UI modules; the built index.html
and hashed CSS/JS contain no googleapis/gstatic references.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
> 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: 0.5h
> 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)
