fix(showcase): prevent arbitrary url evaluation (#1955)

## Proposed change

<!-- Please include a summary of the changes and the related issue.
Please also include relevant motivation and context. List any
dependencies that is required for this change. -->

## Related issues

- 🐛 Fixes #(issue)
- 🚀 Feature #(issue)

<!-- Please make sure to follow the contributing guidelines on
https://github.com/amadeus-digital/Otter/blob/main/CONTRIBUTING.md -->

apps/showcase/e2e-playwright/mocks/api/v3/pet/findByStatus/get/body.json

@@ -55,5 +55,23 @@
       }
     ],
     "status": "available"
+  },
+  {
+    "id": 6,
+    "category": {
+      "id": 0,
+      "name": "otter"
+    },
+    "name": "???",
+    "photoUrls": [
+      "https://amadeusitgroup.github.io/otter/#/random-url-that-should-never-be-used"
+    ],
+    "tags": [
+      {
+        "id": 0,
+        "name": "otter"
+      }
+    ],
+    "status": "available"
   }
 ]

apps/showcase/src/components/showcase/sdk/sdk-pres.component.ts

@@ -6,7 +6,7 @@ import { FormsModule } from '@angular/forms';
 import { DfMedia } from '@design-factory/design-factory';
 import { NgbHighlight, NgbPagination, NgbPaginationPages } from '@ng-bootstrap/ng-bootstrap';
 import { O3rComponent } from '@o3r/core';
-import { OtterPickerPresComponent } from '../../utilities';
+import { OtterIconPathPipe, OtterPickerPresComponent } from '../../utilities';
 
 const FILTER_PAG_REGEX = /[^0-9]/g;
 
@@ -18,6 +18,7 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
     NgbHighlight,
     FormsModule,
     NgbPagination,
+    OtterIconPathPipe,
     OtterPickerPresComponent,
     NgbPaginationPages
   ],

apps/showcase/src/components/showcase/sdk/sdk-pres.template.html

@@ -70,7 +70,7 @@
           <tr>
             <td>
               @if (pet.photoUrls?.[0]; as icon) {
-                <img width="34" height="34" [src]="baseUrl+icon" alt="{{icon}}" />
+                <img width="34" height="34" [src]="icon | otterIconPath" alt="{{icon}}" />
               }
             </td>
             <th scope="row">

apps/showcase/src/components/utilities/index.ts

@@ -1,8 +1,7 @@
-export * from './date-picker-input/index';
-export * from './otter-picker/index';
 export * from './copy-text/index';
+export * from './date-picker-input/index';
+export * from './date-picker-input-hebrew/index';
 export * from './in-page-nav/index';
+export * from './otter-picker/index';
 export * from './scroll-back-top/index';
 export * from './sidenav/index';
-export * from './date-picker-input/index';
-export * from './date-picker-input-hebrew/index';

apps/showcase/src/components/utilities/otter-picker/index.ts

@@ -1,2 +1,3 @@
+export * from './otter-icon-path.pipe';
 export * from './otter-picker-pres.component';
 

apps/showcase/src/components/utilities/otter-picker/otter-icon-path.pipe.ts

@@ -0,0 +1,15 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { isOtterIcon, OTTER_ICONS } from './otter-icons';
+
+@Pipe({
+  name: 'otterIconPath',
+  standalone: true
+})
+export class OtterIconPathPipe implements PipeTransform {
+  private readonly BASE_URL = location.href.split('/#', 1)[0];
+
+  /** @inheritDoc */
+  public transform(value: string) {
+    return `${this.BASE_URL}${isOtterIcon(value) ? value : OTTER_ICONS[0]}`;
+  }
+}

apps/showcase/src/components/utilities/otter-picker/otter-icons.ts

@@ -0,0 +1,26 @@
+/** List of icons proposed by the otter-picker */
+export const OTTER_ICONS = [
+  '/assets/otter.svg',
+  '/assets/mini-otters/astronotter.svg',
+  '/assets/mini-otters/bonotter.svg',
+  '/assets/mini-otters/c3potter.svg',
+  '/assets/mini-otters/colombotter.svg',
+  '/assets/mini-otters/djokotter.svg',
+  '/assets/mini-otters/hallowtter.svg',
+  '/assets/mini-otters/harry-otter.svg',
+  '/assets/mini-otters/jack-sparrowtter.svg',
+  '/assets/mini-otters/mandalotter.svg',
+  '/assets/mini-otters/mariotter.svg',
+  '/assets/mini-otters/neotter.svg',
+  '/assets/mini-otters/pizzaiotter.svg',
+  '/assets/mini-otters/ronaldotter.svg',
+  '/assets/mini-otters/sombrerotter.svg'
+] as const;
+
+/**
+ * Check if the given path corresponds to an icon proposed by the otter-picker
+ * @param path
+ */
+export const isOtterIcon = (path: string): path is typeof OTTER_ICONS[number] => {
+  return OTTER_ICONS.includes(path as typeof OTTER_ICONS[number]);
+};

apps/showcase/src/components/utilities/otter-picker/otter-picker-pres.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, forwardRef, Input, signal, ViewEnca
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { O3rComponent } from '@o3r/core';
+import { OTTER_ICONS } from './otter-icons';
 
 @O3rComponent({ componentType: 'Component' })
 @Component({
@@ -29,23 +30,7 @@ export class OtterPickerPresComponent implements ControlValueAccessor {
   public selectedOtter = signal('');
 
   /** List of available otters */
-  public otters = [
-    '/assets/otter.svg',
-    '/assets/mini-otters/astronotter.svg',
-    '/assets/mini-otters/bonotter.svg',
-    '/assets/mini-otters/c3potter.svg',
-    '/assets/mini-otters/colombotter.svg',
-    '/assets/mini-otters/djokotter.svg',
-    '/assets/mini-otters/hallowtter.svg',
-    '/assets/mini-otters/harry-otter.svg',
-    '/assets/mini-otters/jack-sparrowtter.svg',
-    '/assets/mini-otters/mandalotter.svg',
-    '/assets/mini-otters/mariotter.svg',
-    '/assets/mini-otters/neotter.svg',
-    '/assets/mini-otters/pizzaiotter.svg',
-    '/assets/mini-otters/ronaldotter.svg',
-    '/assets/mini-otters/sombrerotter.svg'
-  ];
+  public otters = OTTER_ICONS;
 
   /** Base URL where the images can be fetched */
   public baseUrl = location.href.split('/#', 1)[0];

packages/@o3r/core/package.json

@@ -155,7 +155,7 @@
     "jsonc-eslint-parser": "~2.4.0",
     "eslint-import-resolver-node": "^0.3.9",
     "eslint-plugin-jest": "~28.6.0",
-    "eslint-plugin-jsdoc": "~48.5.0",
+    "eslint-plugin-jsdoc": "~48.7.0",
     "eslint-plugin-prefer-arrow": "~1.2.3",
     "eslint-plugin-unicorn": "^54.0.0",
     "jest": "~29.7.0",