tsai
/
squidex
mirror of https://github.com/Squidex/squidex.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Configure accepted iframe message origins.

pull/1039/head
Sebastian 3 years ago
parent
fb789f7415
commit
9b7d5dce1f
2 changed files with 129 additions and 96 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      backend/src/Squidex/wwwroot/scripts/editor-sdk.d.ts
  2. 171
      backend/src/Squidex/wwwroot/scripts/editor-sdk.js

54
backend/src/Squidex/wwwroot/scripts/editor-sdk.d.ts
View File

@ -1,3 +1,10 @@
type PluginOptions = {
/**
* Defines the accepted origins for incoming messages.
*/
acceptedOrigins?: string[];
}
declare class EditorPlugin { declare class EditorPlugin {
/** /**
* Get the current context. * Get the current context.
@ -12,14 +19,14 @@ declare class EditorPlugin {
/** /**
* Register an function that is called when the sidebar is initialized. * Register an function that is called when the sidebar is initialized.
* *
* @param {Function} callback: The callback to invoke. * @param callback: The callback to invoke.
*/ */
onInit(callback: () => void): void; onInit(callback: () => void): void;
/** /**
* Register an function that is called whenever the value of the content has changed. * Register an function that is called whenever the value of the content has changed.
* *
* @param {Function} callback: The callback to invoke. Argument 1: Content value (any). * @param callback: The callback to invoke. Argument 1: Content value (any).
*/ */
onContentChanged(callback: (content: any) => void): void; onContentChanged(callback: (content: any) => void): void;
@ -30,6 +37,13 @@ declare class EditorPlugin {
} }
declare class SquidexFormField { declare class SquidexFormField {
/**
* The constructor.
*
* @param options: The plugin options.
*/
constructor(options?: PluginOptions);
/** /**
* Get the current value. * Get the current value.
*/ */
@ -77,7 +91,7 @@ declare class SquidexFormField {
/** /**
* Notifies the parent to navigate to the path. * Notifies the parent to navigate to the path.
* *
* @param {string} url: The url to navigate to. * @param url: The url to navigate to.
*/ */
navigate(url: string): void; navigate(url: string): void;
@ -94,101 +108,101 @@ declare class SquidexFormField {
/** /**
* Notifies the control container that the value has been changed. * Notifies the control container that the value has been changed.
* *
* @param {any} newValue: The new field value. * @param newValue: The new field value.
*/ */
valueChanged(newValue: any): void; valueChanged(newValue: any): void;
/** /**
* Shows an info alert. * Shows an info alert.
* *
* @param {string} text: The info text. * @param text: The info text.
*/ */
notifyInfo(text: string): void; notifyInfo(text: string): void;
/** /**
* Shows an error alert. * Shows an error alert.
* *
* @param {string} text: error info text. * @param text: error info text.
*/ */
notifyError(text: string): void; notifyError(text: string): void;
/** /**
* Shows an confirm dialog. * Shows an confirm dialog.
* *
* @param {string} title The title of the dialog. * @param title The title of the dialog.
* @param {string} text The text of the dialog. * @param text The text of the dialog.
* @param {function} callback The callback to invoke when the dialog is completed or closed. * @param callback The callback to invoke when the dialog is completed or closed.
*/ */
confirm(title: string, text: string, callback: (result: boolean) => void): void; confirm(title: string, text: string, callback: (result: boolean) => void): void;
/** /**
* Shows the dialog to pick assets. * Shows the dialog to pick assets.
* *
* @param {function} callback The callback to invoke when the dialog is completed or closed. * @param callback The callback to invoke when the dialog is completed or closed.
*/ */
pickAssets(callback: (assets: any[]) => void): void; pickAssets(callback: (assets: any[]) => void): void;
/** /**
* Shows the dialog to pick contents. * Shows the dialog to pick contents.
* *
* @param {string} schemas: The list of schema names. * @param schemas: The list of schema names.
* @param {function} callback The callback to invoke when the dialog is completed or closed. * @param callback The callback to invoke when the dialog is completed or closed.
*/ */
pickContents(schemas: string[], callback: (assets: any[]) => void): void; pickContents(schemas: string[], callback: (assets: any[]) => void): void;
/** /**
* Register an function that is called when the field is initialized. * Register an function that is called when the field is initialized.
* *
* @param {Function} callback: The callback to invoke. * @param callback: The callback to invoke.
*/ */
onInit(callback: () => void): void; onInit(callback: () => void): void;
/** /**
* Register an function that is called when the field is moved. * Register an function that is called when the field is moved.
* *
* @param {Function} callback: The callback to invoke. Argument 1: New position (number). * @param callback: The callback to invoke. Argument 1: New position (number).
*/ */
onMoved(callback: (index: number) => void): void; onMoved(callback: (index: number) => void): void;
/** /**
* Register an function that is called whenever the field is disabled or enabled. * Register an function that is called whenever the field is disabled or enabled.
* *
* @param {Function} callback: The callback to invoke. Argument 1: New disabled state (boolean, disabled = true, enabled = false). * @param callback: The callback to invoke. Argument 1: New disabled state (boolean, disabled = true, enabled = false).
*/ */
onDisabled(callback: (isDisabled: boolean) => void): void; onDisabled(callback: (isDisabled: boolean) => void): void;
/** /**
* Register an function that is called whenever the field language is changed. * Register an function that is called whenever the field language is changed.
* *
* @param {Function} callback: The callback to invoke. Argument 1: Language code (string). * @param callback: The callback to invoke. Argument 1: Language code (string).
*/ */
onLanguageChanged(callback: (language: string) => void): void; onLanguageChanged(callback: (language: string) => void): void;
/** /**
* Register an function that is called whenever the value of the field has changed. * Register an function that is called whenever the value of the field has changed.
* *
* @param {Function} callback: The callback to invoke. Argument 1: Field value (any). * @param callback: The callback to invoke. Argument 1: Field value (any).
*/ */
onValueChanged(callback: (value: any) => void): void; onValueChanged(callback: (value: any) => void): void;
/** /**
* Register an function that is called whenever the value of the content has changed. * Register an function that is called whenever the value of the content has changed.
* *
* @param {Function} callback: The callback to invoke. Argument 1: Content value (any). * @param callback: The callback to invoke. Argument 1: Content value (any).
*/ */
onFormValueChanged(callback: (value: any) => void): void; onFormValueChanged(callback: (value: any) => void): void;
/** /**
* Register an function that is called whenever the fullscreen mode has changed. * Register an function that is called whenever the fullscreen mode has changed.
* *
* @param {Function} callback: The callback to invoke. Argument 1: Fullscreen state (boolean, fullscreen on = true, fullscreen off = false). * @param callback: The callback to invoke. Argument 1: Fullscreen state (boolean, fullscreen on = true, fullscreen off = false).
*/ */
onFullscreen(callback: (isFullscreen: boolean) => void): void; onFullscreen(callback: (isFullscreen: boolean) => void): void;
/** /**
* Register an function that is called whenever the expanded mode has changed. * Register an function that is called whenever the expanded mode has changed.
* *
* @param {Function} callback: The callback to invoke. Argument 1: Expanded state (boolean, expanded on = true, expanded off = false). * @param callback: The callback to invoke. Argument 1: Expanded state (boolean, expanded on = true, expanded off = false).
*/ */
onExpanded(callback: (isExpanded: boolean) => void): void; onExpanded(callback: (isExpanded: boolean) => void): void;

171
backend/src/Squidex/wwwroot/scripts/editor-sdk.js
View File

@ -53,13 +53,19 @@ function isArrayOfStrings(value) {
return true; return true;
} }
function SquidexPlugin() { /**
* Creates a new plugin for sidebars or widgets.
*
* @param {object} options with the accepted origins.
*/
function SquidexPlugin(options) {
var initHandler; var initHandler;
var initCalled = false; var initCalled = false;
var contentHandler; var contentHandler;
var content; var content;
var context; var context;
var timer; var timer;
var acceptedOrigins = options && isArrayOfStrings(options.acceptedOrigins) ? options.acceptedOrigins : null;
function raiseContentChanged() { function raiseContentChanged() {
if (contentHandler && content) { if (contentHandler && content) {
@ -75,18 +81,24 @@ function SquidexPlugin() {
} }
function eventListener(event) { function eventListener(event) {
if (event.source !== window) { if (acceptedOrigins && acceptedOrigins.indexOf(event.origin) < 0) {
var type = event.data.type; return;
}
if (type === 'contentChanged') {
content = event.data.content;
raiseContentChanged(); if (event.source === window) {
} else if (type === 'init') { return;
context = event.data.context; }
raiseInit(); var type = event.data.type;
}
if (type === 'contentChanged') {
content = event.data.content;
raiseContentChanged();
} else if (type === 'init') {
context = event.data.context;
raiseInit();
} }
} }
@ -114,7 +126,7 @@ function SquidexPlugin() {
/** /**
* Register an function that is called when the sidebar is initialized. * Register an function that is called when the sidebar is initialized.
* *
* @param {Function} callback: The callback to invoke. * @param {function} callback: The callback to invoke.
*/ */
onInit: function (callback) { onInit: function (callback) {
if (!isFunction(callback)) { if (!isFunction(callback)) {
@ -129,7 +141,7 @@ function SquidexPlugin() {
/** /**
* Register an function that is called whenever the value of the content has changed. * Register an function that is called whenever the value of the content has changed.
* *
* @param {Function} callback: The callback to invoke. Argument 1: Content value (any). * @param {function} callback: The callback to invoke. Argument 1: Content value (any).
*/ */
onContentChanged: function (callback) { onContentChanged: function (callback) {
if (!isFunction(callback)) { if (!isFunction(callback)) {
@ -156,7 +168,7 @@ function SquidexPlugin() {
return editor; return editor;
} }
function SquidexFormField() { function SquidexFormField(options) {
var context; var context;
var currentConfirm; var currentConfirm;
var currentPickAssets; var currentPickAssets;
@ -178,6 +190,7 @@ function SquidexFormField() {
var timer; var timer;
var value; var value;
var valueHandler; var valueHandler;
var acceptedOrigins = options && isArrayOfStrings(options.acceptedOrigins) ? options.acceptedOrigins : null;
function raiseDisabled() { function raiseDisabled() {
if (disabledHandler) { if (disabledHandler) {
@ -229,81 +242,87 @@ function SquidexFormField() {
} }
function eventListener(event) { function eventListener(event) {
if (event.source !== window) { if (acceptedOrigins && acceptedOrigins.indexOf(event.origin) < 0) {
var type = event.data.type; return;
}
console.log('Received Message: ' + type); if (event.source === window) {
return;
}
var type = event.data.type;
if (type === 'disabled') { if (type === 'disabled') {
var newDisabled = event.data.isDisabled; var newDisabled = event.data.isDisabled;
if (disabled !== newDisabled) { if (disabled !== newDisabled) {
disabled = newDisabled; disabled = newDisabled;
raiseDisabled(); raiseDisabled();
} }
} else if (type === 'moved') { } else if (type === 'moved') {
var newIndex = event.data.index; var newIndex = event.data.index;
if (index !== newIndex) { if (index !== newIndex) {
index = newIndex; index = newIndex;
raisedMoved(); raisedMoved();
} }
} else if (type === 'languageChanged') { } else if (type === 'languageChanged') {
var newLanguage = event.data.language; var newLanguage = event.data.language;
if (language !== newLanguage) { if (language !== newLanguage) {
language = newLanguage; language = newLanguage;
raiseLanguageChanged(); raiseLanguageChanged();
} }
} else if (type === 'valueChanged') { } else if (type === 'valueChanged') {
value = event.data.value; value = event.data.value;
raiseValueChanged(); raiseValueChanged();
} else if (type === 'formValueChanged') { } else if (type === 'formValueChanged') {
formValue = event.data.formValue; formValue = event.data.formValue;
raiseFormValueChanged(); raiseFormValueChanged();
} else if (type === 'fullscreenChanged') { } else if (type === 'fullscreenChanged') {
fullscreen = event.data.fullscreen; fullscreen = event.data.fullscreen;
raiseFullscreen(); raiseFullscreen();
} else if (type === 'expandedChanged') { } else if (type === 'expandedChanged') {
expanded = event.data.expanded; expanded = event.data.expanded;
raiseExpanded(); raiseExpanded();
} else if (type === 'init') { } else if (type === 'init') {
context = event.data.context; context = event.data.context;
raiseInit(); raiseInit();
} else if (type === 'confirmResult') { } else if (type === 'confirmResult') {
var correlationId = event.data.correlationId; var correlationId = event.data.correlationId;
if (currentConfirm && currentConfirm.correlationId === correlationId) { if (currentConfirm && currentConfirm.correlationId === correlationId) {
if (typeof currentConfirm.callback === 'function') { if (typeof currentConfirm.callback === 'function') {
currentConfirm.callback(event.data.result); currentConfirm.callback(event.data.result);
}
} }
} else if (type === 'pickAssetsResult') { }
var correlationId = event.data.correlationId; } else if (type === 'pickAssetsResult') {
var correlationId = event.data.correlationId;
if (currentPickAssets && currentPickAssets.correlationId === correlationId) { if (currentPickAssets && currentPickAssets.correlationId === correlationId) {
if (typeof currentPickAssets.callback === 'function') { if (typeof currentPickAssets.callback === 'function') {
currentPickAssets.callback(event.data.result); currentPickAssets.callback(event.data.result);
}
} }
} else if (type === 'pickContentsResult') { }
var correlationId = event.data.correlationId; } else if (type === 'pickContentsResult') {
var correlationId = event.data.correlationId;
if (currentPickContents && currentPickContents.correlationId === correlationId) { if (currentPickContents && currentPickContents.correlationId === correlationId) {
if (typeof currentPickContents.callback === 'function') { if (typeof currentPickContents.callback === 'function') {
currentPickContents.callback(event.data.result); currentPickContents.callback(event.data.result);
}
} }
} }
} }
console.log('Received Message: ' + type);
} }
window.addEventListener('message', eventListener, false); window.addEventListener('message', eventListener, false);
@ -512,7 +531,7 @@ function SquidexFormField() {
/** /**
* Register an function that is called when the field is initialized. * Register an function that is called when the field is initialized.
* *
* @param {Function} callback: The callback to invoke. * @param {function} callback: The callback to invoke.
*/ */
onInit: function (callback) { onInit: function (callback) {
if (!isFunction(callback)) { if (!isFunction(callback)) {
@ -527,7 +546,7 @@ function SquidexFormField() {
/** /**
* Register an function that is called when the field is moved. * Register an function that is called when the field is moved.
* *
* @param {Function} callback: The callback to invoke. Argument 1: New position (number). * @param {function} callback: The callback to invoke. Argument 1: New position (number).
*/ */
onMoved: function (callback) { onMoved: function (callback) {
if (!isFunction(callback)) { if (!isFunction(callback)) {
@ -542,7 +561,7 @@ function SquidexFormField() {
/** /**
* Register an function that is called whenever the field is disabled or enabled. * Register an function that is called whenever the field is disabled or enabled.
* *
* @param {Function} callback: The callback to invoke. Argument 1: New disabled state (boolean, disabled = true, enabled = false). * @param {function} callback: The callback to invoke. Argument 1: New disabled state (boolean, disabled = true, enabled = false).
*/ */
onDisabled: function (callback) { onDisabled: function (callback) {
if (!isFunction(callback)) { if (!isFunction(callback)) {
@ -557,7 +576,7 @@ function SquidexFormField() {
/** /**
* Register an function that is called whenever the field language is changed. * Register an function that is called whenever the field language is changed.
* *
* @param {Function} callback: The callback to invoke. Argument 1: Language code (string). * @param {function} callback: The callback to invoke. Argument 1: Language code (string).
*/ */
onLanguageChanged: function (callback) { onLanguageChanged: function (callback) {
if (!isFunction(callback)) { if (!isFunction(callback)) {
@ -572,7 +591,7 @@ function SquidexFormField() {
/** /**
* Register an function that is called whenever the value of the field has changed. * Register an function that is called whenever the value of the field has changed.
* *
* @param {Function} callback: The callback to invoke. Argument 1: Field value (any). * @param {function} callback: The callback to invoke. Argument 1: Field value (any).
*/ */
onValueChanged: function (callback) { onValueChanged: function (callback) {
if (!isFunction(callback)) { if (!isFunction(callback)) {
@ -587,7 +606,7 @@ function SquidexFormField() {
/** /**
* Register an function that is called whenever the value of the content has changed. * Register an function that is called whenever the value of the content has changed.
* *
* @param {Function} callback: The callback to invoke. Argument 1: Content value (any). * @param {function} callback: The callback to invoke. Argument 1: Content value (any).
*/ */
onFormValueChanged: function (callback) { onFormValueChanged: function (callback) {
if (!isFunction(callback)) { if (!isFunction(callback)) {
@ -602,7 +621,7 @@ function SquidexFormField() {
/** /**
* Register an function that is called whenever the fullscreen mode has changed. * Register an function that is called whenever the fullscreen mode has changed.
* *
* @param {Function} callback: The callback to invoke. Argument 1: Fullscreen state (boolean, fullscreen on = true, fullscreen off = false). * @param {function} callback: The callback to invoke. Argument 1: Fullscreen state (boolean, fullscreen on = true, fullscreen off = false).
*/ */
onFullscreen: function (callback) { onFullscreen: function (callback) {
if (!isFunction(callback)) { if (!isFunction(callback)) {
@ -617,7 +636,7 @@ function SquidexFormField() {
/** /**
* Register an function that is called whenever the expanded mode has changed. * Register an function that is called whenever the expanded mode has changed.
* *
* @param {Function} callback: The callback to invoke. Argument 1: Expanded state (boolean, expanded on = true, expanded off = false). * @param {function} callback: The callback to invoke. Argument 1: Expanded state (boolean, expanded on = true, expanded off = false).
*/ */
onExpanded: function (callback) { onExpanded: function (callback) {
if (!isFunction(callback)) { if (!isFunction(callback)) {

Write Preview
Loading…
Cancel
Save