MurhafSousli / ngx-gallery

Error:

advert-detail-pages_advert-detail-pages_module_ts.js:2 ERROR Error: NG0910: Angular has detected that the allow was applied as a binding to an <iframe> (used in the 'GalleryIframeComponent' component template). For security reasons, the allow can be set on an <iframe> as a static attribute only.
To fix this, switch the allow binding to a static attribute in a template or in host bindings section. Find more at https://angular.io/errors/NG0910
at ɵɵvalidateIframeAttribute (core.mjs:7209:15)
at setElementAttribute (core.mjs:12919:71)
at elementAttributeInternal (core.mjs:12910:5)
at Module.ɵɵattribute (core.mjs:14522:9)
at GalleryIframeComponent_Template (ng-gallery.mjs:846:13)
at executeTemplate (core.mjs:12126:9)
at refreshView (core.mjs:12011:13)
at refreshComponent (core.mjs:13085:13)
at refreshChildComponents (core.mjs:11801:9)
at refreshView (core.mjs:12061:13)
handleError @ core.mjs:9171
(an

This happens when I'm trying to add Vimeo embedded link as addIframe() src. My angular project is version ~14.2.6.

What is the expected behavior?

Rendering vimeo embedded link inside gallery.

What is the current behavior?

Angular doesn't allow iFrame insertion most likely because iframes are set like this

<iframe *ngIf="autoplay; else default"
        #iframe
        [attr.loading]="loadingAttr"
        allowfullscreen
        **allow**
        style="border:none"
        [src]="iframeSrc">
</iframe>

What are the steps to reproduce?

What is the use-case or motivation for changing an existing behavior?

Angular has changed iFrame sanitation functionality?

Which versions are you using for the following packages?

Angular: 14.2.8
Angular CDK: 14.2.6
Angular CLI: 14
Typescript: 4.8.4
Gallery: 7.1.2

Is there anything else we should know?

We don't have a property binding on the allow attribute, it is added as a static attribute! Could you add a reproduction stackblitz?

ngx-gallery/projects/ng-gallery/src/lib/components/templates/gallery-iframe.component.ts

Lines 8 to 23 in 814a1fc

    
               <iframe *ngIf="autoplay; else default" 
        
                       #iframe 
        
                       [attr.loading]="loadingAttr" 
        
                       allowfullscreen 
        
                       allow 
        
                       style="border:none" 
        
                       [src]="iframeSrc"> 
        
               </iframe> 
        
               <ng-template #default> 
        
                 <iframe #iframe 
        
                         [attr.loading]="loadingAttr" 
        
                         allowfullscreen 
        
                         style="border:none" 
        
                         [src]="iframeSrc"> 
        
                 </iframe> 
        
               </ng-template>

It was not static with his version (7.1.2)