fix(showcase): prevent arbitrary url evaluation

AmadeusITGroup · Jul 16, 2024 · 7b9cffd · 7b9cffd
1 parent 27d84c4
commit 7b9cffd
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 23 deletions.
diff --git a/apps/showcase/e2e-playwright/mocks/api/v3/pet/findByStatus/get/body.json b/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"
   }
 ]
diff --git a/...e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-generator.png b/...e-playwright/sanity/screenshots/visual-sanity.e2e.ts/chromium/sdk-generator.png
diff --git a/apps/showcase/src/components/showcase/sdk/sdk-pres.component.ts b/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
   ],

diff --git a/apps/showcase/src/components/showcase/sdk/sdk-pres.template.html b/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">

diff --git a/apps/showcase/src/components/utilities/index.ts b/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';
diff --git a/apps/showcase/src/components/utilities/otter-picker/index.ts b/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';
 
diff --git a/apps/showcase/src/components/utilities/otter-picker/otter-icon-path.pipe.ts b/apps/showcase/src/components/utilities/otter-picker/otter-icon-path.pipe.ts
@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { OTTER_ICONS } from './otter-icons';
+
+@Pipe({
+  name: 'otterIconPath',
+  standalone: true
+})
+export class OtterIconPathPipe implements PipeTransform {
+  private readonly BASE_URL = location.href.split('/#', 1)[0];
+  private readonly ICON_MATCHER = new RegExp(OTTER_ICONS.join('|'));
+
+  public transform(value: string) {
+    const iconPath = this.ICON_MATCHER.test(value) ? value : OTTER_ICONS[0];
+    return `${this.BASE_URL}${iconPath}`;
+  }
+}
diff --git a/apps/showcase/src/components/utilities/otter-picker/otter-icons.ts b/apps/showcase/src/components/utilities/otter-picker/otter-icons.ts
@@ -0,0 +1,17 @@
+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;
diff --git a/apps/showcase/src/components/utilities/otter-picker/otter-picker-pres.component.ts b/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];