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
export { IonicModule } from './ionic-module';
// UTILS
export { IonicSafeString } from '@ionic/core';
// CORE TYPES
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,keyboardClose,boolean,true,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,subHeader,string | undefined,undefined,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,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,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,keyboardClose,boolean,true,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,showBackdrop,boolean,true,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,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,refreshingText,string | undefined,undefined,false,false
ion-refresher-content,prop,refreshingText,IonicSafeString | string | undefined,undefined,false,false
ion-reorder,shadow
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,keyboardClose,boolean,false,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,position,"bottom" | "middle" | "top",'bottom',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 { 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";
export namespace Components {
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)
*/
"message"?: string;
"message"?: string | IonicSafeString;
/**
* 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)
*/
"loadingText"?: string;
"loadingText"?: string | IonicSafeString;
}
interface IonInput {
/**
@ -1150,7 +1151,7 @@ export namespace Components {
/**
* Optional text content to display in the loading indicator.
*/
"message"?: string;
"message"?: string | IonicSafeString;
/**
* 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)
*/
"pullingText"?: string;
"pullingText"?: string | IonicSafeString;
/**
* 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)
*/
"refreshingText"?: string;
"refreshingText"?: string | IonicSafeString;
}
interface IonReorder {
}
@ -2501,7 +2502,7 @@ export namespace Components {
/**
* Message to be shown in the toast.
*/
"message"?: string;
"message"?: string | IonicSafeString;
/**
* 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)
*/
"message"?: string;
"message"?: string | IonicSafeString;
/**
* 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)
*/
"loadingText"?: string;
"loadingText"?: string | IonicSafeString;
}
interface IonInput {
/**
@ -4402,7 +4403,7 @@ declare namespace LocalJSX {
/**
* Optional text content to display in the loading indicator.
*/
"message"?: string;
"message"?: string | IonicSafeString;
/**
* 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)
*/
"pullingText"?: string;
"pullingText"?: string | IonicSafeString;
/**
* 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)
*/
"refreshingText"?: string;
"refreshingText"?: string | IonicSafeString;
}
interface IonReorder {
}
@ -5684,7 +5685,7 @@ declare namespace LocalJSX {
/**
* Message to be shown in the toast.
*/
"message"?: string;
"message"?: string | IonicSafeString;
/**
* 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';
export interface AlertOptions {
header?: string;
subHeader?: string;
message?: string;
message?: string | IonicSafeString;
cssClass?: string | string[];
inputs?: AlertInput[];
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 { IonicSafeString } from '../../';
import { getIonMode } from '../../global/ionic-global';
import { AlertButton, AlertInput, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
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)
*/
@Prop() message?: string;
@Prop() message?: string | IonicSafeString;
/**
* 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[]` | `[]` |
| `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` |
| `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` |
| `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` |

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 { IonicSafeString } from '../../';
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
import { SpinnerTypes } from '../../interface';
@ -28,7 +29,7 @@ export class InfiniteScrollContent implements ComponentInterface {
*
* For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
*/
@Prop() loadingText?: string;
@Prop() loadingText?: string | IonicSafeString;
componentDidLoad() {
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 |
| ---------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- |
| `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

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

@ -1,8 +1,9 @@
import { IonicSafeString } from '../../';
import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';
export interface LoadingOptions {
spinner?: SpinnerTypes | null;
message?: string;
message?: string | IonicSafeString;
cssClass?: string | string[];
showBackdrop?: boolean;
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 { IonicSafeString } from '../../';
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
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.
*/
@Prop() message?: string;
@Prop() message?: string | IonicSafeString;
/**
* 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` |
| `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` |
| `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` |
| `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` |

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 |
| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- |
| `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` |
| `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

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 { IonicSafeString } from '../../';
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
import { SpinnerTypes } from '../../interface';
@ -30,7 +31,7 @@ export class RefresherContent implements ComponentInterface {
*
* 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
@ -46,7 +47,7 @@ export class RefresherContent implements ComponentInterface {
*
* For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
*/
@Prop() refreshingText?: string;
@Prop() refreshingText?: string | IonicSafeString;
componentWillLoad() {
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` |
| `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` |
| `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` |
| `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` |

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

@ -1,8 +1,9 @@
import { IonicSafeString } from '../../';
import { AnimationBuilder, Color, Mode } from '../../interface';
export interface ToastOptions {
header?: string;
message?: string;
message?: string | IonicSafeString;
cssClass?: string | string[];
duration?: number;
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 { IonicSafeString } from '../../';
import { getIonMode } from '../../global/ionic-global';
import { AnimationBuilder, Color, CssClassMap, OverlayEventDetail, OverlayInterface, ToastButton } from '../../interface';
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.
*/
@Prop() message?: string;
@Prop() message?: string | IonicSafeString;
/**
* 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 { createGesture } from './utils/gesture';
export { isPlatform, Platforms, getPlatforms } from './utils/platform';
export { IonicSafeString } from './utils/sanitization';
export * from './utils/config';
export * from './components/nav/constants';

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

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

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

@ -3,9 +3,10 @@
* in an untrusted string
*/
export const sanitizeDOMString = (untrustedString: string | undefined): string | undefined => {
export const sanitizeDOMString = (untrustedString: IonicSafeString | string | undefined): string | undefined => {
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
@ -122,5 +123,22 @@ const getElementChildren = (el: any) => {
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 blockedTags = ['script', 'style', 'iframe', 'meta', 'link', 'object', 'embed'];
export class IonicSafeString {
constructor(public value: string) {}
}

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

@ -1,6 +1,16 @@
import { sanitizeDOMString } from "..";
import { IonicSafeString, sanitizeDOMString } from "..";
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', () => {
expect(sanitizeDOMString('<img src="x" onerror="alert(document.cookie);">'))
@ -41,4 +51,10 @@ describe('sanitizeDOMString', () => {
expect(sanitizeDOMString('<ion-item><ion-label>Hello!</ion-label><ion-button onclick="alert(document.cookie);">Click me</ion-button>'))
.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 { addIcons } from 'ionicons';
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';
// createControllerComponent