fix(): sanitize components using innerHTML (#18083)

fixes #18065
This commit is contained in:
Liam DeBeasi
2019-04-26 11:56:37 -04:00
committed by GitHub
parent 0fa645b8cc
commit d12757f975
12 changed files with 359 additions and 60 deletions

View File

@ -1,6 +1,7 @@
import { Component, ComponentInterface, Prop } from '@stencil/core';
import { Config, Mode, SpinnerTypes } from '../../interface';
import { sanitizeDOMString } from '../../utils/sanitization';
@Component({
tag: 'ion-infinite-scroll-content',
@ -22,6 +23,12 @@ export class InfiniteScrollContent implements ComponentInterface {
/**
* Optional text to display while loading.
* `loadingText` can accept either plaintext or HTML as a string.
* To display characters normally reserved for HTML, they
* must be escaped. For example `<Ionic>` would become
* `&lt;Ionic&gt;`
*
* For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
*/
@Prop() loadingText?: string;
@ -54,7 +61,7 @@ export class InfiniteScrollContent implements ComponentInterface {
</div>
)}
{this.loadingText && (
<div class="infinite-loading-text" innerHTML={this.loadingText} />
<div class="infinite-loading-text" innerHTML={sanitizeDOMString(this.loadingText)} />
)}
</div>
);

View File

@ -76,10 +76,10 @@ export default Example
## Properties
| Property | Attribute | Description | Type | Default |
| ---------------- | ----------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
| `loadingText` | `loading-text` | Optional text to display while loading. | `string \| undefined` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
| `loadingText` | `loading-text` | Optional text to display while loading. `loadingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined` | `undefined` |
----------------------------------------------