general: Safe URL pipe

Allow to specify that URL are safe. In this case, Angular doesn't add an
"unsafe:" protocol string on the href link.

Closes rero/rero-ils#2893.

Co-Authored-by: Renaud Michotte <renaud.michotte@gmail.com>

projects/admin/src/app/record/detail-view/contribution-detail-view/corporate-bodies-detail-view/corporate-bodies-detail-view.component.html

@@ -90,9 +90,7 @@
     </dt>
     <dd class="col-sm-7 col-md-8 mb-0">
       <ng-container *ngIf="disabledLink(source); else noLink">
-      <a href="{{ record.identifier }}">
-        {{ record.pid }}
-      </a>
+      <a [href]="record.identifier | safeUrl">{{ record.pid }}</a>
       </ng-container>
       <ng-template #noLink>
         {{ record.pid }}

projects/admin/src/app/record/detail-view/document-detail-view/document-description/document-description.component.html

@@ -400,7 +400,7 @@
           <li *ngFor="let identifier of identifiedBy; let i = index"
           [attr.id]="i | idAttribute:{prefix: 'doc-identifier'}">
             <ng-container *ngIf="identifier.type === 'uri'; else stringBlock">
-              <a class="rero-ils-external-link" href="{{ identifier.value }}">{{ identifier.value }}</a>
+              <a class="rero-ils-external-link" [href]="identifier.value | safeUrl">{{ identifier.value }}</a>
             </ng-container>
             <ng-template #stringBlock>
               {{ identifier.value }}

projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.html

@@ -68,7 +68,7 @@
         <!-- URL -->
         <ng-container *ngIf="item.metadata.url">
           <div class="col-4 pl-5 font-weight-bold label-title" translate>Online access</div>
-          <div class="col-8"><a target="_blank" href="{{ item.metadata.url }}">{{ item.metadata.url }}</a></div>
+          <div class="col-8"><a target="_blank" [href]="item.metadata.url | safeUrl">{{ item.metadata.url }}</a></div>
         </ng-container>
         <!-- TEMPORARY LOCATION -->
         <ng-container *ngIf="item.metadata.temporary_location">

projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.html

@@ -80,7 +80,7 @@
         <!-- ELECTRONIC HOLDING ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
         <div class="row" *ngSwitchCase="'electronic'">
             <div class="col" *ngFor="let elocation of holding.metadata.electronic_location">
-              <a class="rero-ils-external-link" [href]="elocation.uri">{{ elocation.source }}</a>
+              <a class="rero-ils-external-link" [href]="elocation.uri | safeUrl">{{ elocation.source }}</a>
             </div>
         </div>
 

projects/admin/src/app/record/detail-view/document-detail-view/related-resource/related-resource.component.html

@@ -16,7 +16,7 @@
 -->
 
 <ng-container *ngIf="electronicLocator">
-  <a href="{{ electronicLocator.url }}">
+  <a [href]="electronicLocator.url | safeUrl">
     <i class="fa fa-link"></i> {{ electronicLocator.type | translate }}
     <ng-container *ngIf="electronicLocator.content">
       : {{ electronicLocator.content | translate }}

projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.html

@@ -122,7 +122,7 @@ <h1>{{ 'Barcode' | translate }} {{ record.metadata.barcode }}</h1>
       <!-- URL -->
       <ng-container *ngIf="record.metadata | keyExists:'url'">
         <dt class="col-3 label-title" translate>Online access</dt>
-        <dd class="col-9"><a href="{{ record.metadata.url }}">{{ record.metadata.url }}</a></dd>
+        <dd class="col-9"><a [href]="record.metadata.url | safeUrl ">{{ record.metadata.url }}</a></dd>
       </ng-container>
     </dl>
   </section>

projects/public-search/src/app/document-brief/document-brief.component.html

@@ -20,7 +20,7 @@
   <div class="col-sm-12 col-md-8 col-lg-10">
     <!-- document title -->
     <h4 class="mb-1">
-      <a target="_self" [href]="detailUrl.link">{{ record.metadata.title | mainTitle }}</a>
+      <a target="_self" [href]="detailUrl.link | safeUrl">{{ record.metadata.title | mainTitle }}</a>
     </h4>
     <!-- contributions -->
     <ul class="list-inline mb-0" *ngIf="record.metadata.contribution && record.metadata.contribution.length > 0">

projects/public-search/src/app/document-detail/item/item.component.html

@@ -75,7 +75,7 @@
     <ng-container *ngIf="item.metadata.url">
       <dt class="mb-0 col-lg-2 col-sm-3 label-title" translate>URL</dt>
       <dd class="mb-0 col-lg-10 col-sm-9">
-        <a href="{{ item.metadata.url }}">{{ item.metadata.url }}</a>
+        <a [href]="item.metadata.url | safeUrl">{{ item.metadata.url }}</a>
       </dd>
     </ng-container>
     <!-- STATUS -->

projects/shared/src/lib/pipe/safe-url.pipe.ts

@@ -0,0 +1,29 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2022 RERO
+ * Copyright (C) 2022 UCLouvain
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safeUrl'
+})
+export class SafeUrlPipe implements PipeTransform {
+  constructor(private domSanitizer: DomSanitizer) {}
+  transform(url) {
+    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+}

projects/shared/src/lib/shared.module.ts

@@ -34,6 +34,7 @@ import { MainTitlePipe } from './pipe/main-title.pipe';
 import { NotesFilterPipe } from './pipe/notes-filter.pipe';
 import { PatronBlockedMessagePipe } from './pipe/patron-blocked-message.pipe';
 import { ProvisionActivityPipe } from './pipe/provision-activity.pipe';
+import { SafeUrlPipe } from './pipe/safe-url.pipe';
 import { UrlActivePipe } from './pipe/url-active.pipe';
 import { SearchBarConfigService } from './service/search-bar-config.service';
 import { ContributionBriefComponent } from './view/brief/contribution-brief/contribution-brief.component';
@@ -70,7 +71,8 @@ import { ContributionFilterPipe } from './pipe/contribution-filter.pipe';
     GetTranslatedLabelPipe,
     ContributionFilterPipe,
     ActionButtonComponent,
-    NotesFilterPipe
+    NotesFilterPipe,
+    SafeUrlPipe
   ],
   exports: [
     CommonModule,
@@ -97,7 +99,8 @@ import { ContributionFilterPipe } from './pipe/contribution-filter.pipe';
     GetTranslatedLabelPipe,
     ContributionFilterPipe,
     ActionButtonComponent,
-    NotesFilterPipe
+    NotesFilterPipe,
+    SafeUrlPipe
   ],
   imports: [
     CommonModule,

projects/shared/src/public-api.ts

@@ -42,6 +42,7 @@ export * from './lib/pipe/patron-blocked-message.pipe';
 export * from './lib/pipe/provision-activity.pipe';
 export * from './lib/pipe/url-active.pipe';
 export * from './lib/pipe/notes-filter.pipe';
+export * from './lib/pipe/safe-url.pipe';
 export * from './lib/service/app-settings.service';
 export * from './lib/service/search-bar-config.service';
 export * from './lib/service/user.service';