Modify src attribute inside modal with Angular

Question

I have spent days trying to modify the src attr with no luck. Any help will be greatly appreciated. This is the HTML

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" 
data-target="#exampleModalScrollable" *ngFor="let doc of docs" style="margin: 20px">View Doc</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalScrollableTitle" aria-hidden="true" *ngFor="let doc of docs">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <embed src="{{doc}}" frameborder="0" width="1100px" height="600px">
            </div>
            <div class="modal-footer">
                <div class="container">
                    <div class="row">
                        <div class="col align-self-start">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Approve {{doc}}
                            </button>
                        </div>
                        <div class="col align-self-center" style="right:-100px">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal"
                                (click)="open()">Clarify</button>
                        </div>
                        <div class="col align-self-end pull-right" style="right:-280px">
                            <button type="button" class="btn btn-primary">Deny</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The ngFor in the button works fine. Angular works also inside the modal since it creates multiple modals in the DOM. The open() function in the "Clarify" button also works, but the src attr in the embed is not. I have tried with regular bootstrap, ng-bootstrap and ngx-bootstrap, all witth he same result. Any ideas?

Thank you.

Answer 1

This is because embed it is another document and such requests are not secure.
Created stackblitz, please see how to handle it.
In short you need to wrap each of docs like

 doc: SafeResourceUrl = this.domSanitizer.bypassSecurityTrustResourceUrl('https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf');

where domSanitizer is

 import { DomSanitizer } from '@angular/platform-browser'
 private domSanitizer : DomSanitizer