Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(core): add an error details page for unsafe <iframe> bindings (#…
- Loading branch information
1 parent
829738d
commit e7b036c
Showing
4 changed files
with
74 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
@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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters