SAP UI5 Web Components v2.21.2: Fix for Protocol Relative URL Validation

Hiroshi Ozaki breaks down what you need to know

In my 35 years bridging enterprise software evolution—from Fujitsu’s early systems to leading SAP implementations in Japan—I’ve seen how small technical glitches can derail large-scale digital transformations. Protocol relative URLs, like //example.com/assets/style.css, seem innocuous. They adapt seamlessly to HTTP or HTTPS contexts, a boon in mixed enterprise environments. But a validation bug in SAP UI5 Web Components was rejecting them outright, stalling resource loads and breaking apps. The v2.21.2 release fixes this. If you’re building or maintaining UI5 apps, this matters now: unaddressed, it risks production failures in hybrid deployments.

The Real Story

SAP UI5 Web Components, the open-source library for reusable UI elements, had a flaw in its URL validation logic. Protocol relative URLs—those starting with // without specifying http:// or https://—triggered false positives in the validator. The component treated them as invalid, blocking CSS, JS, or image loads.

This surfaced in GitHub issue #13447. Developers reported errors like “Invalid URL” during runtime, especially when embedding components in apps served over varying protocols. The fix lands in commit b59447c { if (!url.startsWith(’ && !url.startsWith(’ { throw new Error(‘Invalid URL’); } // … }

The update expands it:

```javascript
function validateUrl(url) {
  try {
    new URL(url, window.location.href);  // Resolves relative schemes correctly
    return true;
  } catch {
    return false;
  }
}

This uses the browser’s native URL constructor, which natively supports protocol relatives by inheriting the current page’s protocol. No more brittle regex hacks.

What This Means for You

For SAP developers, this isn’t just a patch—it’s stability for frontline apps. Consider a manufacturing dashboard pulling real-time charts from a CDN. If your app runs on HTTP dev servers but deploys to HTTPS prod, protocol relatives ensure assets load without mixed-content blocks. The bug forced workarounds like hardcoding protocols, risking security warnings or failures.

Real-world scenarios:

• Hybrid environments: Internal tools behind proxies (HTTP) embedding public HTTPS resources. Bug caused 404s or blank components.
• Micro-frontends: UI5 components in SAP BTP or Fiori apps linking to shared libraries. Validation errors cascaded, bloating bundle sizes with duplicates.
• Mobile/edge cases: PWAs or embedded views where protocol flips dynamically—common in automotive clients I’ve advised.

Challenges remain: Older browsers (IE11 remnants) might still choke, though UI5 targets modern ones. If you’re polyfilling URLs, double-check compatibility. Skeptically, this fix assumes clean inputs; malformed URLs elsewhere could still trip you up.

In transformation projects, I’ve emphasized cultural readiness alongside tech. Here, it means teams must audit dependencies holistically—not just upgrade, but align on testing protocols.

Action Items

• Upgrade immediately: Pull @ui5/webcomponents to v2.21.2 via npm/yarn: npm install @ui5/webcomponents@2.21.2. Pin it in package.json for consistency.
• Review the issue: Scan #13447 for your exact symptoms. Reproduce with a minimal repro like:

  <script type="module" src="//unpkg.com/@ui5/webcomponents/dist/bundles/bundle.js"></script>
  <ui5-button>Test</ui5-button>
  

• Examine the commit: Diff b59447c.
  • Run Lighthouse or Chrome DevTools Network tab for load confirms.
  • Regression test custom components.
• Deploy staged: Canary rollout in non-prod; monitor logs for “URL validation” errors.

Community Perspective

GitHub discussions in #13447 reveal frustration turning to relief. One dev noted: “Fixed our Fiori embed issue—saved hours of protocol-swapping hacks.” Another flagged edge cases with data URIs, but core // flows now work. Valuable insight: Pair with UI5’s ui5-link for safer relatives. Community pull requests emphasize testing in iframes, a nod to enterprise isolation.

Practitioners appreciate the quick turnaround—SAP’s responsiveness here builds trust for bigger transformations.

Bottom Line

This v2.21.2 fix is low-hanging fruit with high ROI: upgrade today to sidestep sneaky runtime breaks. But don’t stop at npm install—test like it’s prod Day 1. In my experience, tech fixes enable transformation only if organizations commit to rigorous validation cultures. Ignore that, and you’re back to 1980s mainframe surprises. Act now; stability compounds over decades.

(Word count: 748)

*Source: UI5 Web Components v2.21.2 Release---

References

• SAP AI Core Documentation
• SAP Community Hub