PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Add postmessage api and move functions in to class

Browse source
This commit is contained in:
Richard Lewis 2017-12-15 15:24:22 +00:00
parent f410112983
commit c234e209fb
2 changed files with 286 additions and 163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
src/MatrixPostMessageApi.js Normal file
View file

@ -0,0 +1,101 @@
import Promise from "bluebird";
function defer() {
let resolve, reject;
let isPending = true;
let promise = new Promise(function(...args) {
resolve = args[0];
reject = args[1];
});
return {
resolve: function(...args) {
if (!isPending) {
return;
}
isPending = false;
resolve(args[0]);
},
reject: function(...args) {
if (!isPending) {
return;
}
isPending = false;
reject(args[0]);
},
isPending: function() {
return isPending;
},
promise: promise,
};
}
// NOTE: PostMessageApi only handles message events with a data payload with a
// response field
export default class PostMessageApi {
constructor(targetWindow, timeoutMs) {
this._window = targetWindow || window.parent; // default to parent window
this._timeoutMs = timeoutMs || 5000; // default to 5s timer
this._counter = 0;
this._pending = {
// $ID: Deferred
};
}
start() {
addEventListener('message', this.getOnMessageCallback());
}
stop() {
removeEventListener('message', this.getOnMessageCallback());
}
// Somewhat convoluted so we can successfully capture the PostMessageApi 'this' instance.
getOnMessageCallback() {
if (this._onMsgCallback) {
return this._onMsgCallback;
}
let self = this;
this._onMsgCallback = function(ev) {
// THIS IS ALL UNSAFE EXECUTION.
// We do not verify who the sender of `ev` is!
let payload = ev.data;
// NOTE: Workaround for running in a mobile WebView where a
// postMessage immediately triggers this callback even though it is
// not the response.
if (payload.response === undefined) {
return;
}
let deferred = self._pending[payload._id];
if (!deferred) {
return;
}
if (!deferred.isPending()) {
return;
}
delete self._pending[payload._id];
deferred.resolve(payload);
};
return this._onMsgCallback;
}
exec(action, target) {
this._counter += 1;
target = target || "*";
action._id = Date.now() + "-" + Math.random().toString(36) + "-" + this._counter;
let d = defer();
this._pending[action._id] = d;
this._window.postMessage(action, target);
if (this._timeoutMs > 0) {
setTimeout(function() {
if (!d.isPending()) {
return;
}
console.error("postMessage request timed out. Sent object: " + JSON.stringify(action));
d.reject(new Error("Timed out"));
}, this._timeoutMs);
}
return d.promise;
}
}

102
src/WidgetMessaging.js
View file

@ -112,14 +112,14 @@ Example:
*/
import URL from 'url';
import dis from './dispatcher';
import MatrixPostMessageApi from './MatrixPostMessageApi';
const WIDGET_API_VERSION = '0.0.1'; // Current API version
const SUPPORTED_WIDGET_API_VERSIONS = [
'0.0.1',
];
import dis from './dispatcher';
if (!global.mxWidgetMessagingListenerCount) {
global.mxWidgetMessagingListenerCount = 0;
}
@ -127,24 +127,50 @@ if (!global.mxWidgetMessagingMessageEndpoints) {
global.mxWidgetMessagingMessageEndpoints = [];
}
export default class WidgetMessaging extends MatrixPostMessageApi {
constructor(targetWindow) {
super(targetWindow);
}
/**
exec(action) {
return super.exec(action).then((data) => {
// check for errors and reject if found
if (data.response === undefined) { // null is valid
throw new Error("Missing 'response' field");
}
if (data.response && data.response.error) {
const err = data.response.error;
const msg = String(err.message ? err.message : "An error was returned");
if (err._error) {
console.error(err._error);
}
// Potential XSS attack if 'msg' is not appropriately sanitized,
// as it is untrusted input by our parent window (which we assume is Riot).
// We can't aggressively sanitize [A-z0-9] since it might be a translation.
throw new Error(msg);
}
// return the response field for the request
return data.response;
});
}
/**
* Register widget message event listeners
*/
function startListening() {
startListening() {
if (global.mxWidgetMessagingListenerCount === 0) {
window.addEventListener("message", onMessage, false);
window.addEventListener("message", this.onMessage, false);
}
global.mxWidgetMessagingListenerCount += 1;
}
}
/**
/**
* De-register widget message event listeners
*/
function stopListening() {
stopListening() {
global.mxWidgetMessagingListenerCount -= 1;
if (global.mxWidgetMessagingListenerCount === 0) {
window.removeEventListener("message", onMessage);
window.removeEventListener("message", this.onMessage);
}
if (global.mxWidgetMessagingListenerCount < 0) {
// Make an error so we get a stack trace
@ -154,14 +180,14 @@ function stopListening() {
);
console.error(e);
}
}
}
/**
/**
* Register a widget endpoint for trusted postMessage communication
* @param {string} widgetId Unique widget identifier
* @param {string} endpointUrl Widget wurl origin (protocol + (optional port) + host)
*/
function addEndpoint(widgetId, endpointUrl) {
addEndpoint(widgetId, endpointUrl) {
const u = URL.parse(endpointUrl);
if (!u || !u.protocol || !u.host) {
console.warn("Invalid origin:", endpointUrl);
@ -180,15 +206,15 @@ function addEndpoint(widgetId, endpointUrl) {
}
global.mxWidgetMessagingMessageEndpoints.push(endpoint);
}
}
}
/**
/**
* De-register a widget endpoint from trusted communication sources
* @param {string} widgetId Unique widget identifier
* @param {string} endpointUrl Widget wurl origin (protocol + (optional port) + host)
* @return {boolean} True if endpoint was successfully removed
*/
function removeEndpoint(widgetId, endpointUrl) {
removeEndpoint(widgetId, endpointUrl) {
const u = URL.parse(endpointUrl);
if (!u || !u.protocol || !u.host) {
console.warn("Invalid origin");
@ -198,21 +224,22 @@ function removeEndpoint(widgetId, endpointUrl) {
const origin = u.protocol + '//' + u.host;
if (global.mxWidgetMessagingMessageEndpoints && global.mxWidgetMessagingMessageEndpoints.length > 0) {
const length = global.mxWidgetMessagingMessageEndpoints.length;
global.mxWidgetMessagingMessageEndpoints = global.mxWidgetMessagingMessageEndpoints.filter(function(endpoint) {
global.mxWidgetMessagingMessageEndpoints = global.mxWidgetMessagingMessageEndpoints.
filter(function(endpoint) {
return (endpoint.widgetId != widgetId || endpoint.endpointUrl != origin);
});
return (length > global.mxWidgetMessagingMessageEndpoints.length);
}
return false;
}
}
/**
/**
* Handle widget postMessage events
* @param {Event} event Event to handle
* @return {undefined}
*/
function onMessage(event) {
onMessage(event) {
if (!event.origin) { // Handle chrome
event.origin = event.originalEvent.origin;
}
@ -220,7 +247,7 @@ function onMessage(event) {
// Event origin is empty string if undefined
if (
event.origin.length === 0 ||
!trustedEndpoint(event.origin) ||
!this.trustedEndpoint(event.origin) ||
event.data.api !== "widget" ||
!event.data.widgetId
) {
@ -234,29 +261,29 @@ function onMessage(event) {
action: 'widget_content_loaded',
widgetId: widgetId,
});
sendResponse(event, {success: true});
this.sendResponse(event, {success: true});
} else if (action === 'supported_api_versions') {
sendResponse(event, {
this.sendResponse(event, {
api: "widget",
supported_versions: SUPPORTED_WIDGET_API_VERSIONS,
});
} else if (action === 'api_version') {
sendResponse(event, {
this.sendResponse(event, {
api: "widget",
version: WIDGET_API_VERSION,
});
} else {
console.warn("Widget postMessage event unhandled");
sendError(event, {message: "The postMessage was unhandled"});
this.sendError(event, {message: "The postMessage was unhandled"});
}
}
}
/**
/**
* Check if message origin is registered as trusted
* @param {string} origin PostMessage origin to check
* @return {boolean} True if trusted
*/
function trustedEndpoint(origin) {
trustedEndpoint(origin) {
if (!origin) {
return false;
}
@ -264,26 +291,26 @@ function trustedEndpoint(origin) {
return global.mxWidgetMessagingMessageEndpoints.some((endpoint) => {
return endpoint.endpointUrl === origin;
});
}
}
/**
/**
* Send a postmessage response to a postMessage request
* @param {Event} event The original postMessage request event
* @param {Object} res Response data
*/
function sendResponse(event, res) {
sendResponse(event, res) {
const data = JSON.parse(JSON.stringify(event.data));
data.response = res;
event.source.postMessage(data, event.origin);
}
}
/**
/**
* Send an error response to a postMessage request
* @param {Event} event The original postMessage request event
* @param {string} msg Error message
* @param {Error} nestedError Nested error event (optional)
*/
function sendError(event, msg, nestedError) {
sendError(event, msg, nestedError) {
console.error("Action:" + event.data.action + " failed with message: " + msg);
const data = JSON.parse(JSON.stringify(event.data));
data.response = {
@ -295,8 +322,10 @@ function sendError(event, msg, nestedError) {
data.response.error._error = nestedError;
}
event.source.postMessage(data, event.origin);
}
}
/**
* Represents mapping of widget instance to URLs for trusted postMessage communication.
*/
@ -317,10 +346,3 @@ class WidgetMessageEndpoint {
this.endpointUrl = endpointUrl;
}
}
export default {
startListening: startListening,
stopListening: stopListening,
addEndpoint: addEndpoint,
removeEndpoint: removeEndpoint,
};