Bir öğede güvenli olmayan bağlamalar

Angular, güvenlik açısından hassas bir niteliğe yapılan bir özellik bağlaması veya öznitelik bağlaması algıladığında bu hatayı görürsünüz. Angular, bu özniteliklerin statik öznitelikler olarak ayarlanmasını gerektirir; böylece değerler element oluşturma zamanında ayarlanır ve ömrü boyunca aynı kalır. Hata mesajı, niteliğin ve öğenin adını içerir.

Bu durum şunlar için geçerlidir:

• Güvenlik modelini kuran <iframe> öznitelikleri: sandbox, allow, allowFullscreen, referrerPolicy, csp, fetchPriority ve credentialless. Bunlar src veya srcdoc özniteliklerinden önce uygulanmalıdır.
• Başka bir öğenin href değerini değiştirebilecek SVG animasyon öznitelikleri, örneğin <animate> ve <set> üzerindeki attributeName.

Örneğin, hata 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 elementin 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>
}