Skip to content
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.

Sign up for GitHub

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

Jump to bottom

fix(): sanitize components using innerHTML #18145

Merged
merged 1 commit into from Apr 26, 2019
Merged

fix(): sanitize components using innerHTML #18145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 10 additions & 10 deletions core/src/components.d.ts
View file
Open in desktop
Expand Up @@ -284,7 +284,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;
/**
Expand Down Expand Up @@ -351,7 +351,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;
/**
Expand Down Expand Up @@ -1565,7 +1565,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;
}
Expand All @@ -1575,7 +1575,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;
}
Expand Down Expand Up @@ -3417,15 +3417,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;
}
Expand All @@ -3435,15 +3435,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;
}
Expand Down Expand Up @@ -3727,7 +3727,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;
/**
Expand Down Expand Up @@ -3817,7 +3817,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;
/**
Expand Down
9 changes: 8 additions & 1 deletion core/src/components/alert/alert.tsx
View file
Open in desktop
Expand Up @@ -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';
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -439,7 +446,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()}
Expand Down
30 changes: 15 additions & 15 deletions core/src/components/alert/readme.md
View file
Open in desktop
Expand Up @@ -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
Expand Down
9 changes: 8 additions & 1 deletion core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
View file
Open in desktop
@@ -1,6 +1,7 @@
import { Component, ComponentInterface, Prop } from '@stencil/core';

import { Config, Mode, SpinnerTypes } from '../../interface';
import { sanitizeDOMString } from '../../utils/sanitization';
import { createThemedClasses } from '../../utils/theme';

@Component({
Expand All @@ -23,6 +24,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;

Expand Down Expand Up @@ -50,7 +57,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>
);
Expand Down