Mengatasi Error: unsafe value used in a resource URL context di Ionic & Angular

Pada kasus kali ini, saya akan mencoba melakukan embed map pada project saya di Ionic dan Angular

Secara sederhana kode project yang saya buat akan terlihat seperti di bawah

<ion-content>
	<div style="padding: 10px;">
		<iframe src="https://maps.google.com/maps?q=35.574255450348126,139.2775388289583&hl=es&z=14&amp;output=embed"  style="border:0;border-radius: 10px !important;width: 100%;height: 300px;box-shadow: 0px 0px 5px #8e8e8e;" allowfullscreen="" loading="lazy"></iframe>
	</div>
</ion-content>

dan akan menghasilkan ouput seperti berikut

home.page.html

Pada kode di atas tidak menghasilkan error apapun dan berjalan dengan normal.

Kemudian saya coba memutuskan mengubah value pada attribute src menggunakan variable dan membuat variable untuk titik coordinate yang nanti rencananya akan didapatkan dari database.

sehingga kodenya akan menjadi seperti berikut

home.page.html

<ion-content>
	<div style="padding: 10px;">
		<iframe [src]="linkEmbed"  style="border:0;border-radius: 10px !important;width: 100%;height: 300px;box-shadow: 0px 0px 5px #8e8e8e;" allowfullscreen="" loading="lazy"></iframe>
	</div>
</ion-content>

home.page.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-embed-map',
  templateUrl: './embed-map.page.html',
  styleUrls: ['./embed-map.page.scss'],
})
export class EmbedMapPage implements OnInit {

  coordinate = ["35.574255450348126","139.2775388289583"];
  linkEmbed;

  constructor() { }

  ngOnInit() {
    let url = "https://maps.google.com/maps?q="+this.coordinate[0]+","+this.coordinate[1]+"&hl=es&z=14&output=embed";
  	
    this.linkEmbed = url;
  }
}

Namun kode di atas menghasilkan “Error: unsafe value used in a resource URL context“.

Hal ini disebabkan karena perlindungan bawaan angular terhadap kerentanan aplikasi web umum dan serangan cross-site scripting (XSS).

Untuk mengatasi masalah tersebut kita dapat mengubah kodenya menjadi seperti berikut

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
	coordinate = ["35.574255450348126","139.2775388289583"];
	linkEmbed!:SafeResourceUrl;

  constructor(
  	public sanitizer: DomSanitizer
  ) { 
  }

  ngOnInit() {
  	let url = "https://maps.google.com/maps?q="+this.coordinate[0]+","+this.coordinate[1]+"&hl=es&z=14&output=embed";
  	
  	this.linkEmbed = this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}