mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
71 lines
2 KiB
Markdown
71 lines
2 KiB
Markdown
@name Unsafe bindings on an iframe element
|
|
@category runtime
|
|
@shortDescription Unsafe bindings on an iframe element
|
|
|
|
@description
|
|
You see this error when Angular detects an attribute binding or a property binding on an `<iframe>` element using the following property names:
|
|
|
|
* sandbox
|
|
* allow
|
|
* allowFullscreen
|
|
* referrerPolicy
|
|
* csp
|
|
* fetchPriority
|
|
|
|
The mentioned attributes affect the security model setup for `<iframe>`s
|
|
and it's important to apply them before setting the `src` or `srcdoc` attributes.
|
|
To enforce that, Angular requires these attributes to be set on `<iframe>`s as
|
|
static attributes, so the values are set at the element creation time and they
|
|
remain the same throughout the lifetime of an `<iframe>` instance.
|
|
|
|
The error is thrown when a property binding with one of the mentioned attribute names is used:
|
|
```html
|
|
<iframe [sandbox]="'allow-scripts'" src="..."></iframe>
|
|
```
|
|
|
|
or when it's an attribute bindings:
|
|
|
|
```html
|
|
<iframe [attr.sandbox]="'allow-scripts'" src="..."></iframe>
|
|
```
|
|
|
|
Also, the error is thrown when a similar pattern is used in Directive's host bindings:
|
|
|
|
```typescript
|
|
@Directive({
|
|
selector: 'iframe',
|
|
host: {
|
|
'[sandbox]': `'allow-scripts'`,
|
|
'[attr.sandbox]': `'allow-scripts'`,
|
|
}
|
|
})
|
|
class IframeDirective {}
|
|
```
|
|
|
|
@debugging
|
|
|
|
The error message includes the name of the component with the template where
|
|
an `<iframe>` element with unsafe bindings is located.
|
|
|
|
The recommended solution is to use the mentioned attributes as static ones, for example:
|
|
|
|
```html
|
|
<iframe sandbox="allow-scripts" src="..."></iframe>
|
|
```
|
|
|
|
If you need to have different values for these attributes (depending on various conditions),
|
|
you can use an `*ngIf` or an `*ngSwitch` on an `<iframe>` element:
|
|
|
|
```html
|
|
<iframe *ngIf="someConditionA" sandbox="allow-scripts" src="..."></iframe>
|
|
<iframe *ngIf="someConditionB" sandbox="allow-forms" src="..."></iframe>
|
|
<iframe *ngIf="someConditionC" sandbox="allow-popups" src="..."></iframe>
|
|
```
|
|
|
|
<!-- links -->
|
|
|
|
<!-- external links -->
|
|
|
|
<!-- end links -->
|
|
|
|
@reviewed 2022-05-27
|