Angular aşağıdaki özellik adlarını kullanarak bir <iframe> elementinde öznitelik bağlaması veya özellik bağlaması algıladığında bu hatayı görürsünüz:
- sandbox
- allow
- allowFullscreen
- referrerPolicy
- csp
- fetchPriority
Belirtilen öznitelikler <iframe>'ler için güvenlik modeli kurulumunu etkiler
ve src veya srcdoc öznitelikleri ayarlanmadan önce uygulanmaları önemlidir.
Bunu zorunlu kılmak için Angular, bu özniteliklerin <iframe>'lerde
statik öznitelikler olarak ayarlanmasını gerektirir; böylece değerler element oluşturma zamanında ayarlanır ve
bir <iframe> örneğinin ömrü boyunca aynı kalır.
Hata, belirtilen öznitelik adlarından biriyle bir özellik bağlaması kullanıldığında fırlatılır:
<iframe [sandbox]="'allow-scripts'" src="..."></iframe>veya bir öznitelik bağlaması olduğunda:
<iframe [attr.sandbox]="'allow-scripts'" src="..."></iframe>Ayrıca, Direktifin host binding'lerinde benzer bir kalıp kullanıldığında da hata fırlatılır:
@Directive({
selector: 'iframe',
host: {
'[sandbox]': `'allow-scripts'`,
'[attr.sandbox]': `'allow-scripts'`,
},
})
class IframeDirective {}Hatayı ayıklama
Hata mesajı, güvenli olmayan bağlamalar içeren bir <iframe> elementinin bulunduğu
şablonlu bileşenin adını içerir.
Önerilen çözüm, belirtilen öznitelikleri statik olarak kullanmaktır, örneğin:
<iframe sandbox="allow-scripts" src="..."></iframe>Bu öznitelikler için farklı değerlere ihtiyacınız varsa (çeşitli koşullara bağlı olarak),
uygun <iframe> elementini koşullu olarak oluşturmak için @if veya @switch kontrol akış bloklarını kullanabilirsiniz:
@if (someConditionA) {
<iframe sandbox="allow-scripts" src="..."></iframe>
} @else if (someConditionB) {
<iframe sandbox="allow-forms" src="..."></iframe>
} @else {
<iframe sandbox="allow-popups" src="..."></iframe>
}