@metamask/sdk-install-modal-web npm package: is it safe?

The code uses dynamic import/require with computed bundle IDs (e.g., require(./${bundleId}.entry.js)). However, the bundle IDs are sourced from static component metadata within the package itself, not from external input, limiting risk.

The code loads external component scripts via bootstrapLazy with a reference to 'mm-install-modal_3.cjs'. While this is a standard pattern for Stencil-based web components, the loaded component could contain malicious logic since its content is not verified in this file.

The component uses index.h('div', { id: 'sdk-mm-qrcode', class: 'center', innerHTML: svgElement }) where svgElement is produced by encodeQR() from the link property. If link is attacker-influenced and the QR library produced attacker-controlled SVG markup, innerHTML would execute it. In practice encodeQR generates fixed SVG structure, so immediate exploitability is low, but using innerHTML with a computed string is a code smell that could become an XSS vector if the input API ever changes.

The code sends the user's browser locale preference to an external GitHub raw content host (or any configured baseUrl) on each init for non-English locales. This leaks browser environment details (navigator.language/languages) to a third-party endpoint. This is a minor privacy concern, not exfiltration of credentials.

The component imports a third-party QR encoding library (@paulmillr/qr) to generate SVG from a potentially external link. Third-party dependencies performing encoding operations on untrusted input should be validated, though no malicious behavior is evident in this file itself.

The loadModule function uses dynamic import() with a computed bundleId from component metadata. However, this is standard Stencil lazy-loading behavior: bundle IDs are hardcoded in the generated metadata and the final fallback imports a template literal ./${bundleId}.entry.js. No external user input reaches the import path, and no obfuscation or anomalous string construction is present.

styleElm.innerHTML = style and styleElm.innerHTML += SLOT_FB_CSS are used to inject CSS text into style elements. The style content originates from the component bundle's own compiled styles, not from external/attacker-controlled input. The runtime also handles CSP nonces via queryNonceMetaTagContent and setNonce, which is standard Stencil CSP support.

Imports use obfuscated aliases (b, s, g) and file names with content hashes (index-4b8a94c9.js, app-globals-0f993ce5.js). These are typical of minified bundler output but reduce code auditability and could hide malicious behavior in the referenced files.

The module defines defineCustomElements which is auto-executed or invoked at import time by Stencil runtime. It calls globalScripts() (from app-globals-0f993ce5.js) and bootstrapLazy() which dynamically loads and registers custom elements. This means code runs automatically when the module is imported, without explicit user invocation.

bootstrapLazy from index-4b8a94c9.js is a Stencil-generated lazy loader that dynamically imports component bundles based on the custom element tag names defined in the metadata array. While the tags here are hardcoded, the loader mechanism may fetch and execute additional JS chunks at runtime, expanding the trust boundary beyond this file.

The rendered QR code SVG (generated by the bundled @paulmillr/qr library) is injected via innerHTML in multiple modals (InstallModal, SelectModal). If the link prop passed to the component is ever attacker-controlled and contains malicious payloads that the QR encoder reflects, this could lead to DOM-based XSS. In the current code the QR library only encodes into an SVG attribute context, but the pattern of using innerHTML with runtime-generated content is a code-smell that warrants attention.

The file embeds a substantial copy of the @paulmillr/qr library. Static analysis of the embedded code did not reveal eval, Function constructor, child_process, filesystem access, credential harvesting, crypto-mining, wallet-draining, or obfuscated payloads. The code performs pure in-memory QR encoding. No backdoor or exfiltration behavior was observed.

The code is a standard Custom Elements polyfill for older browsers (widely known as the 'webcomponents-loader' / document-register-element style shim). It patches window.HTMLElement to support Reflect.construct for custom element subclassing. This is a well-known, legitimate polyfill pattern and contains no data exfiltration, credential harvesting, dynamic code execution, process spawning, or filesystem manipulation.

The final statement export * from '../esm/loader.js' is a static ES module re-export to the ESM build of the same package. Static string specifier, no dynamic import with computed input.

The code uses a dynamic import with a computed path: import(./${r}.entry.js${''}). This is part of the Stencil runtime's lazy loading mechanism. The variable 'r' is derived from component metadata and is not attacker-controlled. No external input is used.

The code fetches translation JSON files from a hardcoded GitHub raw URL (https://raw.githubusercontent.com/MetaMask/metamask-sdk/refs/heads/gh-pages/locales) based on the browser language. This is a legitimate feature for loading localized UI strings, not data exfiltration, but it is a network request to an external host at runtime.