Error: unsafe value used in a resource URL context (see https://g.co/ng/security#xss)

  angular, angular-cli

I am working with angular cli, I have a rest api made with yii2, my problem is the following:

I have a component, which consists of a video gallery, which are youtube links (https://www.youtube.com/embed/5to1QLIxqzA). In the api I have all the urls for the component, so it looks like this:

videos.component.html:

<div *ngFor="let video of videos" class="col-lg-4 col-sm-6">
    <div class="embed-responsive-item video-noticia">
        <div class="video-responsive">
            http://video.url
        </div>
    </div>
</div>

videos.component.ts:

export class VideosComponent implements OnInit {

    videos: Video[] = [];

    constructor(private data: DataService) { }

    ngOnInit(): void {
    //this.data.getAllVideos().subscribe(data => console.log(data));
    this.data.getAllVideos().subscribe(data => this.videos = data);        
    }

}

in the folder of the component (videos), i have the service to call api:

data.service.ts:

@Injectable({
    providedIn: 'root'
})
export class DataService {

    private urlApi = 'http://localhost/web/api/web/video';

    constructor(private http: HttpClient) { }

    getAllVideos(): Observable<Video[]> {
        return this.http.get<Video[]>(this.urlApi);
    }
}

And the following error is:
enter image description here

I read in other queestions about to create a pipe with DomSanitizer, I tried but didn’t work for me.
I hope someone can help me. Thanks.

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.