Skip to content
Permalink
Browse files

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

  • Loading branch information...
liamdebeasi committed Apr 26, 2019
1 parent eb3cbe4 commit b839e6fd97198d1c720278056a75721ee4a0f82b
@@ -285,7 +285,7 @@ export namespace Components {
*/
'leaveAnimation'?: AnimationBuilder;
/**
* The main message to be displayed in the alert.
* The main message to be displayed in the alert. `message` 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)
*/
'message'?: string;
/**
@@ -352,7 +352,7 @@ export namespace Components {
*/
'leaveAnimation'?: AnimationBuilder;
/**
* The main message to be displayed in the alert.
* The main message to be displayed in the alert. `message` 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)
*/
'message'?: string;
/**
@@ -1566,7 +1566,7 @@ export namespace Components {
*/
'loadingSpinner'?: SpinnerTypes | null;
/**
* Optional text to display while loading.
* 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)
*/
'loadingText'?: string;
}
@@ -1576,7 +1576,7 @@ export namespace Components {
*/
'loadingSpinner'?: SpinnerTypes | null;
/**
* Optional text to display while loading.
* 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)
*/
'loadingText'?: string;
}
@@ -3418,15 +3418,15 @@ export namespace Components {
*/
'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)
*/
'pullingText'?: string;
/**
* An animated SVG spinner that shows when refreshing begins
*/
'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)
*/
'refreshingText'?: string;
}
@@ -3436,15 +3436,15 @@ export namespace Components {
*/
'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)
*/
'pullingText'?: string;
/**
* An animated SVG spinner that shows when refreshing begins
*/
'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)
*/
'refreshingText'?: string;
}
@@ -3728,7 +3728,7 @@ export namespace Components {
*/
'mode': Mode;
/**
* Set the input's placeholder.
* Set the input's placeholder. `placeholder` 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)
*/
'placeholder': string;
/**
@@ -3818,7 +3818,7 @@ export namespace Components {
*/
'onIonInput'?: (event: CustomEvent<KeyboardEvent>) => void;
/**
* Set the input's placeholder.
* Set the input's placeholder. `placeholder` 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)
*/
'placeholder'?: string;
/**
@@ -2,6 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Me

import { AlertButton, AlertInput, Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
import { sanitizeDOMString } from '../../utils/sanitization';
import { getClassMap } from '../../utils/theme';

import { iosEnterAnimation } from './animations/ios.enter';
@@ -72,6 +73,12 @@ export class Alert implements ComponentInterface, OverlayInterface {

/**
* The main message to be displayed in the alert.
* `message` 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() message?: string;

@@ -440,7 +447,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
{this.subHeader && <h2 id={subHdrId} class="alert-sub-title">{this.subHeader}</h2>}
</div>

<div id={msgId} class="alert-message" innerHTML={this.message}></div>
<div id={msgId} class="alert-message" innerHTML={sanitizeDOMString(this.message)}></div>

{this.renderAlertInputs(labelledById)}
{this.renderAlertButtons()}
@@ -1055,21 +1055,21 @@ export default {

## Properties

| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the alert will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `buttons` | -- | Array of buttons to be added to the alert. | `(string \| AlertButton)[]` | `[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the alert is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` |
| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `message` | `message` | The main message to be displayed in the alert. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the alert will be translucent. | `boolean` | `false` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the alert will animate. | `boolean` | `true` |
| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked. | `boolean` | `true` |
| `buttons` | -- | Array of buttons to be added to the alert. | `(string \| AlertButton)[]` | `[]` |
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` |
| `enterAnimation` | -- | Animation to use when the alert is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` |
| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `message` | `message` | The main message to be displayed in the alert. `message` 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` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the alert will be translucent. | `boolean` | `false` |


## Events
@@ -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>
);

0 comments on commit b839e6f

Please sign in to comment.
You can’t perform that action at this time.