Add 'base' element to 'head' to normalize relative urls/references (#…

…2263)

* Add 'base' element to 'head' to normalize relative urls/references

* Try to format

* Try to format

* Prettier++

* Using document.head, wrapping closure to prevent global pollution (dunno if that happens anymore with all the preprocessing, but better to be safe)

* Block-scoping instead of closure

---------

Co-authored-by: Ole Martin Handeland <[email protected]>

src/features/baseurlinjection.ts

@@ -0,0 +1,17 @@
+// Apps are running in a subpath of `/{org}/{app}` both locally and in deployed environments
+// some features make use of relative paths that should resolve relative to this subpath.
+// * `image.src` on the `ImageComponent` might have `some-image.jpg` which we expect to then exist in the `wwwroot/`
+//   folder of the app.
+// The `base` element in the HTML head will make relative references resolve from `base.href`.
+// Bugreport: https://github.com/Altinn/app-frontend-react/issues/2257
+{
+  const base = document.createElement('base');
+  const { protocol, hostname, port: _port } = window.location;
+  const { org, app } = window;
+  const isDefaultHttpsPort = protocol === 'https:' && _port === '443';
+  const isDefaultHttpPort = protocol === 'http:' && _port === '80';
+  const isDefaultPort = isDefaultHttpsPort || isDefaultHttpPort;
+  const port = _port && !isDefaultPort ? `:${_port}` : '';
+  base.href = `${protocol}//${hostname}${port}/${org}/${app}/`;
+  document.head.appendChild(base);
+}

src/index.tsx

@@ -7,6 +7,7 @@ import { createRoot } from 'react-dom/client';
 import { createHashRouter, RouterProvider, ScrollRestoration } from 'react-router-dom';
 import { Slide, ToastContainer } from 'react-toastify';
 
+import 'src/features/baseurlinjection';
 import 'src/features/toggles';
 import 'src/features/logging';
 import 'src/features/styleInjection';