diff --git a/docs/developing/config.md b/docs/developing/config.md index 38cc071f341..c9796a19bee 100644 --- a/docs/developing/config.md +++ b/docs/developing/config.md @@ -117,6 +117,7 @@ Below are the config options that Ionic uses. | `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | | `backButtonIcon` | `string` | Overrides the default icon in all `` components. | | `backButtonText` | `string` | Overrides the default text in all `` 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 `` components. | | `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | diff --git a/docs/techniques/security.md b/docs/techniques/security.md index cfbe5a15fc0..e500e83939f 100644 --- a/docs/techniques/security.md +++ b/docs/techniques/security.md @@ -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. diff --git a/versioned_docs/version-v6/developing/config.md b/versioned_docs/version-v6/developing/config.md index 4feee0a375b..662e790864d 100644 --- a/versioned_docs/version-v6/developing/config.md +++ b/versioned_docs/version-v6/developing/config.md @@ -117,6 +117,7 @@ Below are the config options that Ionic uses. | `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | | `backButtonIcon` | `string` | Overrides the default icon in all `` components. | | `backButtonText` | `string` | Overrides the default text in all `` 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 `` components. | | `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | diff --git a/versioned_docs/version-v6/techniques/security.md b/versioned_docs/version-v6/techniques/security.md index cfbe5a15fc0..e500e83939f 100644 --- a/versioned_docs/version-v6/techniques/security.md +++ b/versioned_docs/version-v6/techniques/security.md @@ -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.