Skip to content

Commit cb4f91c

Browse files
authored
docs(config): add documentation for innerHTMLTemplatesEnabled (#2826)
1 parent 6ef5369 commit cb4f91c

File tree

4 files changed

+10
-0
lines changed

4 files changed

+10
-0
lines changed

docs/developing/config.md

+1
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ Below are the config options that Ionic uses.
117117
| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `<ion-back-button>` components. |
118118
| `backButtonIcon` | `string` | Overrides the default icon in all `<ion-back-button>` components. |
119119
| `backButtonText` | `string` | Overrides the default text in all `<ion-back-button>` components. |
120+
| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `false`, custom HTML passed to the relevant components will be parsed as a string instead of HTML. Defaults to `true`. |
120121
| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. |
121122
| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `<ion-infinite-scroll-content>` components. |
122123
| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". |

docs/techniques/security.md

+4
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@ Vue does not provide any type of sanitizing methods built in. It is recommended
6262

6363
To learn more about the security recommendations for binding to directives such as `v-html`, see the [Vue Syntax Guide](https://vuejs.org/v2/guide/syntax.html#Raw-HTML).
6464

65+
## Disabling Custom HTML Parsing via `innerHTML`
66+
67+
`ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` accept custom HTML as strings for certain properties. These strings are added to the DOM using `innerHTML` and must be properly sanitized by the developer. Developers can disable this functionality by setting `innerHTMLTemplatesEnabled: false` in the [IonicConfig](../developing/config#ionicconfig). When `innerHTMLTemplatesEnabled` is `false`, the values passed to the affected components will always be interpreted as strings.
68+
6569
## Ejecting from the built-in sanitizer
6670

6771
For developers who wish to add complex HTML to components such as `ion-toast`, they will need to eject from the sanitizer that is built into Ionic Framework. Developers can either disable the sanitizer across their entire app or bypass it on a case-by-case basis.

versioned_docs/version-v6/developing/config.md

+1
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ Below are the config options that Ionic uses.
117117
| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `<ion-back-button>` components. |
118118
| `backButtonIcon` | `string` | Overrides the default icon in all `<ion-back-button>` components. |
119119
| `backButtonText` | `string` | Overrides the default text in all `<ion-back-button>` components. |
120+
| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `false`, all `innerHTML` usage will be disabled in Ionic, and custom HTML will not be usable in the relevant components. `innerHTML` usage is enabled by default. |
120121
| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. |
121122
| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `<ion-infinite-scroll-content>` components. |
122123
| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". |

versioned_docs/version-v6/techniques/security.md

+4
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@ Vue does not provide any type of sanitizing methods built in. It is recommended
6262

6363
To learn more about the security recommendations for binding to directives such as `v-html`, see the [Vue Syntax Guide](https://vuejs.org/v2/guide/syntax.html#Raw-HTML).
6464

65+
## Disabling Custom HTML Parsing via `innerHTML`
66+
67+
`ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, and `ion-toast` accept custom HTML as strings for certain properties. These strings are added to the DOM using `innerHTML` and must be properly sanitized by the developer. Developers can disable this functionality by setting `innerHTMLTemplatesEnabled: false` in the [IonicConfig](../developing/config#ionicconfig). When `innerHTMLTemplatesEnabled` is `false`, the values passed to the affected components will always be interpreted as strings.
68+
6569
## Ejecting from the built-in sanitizer
6670

6771
For developers who wish to add complex HTML to components such as `ion-toast`, they will need to eject from the sanitizer that is built into Ionic Framework. Developers can either disable the sanitizer across their entire app or bypass it on a case-by-case basis.

0 commit comments

Comments
 (0)