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

feat(all): add ability to eject from Ionic sanitizer (#20457)

Browse Source 
resolves #18277
This commit is contained in:
Liam DeBeasi
2020-04-27 16:03:39 -04:00
committed by GitHub
parent 578ab93d29
commit fa9ddc91bc
21 changed files with 90 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
angular/src/index.ts
View File

@ -39,5 +39,8 @@ export { IonicRouteStrategy } from './util/ionic-router-reuse-strategy';
// PACKAGE MODULE // PACKAGE MODULE
export { IonicModule } from './ionic-module'; export { IonicModule } from './ionic-module';
// UTILS
export { IonicSafeString } from '@ionic/core';
// CORE TYPES // CORE TYPES
export { Animation, AnimationBuilder, AnimationCallbackOptions, AnimationDirection, AnimationFill, AnimationKeyFrames, AnimationLifecycle, Gesture, GestureConfig, GestureDetail, mdTransitionAnimation, iosTransitionAnimation } from '@ionic/core'; export { Animation, AnimationBuilder, AnimationCallbackOptions, AnimationDirection, AnimationFill, AnimationKeyFrames, AnimationLifecycle, Gesture, GestureConfig, GestureDetail, mdTransitionAnimation, iosTransitionAnimation } from '@ionic/core';

12
core/api.txt
View File

@ -53,7 +53,7 @@ ion-alert,prop,header,string | undefined,undefined,false,false
ion-alert,prop,inputs,AlertInput[],[],false,false ion-alert,prop,inputs,AlertInput[],[],false,false
ion-alert,prop,keyboardClose,boolean,true,false,false ion-alert,prop,keyboardClose,boolean,true,false,false
ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-alert,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-alert,prop,message,string | undefined,undefined,false,false ion-alert,prop,message,IonicSafeString | string | undefined,undefined,false,false
ion-alert,prop,mode,"ios" | "md",undefined,false,false ion-alert,prop,mode,"ios" | "md",undefined,false,false
ion-alert,prop,subHeader,string | undefined,undefined,false,false ion-alert,prop,subHeader,string | undefined,undefined,false,false
ion-alert,prop,translucent,boolean,false,false,false ion-alert,prop,translucent,boolean,false,false,false
@ -433,7 +433,7 @@ ion-infinite-scroll,event,ionInfinite,void,true
ion-infinite-scroll-content,none ion-infinite-scroll-content,none
ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false ion-infinite-scroll-content,prop,loadingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
ion-infinite-scroll-content,prop,loadingText,string | undefined,undefined,false,false ion-infinite-scroll-content,prop,loadingText,IonicSafeString | string | undefined,undefined,false,false
ion-input,scoped ion-input,scoped
ion-input,prop,accept,string | undefined,undefined,false,false ion-input,prop,accept,string | undefined,undefined,false,false
@ -606,7 +606,7 @@ ion-loading,prop,duration,number,0,false,false
ion-loading,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-loading,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-loading,prop,keyboardClose,boolean,true,false,false ion-loading,prop,keyboardClose,boolean,true,false,false
ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-loading,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-loading,prop,message,string | undefined,undefined,false,false ion-loading,prop,message,IonicSafeString | string | undefined,undefined,false,false
ion-loading,prop,mode,"ios" | "md",undefined,false,false ion-loading,prop,mode,"ios" | "md",undefined,false,false
ion-loading,prop,showBackdrop,boolean,true,false,false ion-loading,prop,showBackdrop,boolean,true,false,false
ion-loading,prop,spinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false ion-loading,prop,spinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
@ -896,9 +896,9 @@ ion-refresher,event,ionStart,void,true
ion-refresher-content,none ion-refresher-content,none
ion-refresher-content,prop,pullingIcon,null | string | undefined,undefined,false,false ion-refresher-content,prop,pullingIcon,null | string | undefined,undefined,false,false
ion-refresher-content,prop,pullingText,string | undefined,undefined,false,false ion-refresher-content,prop,pullingText,IonicSafeString | string | undefined,undefined,false,false
ion-refresher-content,prop,refreshingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false ion-refresher-content,prop,refreshingSpinner,"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined,undefined,false,false
ion-refresher-content,prop,refreshingText,string | undefined,undefined,false,false ion-refresher-content,prop,refreshingText,IonicSafeString | string | undefined,undefined,false,false
ion-reorder,shadow ion-reorder,shadow
ion-reorder,part,icon ion-reorder,part,icon
@ -1237,7 +1237,7 @@ ion-toast,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefin
ion-toast,prop,header,string | undefined,undefined,false,false ion-toast,prop,header,string | undefined,undefined,false,false
ion-toast,prop,keyboardClose,boolean,false,false,false ion-toast,prop,keyboardClose,boolean,false,false,false
ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false ion-toast,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
ion-toast,prop,message,string | undefined,undefined,false,false ion-toast,prop,message,IonicSafeString | string | undefined,undefined,false,false
ion-toast,prop,mode,"ios" | "md",undefined,false,false ion-toast,prop,mode,"ios" | "md",undefined,false,false
ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false
ion-toast,prop,translucent,boolean,false,false,false ion-toast,prop,translucent,boolean,false,false,false

25
core/src/components.d.ts vendored
View File

@ -6,6 +6,7 @@
*/ */
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
import { ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimeOptions, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, MenuChangeEventDetail, NavComponent, NavOptions, OverlayEventDetail, PickerButton, PickerColumn, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, ViewController, } from "./interface"; import { ActionSheetButton, AlertButton, AlertInput, AnimationBuilder, CheckboxChangeEventDetail, Color, ComponentProps, ComponentRef, DatetimeChangeEventDetail, DatetimeOptions, DomRenderFn, FooterHeightFn, FrameworkDelegate, HeaderFn, HeaderHeightFn, InputChangeEventDetail, ItemHeightFn, ItemRenderFn, ItemReorderEventDetail, MenuChangeEventDetail, NavComponent, NavOptions, OverlayEventDetail, PickerButton, PickerColumn, RadioGroupChangeEventDetail, RangeChangeEventDetail, RangeValue, RefresherEventDetail, RouteID, RouterDirection, RouterEventDetail, RouterOutletOptions, RouteWrite, ScrollBaseDetail, ScrollDetail, SearchbarChangeEventDetail, SegmentButtonLayout, SegmentChangeEventDetail, SelectChangeEventDetail, SelectInterface, SelectPopoverOption, Side, SpinnerTypes, StyleEventDetail, SwipeGestureHandler, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout, TextareaChangeEventDetail, TextFieldTypes, ToastButton, ToggleChangeEventDetail, TransitionDoneFn, TransitionInstruction, ViewController, } from "./interface";
import { IonicSafeString, } from ".";
import { SelectCompareFn, } from "./components/select/select-interface"; import { SelectCompareFn, } from "./components/select/select-interface";
export namespace Components { export namespace Components {
interface IonActionSheet { interface IonActionSheet {
@ -119,7 +120,7 @@ export namespace Components {
/** /**
* 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) * 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; "message"?: string | IonicSafeString;
/** /**
* The mode determines which platform styles to use. * The mode determines which platform styles to use.
*/ */
@ -800,7 +801,7 @@ export namespace Components {
/** /**
* 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) * 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; "loadingText"?: string | IonicSafeString;
} }
interface IonInput { interface IonInput {
/** /**
@ -1150,7 +1151,7 @@ export namespace Components {
/** /**
* Optional text content to display in the loading indicator. * Optional text content to display in the loading indicator.
*/ */
"message"?: string; "message"?: string | IonicSafeString;
/** /**
* The mode determines which platform styles to use. * The mode determines which platform styles to use.
*/ */
@ -1780,7 +1781,7 @@ export namespace Components {
/** /**
* 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) * 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; "pullingText"?: string | IonicSafeString;
/** /**
* An animated SVG spinner that shows when refreshing begins * An animated SVG spinner that shows when refreshing begins
*/ */
@ -1788,7 +1789,7 @@ export namespace Components {
/** /**
* 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) * 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; "refreshingText"?: string | IonicSafeString;
} }
interface IonReorder { interface IonReorder {
} }
@ -2501,7 +2502,7 @@ export namespace Components {
/** /**
* Message to be shown in the toast. * Message to be shown in the toast.
*/ */
"message"?: string; "message"?: string | IonicSafeString;
/** /**
* The mode determines which platform styles to use. * The mode determines which platform styles to use.
*/ */
@ -3348,7 +3349,7 @@ declare namespace LocalJSX {
/** /**
* 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) * 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; "message"?: string | IonicSafeString;
/** /**
* The mode determines which platform styles to use. * The mode determines which platform styles to use.
*/ */
@ -4068,7 +4069,7 @@ declare namespace LocalJSX {
/** /**
* 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) * 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; "loadingText"?: string | IonicSafeString;
} }
interface IonInput { interface IonInput {
/** /**
@ -4402,7 +4403,7 @@ declare namespace LocalJSX {
/** /**
* Optional text content to display in the loading indicator. * Optional text content to display in the loading indicator.
*/ */
"message"?: string; "message"?: string | IonicSafeString;
/** /**
* The mode determines which platform styles to use. * The mode determines which platform styles to use.
*/ */
@ -4954,7 +4955,7 @@ declare namespace LocalJSX {
/** /**
* 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) * 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; "pullingText"?: string | IonicSafeString;
/** /**
* An animated SVG spinner that shows when refreshing begins * An animated SVG spinner that shows when refreshing begins
*/ */
@ -4962,7 +4963,7 @@ declare namespace LocalJSX {
/** /**
* 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) * 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; "refreshingText"?: string | IonicSafeString;
} }
interface IonReorder { interface IonReorder {
} }
@ -5684,7 +5685,7 @@ declare namespace LocalJSX {
/** /**
* Message to be shown in the toast. * Message to be shown in the toast.
*/ */
"message"?: string; "message"?: string | IonicSafeString;
/** /**
* The mode determines which platform styles to use. * The mode determines which platform styles to use.
*/ */

3
core/src/components/alert/alert-interface.ts
View File

@ -1,9 +1,10 @@
import { IonicSafeString } from '../../';
import { AnimationBuilder, Mode, TextFieldTypes } from '../../interface'; import { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';
export interface AlertOptions { export interface AlertOptions {
header?: string; header?: string;
subHeader?: string; subHeader?: string;
message?: string; message?: string | IonicSafeString;
cssClass?: string | string[]; cssClass?: string | string[];
inputs?: AlertInput[]; inputs?: AlertInput[];
buttons?: (AlertButton | string)[]; buttons?: (AlertButton | string)[];

3
core/src/components/alert/alert.tsx
View File

@ -1,5 +1,6 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, Watch, forceUpdate, h } from '@stencil/core'; import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
import { IonicSafeString } from '../../';
import { getIonMode } from '../../global/ionic-global'; import { getIonMode } from '../../global/ionic-global';
import { AlertButton, AlertInput, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface'; import { AlertButton, AlertInput, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays'; import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
@ -76,7 +77,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
* *
* For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
*/ */
@Prop() message?: string; @Prop() message?: string | IonicSafeString;
/** /**
* Array of buttons to be added to the alert. * Array of buttons to be added to the alert.

2
core/src/components/alert/readme.md
View File

@ -1044,7 +1044,7 @@ export default {
| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` | | `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` | | `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. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((baseEl: any, opts?: any) => 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` | | `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) | `IonicSafeString \| string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `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` | | `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. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | | `translucent` | `translucent` | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |

3
core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
View File

@ -1,5 +1,6 @@
import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core'; import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';
import { IonicSafeString } from '../../';
import { config } from '../../global/config'; import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global'; import { getIonMode } from '../../global/ionic-global';
import { SpinnerTypes } from '../../interface'; import { SpinnerTypes } from '../../interface';
@ -28,7 +29,7 @@ export class InfiniteScrollContent implements ComponentInterface {
* *
* For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
*/ */
@Prop() loadingText?: string; @Prop() loadingText?: string | IonicSafeString;
componentDidLoad() { componentDidLoad() {
if (this.loadingSpinner === undefined) { if (this.loadingSpinner === undefined) {

2
core/src/components/infinite-scroll-content/readme.md
View File

@ -61,7 +61,7 @@ The `ion-infinite-scroll-content` component is not supported in React.
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- | | ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- |
| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` | | `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "circular" \| "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` | | `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) | `IonicSafeString \| string \| undefined` | `undefined` |
## Dependencies ## Dependencies

3
core/src/components/loading/loading-interface.ts
View File

@ -1,8 +1,9 @@
import { IonicSafeString } from '../../';
import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface'; import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';
export interface LoadingOptions { export interface LoadingOptions {
spinner?: SpinnerTypes | null; spinner?: SpinnerTypes | null;
message?: string; message?: string | IonicSafeString;
cssClass?: string | string[]; cssClass?: string | string[];
showBackdrop?: boolean; showBackdrop?: boolean;
duration?: number; duration?: number;

3
core/src/components/loading/loading.tsx
View File

@ -1,5 +1,6 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, h } from '@stencil/core'; import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, h } from '@stencil/core';
import { IonicSafeString } from '../../';
import { config } from '../../global/config'; import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global'; import { getIonMode } from '../../global/ionic-global';
import { AnimationBuilder, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface'; import { AnimationBuilder, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
@ -51,7 +52,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
/** /**
* Optional text content to display in the loading indicator. * Optional text content to display in the loading indicator.
*/ */
@Prop() message?: string; @Prop() message?: string | IonicSafeString;
/** /**
* Additional classes to apply for custom CSS. If multiple classes are * Additional classes to apply for custom CSS. If multiple classes are

2
core/src/components/loading/readme.md
View File

@ -182,7 +182,7 @@ export default {
| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` |
| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `message` | `message` | Optional text content to display in the loading indicator. | `string \| undefined` | `undefined` | | `message` | `message` | Optional text content to display in the loading indicator. | `IonicSafeString \| string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` | | `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` |
| `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` | | `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |

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

@ -12,9 +12,9 @@ The refresher content contains the text, icon and spinner to display during a pu
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- | | ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- |
| `pullingIcon` | `pulling-icon` | A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices. | `null \| string \| undefined` | `undefined` | | `pullingIcon` | `pulling-icon` | A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices. | `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` | | `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) | `IonicSafeString \| string \| undefined` | `undefined` |
| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` | | `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "circular" \| "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` | | `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) | `IonicSafeString \| string \| undefined` | `undefined` |
## Dependencies ## Dependencies

5
core/src/components/refresher-content/refresher-content.tsx
View File

@ -1,5 +1,6 @@
import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/core'; import { Component, ComponentInterface, Element, Host, Prop, h } from '@stencil/core';
import { IonicSafeString } from '../../';
import { config } from '../../global/config'; import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global'; import { getIonMode } from '../../global/ionic-global';
import { SpinnerTypes } from '../../interface'; import { SpinnerTypes } from '../../interface';
@ -30,7 +31,7 @@ export class RefresherContent implements ComponentInterface {
* *
* For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
*/ */
@Prop() pullingText?: string; @Prop() pullingText?: string | IonicSafeString;
/** /**
* An animated SVG spinner that shows when refreshing begins * An animated SVG spinner that shows when refreshing begins
@ -46,7 +47,7 @@ export class RefresherContent implements ComponentInterface {
* *
* For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
*/ */
@Prop() refreshingText?: string; @Prop() refreshingText?: string | IonicSafeString;
componentWillLoad() { componentWillLoad() {
if (this.pullingIcon === undefined) { if (this.pullingIcon === undefined) {

2
core/src/components/toast/readme.md
View File

@ -172,7 +172,7 @@ export const ToastExample: React.FC = () => {
| `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` | | `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` | | `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` |
| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | | `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` |
| `message` | `message` | Message to be shown in the toast. | `string \| undefined` | `undefined` | | `message` | `message` | Message to be shown in the toast. | `IonicSafeString \| string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | | `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` | | `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` |
| `translucent` | `translucent` | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | | `translucent` | `translucent` | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |

3
core/src/components/toast/toast-interface.ts
View File

@ -1,8 +1,9 @@
import { IonicSafeString } from '../../';
import { AnimationBuilder, Color, Mode } from '../../interface'; import { AnimationBuilder, Color, Mode } from '../../interface';
export interface ToastOptions { export interface ToastOptions {
header?: string; header?: string;
message?: string; message?: string | IonicSafeString;
cssClass?: string | string[]; cssClass?: string | string[];
duration?: number; duration?: number;
buttons?: (ToastButton | string)[]; buttons?: (ToastButton | string)[];

3
core/src/components/toast/toast.tsx
View File

@ -1,5 +1,6 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, h } from '@stencil/core'; import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, h } from '@stencil/core';
import { IonicSafeString } from '../../';
import { getIonMode } from '../../global/ionic-global'; import { getIonMode } from '../../global/ionic-global';
import { AnimationBuilder, Color, CssClassMap, OverlayEventDetail, OverlayInterface, ToastButton } from '../../interface'; import { AnimationBuilder, Color, CssClassMap, OverlayEventDetail, OverlayInterface, ToastButton } from '../../interface';
import { dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays'; import { dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
@ -72,7 +73,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
/** /**
* Message to be shown in the toast. * Message to be shown in the toast.
*/ */
@Prop() message?: string; @Prop() message?: string | IonicSafeString;
/** /**
* If `true`, the keyboard will be automatically dismissed when the overlay is presented. * If `true`, the keyboard will be automatically dismissed when the overlay is presented.

1
core/src/index.ts
View File

@ -6,6 +6,7 @@ export { mdTransitionAnimation } from './utils/transition/md.transition';
export { getTimeGivenProgression } from './utils/animation/cubic-bezier'; export { getTimeGivenProgression } from './utils/animation/cubic-bezier';
export { createGesture } from './utils/gesture'; export { createGesture } from './utils/gesture';
export { isPlatform, Platforms, getPlatforms } from './utils/platform'; export { isPlatform, Platforms, getPlatforms } from './utils/platform';
export { IonicSafeString } from './utils/sanitization';
export * from './utils/config'; export * from './utils/config';
export * from './components/nav/constants'; export * from './components/nav/constants';

5
core/src/utils/config.ts
View File

@ -175,6 +175,11 @@ export interface IonicConfig {
*/ */
experimentalTransitionShadow?: boolean; experimentalTransitionShadow?: boolean;
/**
* If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML.
*/
sanitizerEnabled?: boolean;
// PRIVATE configs // PRIVATE configs
keyboardHeight?: number; keyboardHeight?: number;
inputShims?: boolean; inputShims?: boolean;

22
core/src/utils/sanitization/index.ts
View File

@ -3,9 +3,10 @@
* in an untrusted string * in an untrusted string
*/ */
export const sanitizeDOMString = (untrustedString: string | undefined): string | undefined => { export const sanitizeDOMString = (untrustedString: IonicSafeString | string | undefined): string | undefined => {
try { try {
if (typeof untrustedString !== 'string' || untrustedString === '') { return untrustedString; } if (untrustedString instanceof IonicSafeString) { return untrustedString.value; }
if (!isSanitizerEnabled() || typeof untrustedString !== 'string' || untrustedString === '') { return untrustedString; }
/** /**
* Create a document fragment * Create a document fragment
@ -122,5 +123,22 @@ const getElementChildren = (el: any) => {
return (el.children != null) ? el.children : el.childNodes; return (el.children != null) ? el.children : el.childNodes;
}; };
const isSanitizerEnabled = (): boolean => {
const win = window as any;
const config = win && win.Ionic && win.Ionic.config;
if (config) {
if (config.get) {
return config.get('sanitizerEnabled', true);
} else {
return config.sanitizerEnabled === true || config.sanitizerEnabled === undefined;
}
}
return true;
};
const allowedAttributes = ['class', 'id', 'href', 'src', 'name', 'slot']; const allowedAttributes = ['class', 'id', 'href', 'src', 'name', 'slot'];
const blockedTags = ['script', 'style', 'iframe', 'meta', 'link', 'object', 'embed']; const blockedTags = ['script', 'style', 'iframe', 'meta', 'link', 'object', 'embed'];
export class IonicSafeString {
constructor(public value: string) {}
}

18
core/src/utils/sanitization/test/sanitization.spec.ts
View File

@ -1,6 +1,16 @@
import { sanitizeDOMString } from ".."; import { IonicSafeString, sanitizeDOMString } from "..";
describe('sanitizeDOMString', () => { describe('sanitizeDOMString', () => {
it('disable sanitizer', () => {
enableSanitizer(false);
expect(sanitizeDOMString('<img src="x" onerror="alert(document.cookie);">'))
.toEqual('<img src="x" onerror="alert(document.cookie);">');
})
it('bypass sanitizer', () => {
expect(sanitizeDOMString(new IonicSafeString('<img src="x" onerror="alert(document.cookie);">')))
.toEqual('<img src="x" onerror="alert(document.cookie);">');
});
it('filter onerror', () => { it('filter onerror', () => {
expect(sanitizeDOMString('<img src="x" onerror="alert(document.cookie);">')) expect(sanitizeDOMString('<img src="x" onerror="alert(document.cookie);">'))
@ -42,3 +52,9 @@ describe('sanitizeDOMString', () => {
.toEqual('<ion-item><ion-label>Hello!</ion-label><ion-button>Click me</ion-button></ion-item>'); .toEqual('<ion-item><ion-label>Hello!</ion-label><ion-button>Click me</ion-button></ion-item>');
}); });
}); });
const enableSanitizer = (enable: boolean = true) => {
window.Ionic = {};
window.Ionic.config = {};
window.Ionic.config.sanitizerEnabled = enable;
}

2
packages/react/src/components/index.ts
View File

@ -2,7 +2,7 @@
import { defineCustomElements } from '@ionic/core/loader'; import { defineCustomElements } from '@ionic/core/loader';
import { addIcons } from 'ionicons'; import { addIcons } from 'ionicons';
import { arrowBackSharp, caretBackSharp, chevronBack, chevronForward, close, closeCircle, closeSharp, menuOutline, menuSharp, reorderThreeOutline, reorderTwoSharp, searchOutline, searchSharp } from 'ionicons/icons'; import { arrowBackSharp, caretBackSharp, chevronBack, chevronForward, close, closeCircle, closeSharp, menuOutline, menuSharp, reorderThreeOutline, reorderTwoSharp, searchOutline, searchSharp } from 'ionicons/icons';
export { createAnimation, createGesture, AlertButton, AlertInput, Gesture, GestureConfig, GestureDetail, mdTransitionAnimation, iosTransitionAnimation, setupConfig } from '@ionic/core'; export { createAnimation, createGesture, AlertButton, AlertInput, Gesture, GestureConfig, GestureDetail, iosTransitionAnimation, IonicSafeString, mdTransitionAnimation, setupConfig } from '@ionic/core';
export * from './proxies'; export * from './proxies';
// createControllerComponent // createControllerComponent