javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

12
core/src/components/refresher-content/readme.md
View File

@ -9,12 +9,12 @@ The refresher content contains the text, icon and spinner to display during a pu
## Properties
| Property | Attribute | Description | Type | Default |
| ------------------- | -------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
| `pullingIcon` | `pulling-icon` | A static icon to display when you begin to pull down | `null \| string \| undefined` | `undefined` |
| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down | `string \| undefined` | `undefined` |
| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh | `string \| undefined` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
| `pullingIcon` | `pulling-icon` | A static icon to display when you begin to pull down | `null \| string \| undefined` | `undefined` |
| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down. `pullingText` 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` |
| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh. `refreshingText` 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` |
----------------------------------------------

21
core/src/components/refresher-content/refresher-content.tsx
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-refresher-content'
@ -17,7 +18,13 @@ export class RefresherContent implements ComponentInterface {
@Prop({ mutable: true }) pullingIcon?: string | null;
/**
* The text you want to display when you begin to pull down
* The text you want to display when you begin to pull down.
* `pullingText` 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() pullingText?: string;
@ -27,7 +34,13 @@ export class RefresherContent implements ComponentInterface {
@Prop({ mutable: true }) refreshingSpinner?: SpinnerTypes | null;
/**
* The text you want to display when performing a refresh
* The text you want to display when performing a refresh.
* `refreshingText` 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() refreshingText?: string;
@ -60,7 +73,7 @@ export class RefresherContent implements ComponentInterface {
</div>
}
{this.pullingText &&
<div class="refresher-pulling-text" innerHTML={this.pullingText}></div>
<div class="refresher-pulling-text" innerHTML={sanitizeDOMString(this.pullingText)}></div>
}
</div>,
<div class="refresher-refreshing">
@ -70,7 +83,7 @@ export class RefresherContent implements ComponentInterface {
</div>
}
{this.refreshingText &&
<div class="refresher-refreshing-text" innerHTML={this.refreshingText}></div>
<div class="refresher-refreshing-text" innerHTML={sanitizeDOMString(this.refreshingText)}></div>
}
</div>
];