fix(showcase): prevent arbitrary url evaluation

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 { OtterIconPresComponent, OtterPickerPresComponent } from '../../utilities';
 
 const FILTER_PAG_REGEX = /[^0-9]/g;
 
@@ -18,6 +18,7 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
     NgbHighlight,
     FormsModule,
     NgbPagination,
+    OtterIconPresComponent,
     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}}" />
+                <o3r-otter-icon-pres [path]="icon" [width]="34" [height]="34"></o3r-otter-icon-pres>
               }
             </td>
             <th scope="row">

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

@@ -1,8 +1,8 @@
-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-icon/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-icon/index.ts

@@ -0,0 +1,2 @@
+export * from './otter-icon-pres.component';
+

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

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
+import { O3rComponent } from '@o3r/core';
+
+@O3rComponent({ componentType: 'Component' })
+@Component({
+  selector: 'o3r-otter-icon-pres',
+  standalone: true,
+  templateUrl: './otter-icon-pres.template.html',
+  styleUrls: ['./otter-icon-pres.style.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class OtterIconPresComponent {
+  /** Path of the otter icon */
+  public path = input.required<string>();
+
+  /** Width of the icon */
+  public width = input.required<number>();
+
+  /** Height of the icon */
+  public height = input.required<number>();
+
+  private readonly BASE_URL = location.href.split('/#', 1)[0];
+
+  private readonly ICON_MATCHER = /^\/assets\/[\w-/]+\.svg$/;
+
+  /** Url of the otter icon or default otter if wrong pattern */
+  public realUrl = computed(() => {
+    const path = this.path();
+    return this.ICON_MATCHER.test(path) ? `${this.BASE_URL}${path}` : `${this.BASE_URL}/assets/otter.svg`;
+  });
+}

apps/showcase/src/components/utilities/otter-icon/otter-icon-pres.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OtterIconPresComponent } from './otter-icon-pres.component';
+
+describe('OtterIconPresComponent', () => {
+  let component: OtterIconPresComponent;
+  let fixture: ComponentFixture<OtterIconPresComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [OtterIconPresComponent]
+    });
+    fixture = TestBed.createComponent(OtterIconPresComponent);
+    fixture.componentRef.setInput('path', '');
+    fixture.componentRef.setInput('width', 16);
+    fixture.componentRef.setInput('height', 16);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/showcase/src/components/utilities/otter-icon/otter-icon-pres.style.scss

@@ -0,0 +1,3 @@
+o3r-otter-icon-pres {
+
+}

apps/showcase/src/components/utilities/otter-icon/otter-icon-pres.template.html

@@ -0,0 +1 @@
+<img [attr.width]="width()" [attr.height]="height()" [src]="realUrl()" alt="{{realUrl()}}" />

packages/@ama-sdk/schematics/package.json

@@ -127,7 +127,7 @@
     "typescript": "~5.4.2"
   },
   "generatorDependencies": {
-    "@swc/cli": "~0.3.0",
+    "@swc/cli": "~0.4.0",
     "@swc/core": "~1.6.0",
     "@swc/helpers": "~0.5.0",
     "@commitlint/cli": "^19.0.0",