Skip to content

docs(config): add documentation for innerHTMLTemplatesEnabled #2826

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Mar 23, 2023
1 change: 1 addition & 0 deletions docs/developing/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ Below are the config options that Ionic uses.
| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `<ion-back-button>` components. |
| `backButtonIcon` | `string` | Overrides the default icon in all `<ion-back-button>` components. |
| `backButtonText` | `string` | Overrides the default text in all `<ion-back-button>` components. |
| `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`. |
| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. |
| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `<ion-infinite-scroll-content>` components. |
| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". |
Expand Down
4 changes: 4 additions & 0 deletions docs/techniques/security.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@ Vue does not provide any type of sanitizing methods built in. It is recommended

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).

## Disabling Custom HTML Parsing via `innerHTML`

`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.

## Ejecting from the built-in sanitizer

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.
Expand Down
1 change: 1 addition & 0 deletions versioned_docs/version-v6/developing/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ Below are the config options that Ionic uses.
| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `<ion-back-button>` components. |
| `backButtonIcon` | `string` | Overrides the default icon in all `<ion-back-button>` components. |
| `backButtonText` | `string` | Overrides the default text in all `<ion-back-button>` components. |
| `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. |
| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. |
| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `<ion-infinite-scroll-content>` components. |
| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". |
Expand Down
4 changes: 4 additions & 0 deletions versioned_docs/version-v6/techniques/security.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@ Vue does not provide any type of sanitizing methods built in. It is recommended

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).

## Disabling Custom HTML Parsing via `innerHTML`

`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.

## Ejecting from the built-in sanitizer

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.
Expand Down