github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Critical privacy/data integrity fix: Move cross-domain capable message listener into own extension (ext-xdomain-messaging.js) and do not include by default (the extension now won't work anyways without an allowedOrigins config first being set (in config.js) for security reasons (and not via URL)); add allowedOrigins config and demo use in config-sample.js; JSLint; update embedapi.html to supply the xdomain extension in case running xdomain (again, allowedOrigins must be supplied in the local copy of config.js for this to work); modify embedapi.js to allow reuse of cross-domain API with same-domain usage, but without the intermediate JSON parsing which could lose some non-JSONable arguments or response.

Browse Source 
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@2714 eee81c28-f429-11dd-99c0-75d572ba1ddd
This commit is contained in:
Brett Zamir
2014-02-22 04:08:24 +00:00
parent bb75f34ec3
commit 1e2e6529d2
5 changed files with 181 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
editor/embedapi.js
View File

@@ -6,9 +6,9 @@ General usage:
- Initialize the magic with:
var svgCanvas = new EmbeddedSVGEdit(window.frames.svgedit);
- Pass functions in this format:
svgCanvas.setSvgString("string")
svgCanvas.setSvgString('string')
- Or if a callback is needed:
svgCanvas.setSvgString("string")(function(data, error){
svgCanvas.setSvgString('string')(function(data, error){
if (error){
// There was an error
} else{
@@ -22,7 +22,7 @@ and all documentation is unchanged.
However, this file depends on the postMessage API which
can only support JSON-serializable arguments and
return values, so, for example, arguments whose value is
"undefined", a function, a non-finite number, or a built-in
'undefined', a function, a non-finite number, or a built-in
object like Date(), RegExp(), etc. will most likely not behave
as expected. In such a case one may need to host
the SVG editor on the same domain and reference the
@@ -32,7 +32,7 @@ The only other difference is
when handling returns: the callback notation is used instead.
var blah = new EmbeddedSVGEdit(window.frames.svgedit);
blah.clearSelection("woot","blah",1337,[1,2,3,4,5,"moo"],-42,{a: "tree",b:6, c: 9})(function(){console.log("GET DATA",arguments)})
blah.clearSelection('woot', 'blah', 1337, [1, 2, 3, 4, 5, 'moo'], -42, {a: 'tree',b:6, c: 9})(function(){console.log('GET DATA',arguments)})
*/
(function () {'use strict';
@@ -40,7 +40,7 @@ blah.clearSelection("woot","blah",1337,[1,2,3,4,5,"moo"],-42,{a: "tree",b:6, c:
var cbid = 0;
function getCallbackSetter (d) {
return function(){
return function () {
var t = this, // New callback
args = [].slice.call(arguments),
cbid = t.send(d, args, function(){}); // The callback (currently it's nothing, but will be set later)
@@ -51,8 +51,44 @@ function getCallbackSetter (d) {
};
}
function EmbeddedSVGEdit(frame){
if (!(this instanceof EmbeddedSVGEdit)) { // Allow invocation without "new" keyword
/*
* Having this separate from messageListener allows us to
* avoid using JSON parsing (and its limitations) in the case
* of same domain control
*/
function addCallback (t, data) {
var result = data.result || data.error;
cbid = data.id;
if (t.callbacks[cbid]) {
if (data.result) {
t.callbacks[cbid](result);
} else {
t.callbacks[cbid](result, 'error');
}
}
}
function messageListener (e) {
// We accept and post strings as opposed to objets for the sake of IE9 support; this
// will most likely be changed in the future
if (typeof e.data !== 'string') {
return;
}
var data = e.data && JSON.parse(e.data);
if (!data || typeof data !== 'object' || data.namespace !== 'svg-edit') {
return;
}
addCallback(this, data);
}
function getMessageListener (t) {
return function (e) {
messageListener.call(t, e);
};
}
function EmbeddedSVGEdit (frame) {
if (!(this instanceof EmbeddedSVGEdit)) { // Allow invocation without 'new' keyword
return new EmbeddedSVGEdit(frame);
}
// Initialize communication
@@ -61,71 +97,75 @@ function EmbeddedSVGEdit(frame){
// List of functions extracted with this:
// Run in firebug on http://svg-edit.googlecode.com/svn/trunk/docs/files/svgcanvas-js.html
// for (var i=0,q=[],f = document.querySelectorAll("div.CFunction h3.CTitle a"); i < f.length; i++) { q.push(f[i].name); }; q
// var functions = ["clearSelection", "addToSelection", "removeFromSelection", "open", "save", "getSvgString", "setSvgString",
// "createLayer", "deleteCurrentLayer", "setCurrentLayer", "renameCurrentLayer", "setCurrentLayerPosition", "setLayerVisibility",
// "moveSelectedToLayer", "clear"];
// for (var i=0,q=[],f = document.querySelectorAll('div.CFunction h3.CTitle a'); i < f.length; i++) { q.push(f[i].name); }; q
// var functions = ['clearSelection', 'addToSelection', 'removeFromSelection', 'open', 'save', 'getSvgString', 'setSvgString',
// 'createLayer', 'deleteCurrentLayer', 'setCurrentLayer', 'renameCurrentLayer', 'setCurrentLayerPosition', 'setLayerVisibility',
// 'moveSelectedToLayer', 'clear'];
// Newer, well, it extracts things that aren't documented as well. All functions accessible through the normal thingy can now be accessed though the API
// var l = []; for (var i in svgCanvas){ if (typeof svgCanvas[i] == "function") { l.push(i);} };
// var l = []; for (var i in svgCanvas){ if (typeof svgCanvas[i] == 'function') { l.push(i);} };
// Run in svgedit itself
var i,
t = this,
functions = ["updateElementFromJson", "embedImage", "fixOperaXML", "clearSelection",
"addToSelection",
"removeFromSelection", "addNodeToSelection", "open", "save", "getSvgString", "setSvgString", "createLayer",
"deleteCurrentLayer", "getCurrentDrawing", "setCurrentLayer", "renameCurrentLayer", "setCurrentLayerPosition",
"setLayerVisibility", "moveSelectedToLayer", "clear", "clearPath", "getNodePoint", "clonePathNode", "deletePathNode",
"getResolution", "getImageTitle", "setImageTitle", "setResolution", "setBBoxZoom", "setZoom", "getMode", "setMode",
"getStrokeColor", "setStrokeColor", "getFillColor", "setFillColor", "setStrokePaint", "setFillPaint", "getStrokeWidth",
"setStrokeWidth", "getStrokeStyle", "setStrokeStyle", "getOpacity", "setOpacity", "getFillOpacity", "setFillOpacity",
"getStrokeOpacity", "setStrokeOpacity", "getTransformList", "getBBox", "getRotationAngle", "setRotationAngle", "each",
"bind", "setIdPrefix", "getBold", "setBold", "getItalic", "setItalic", "getFontFamily", "setFontFamily", "getFontSize",
"setFontSize", "getText", "setTextContent", "setImageURL", "setRectRadius", "setSegType", "quickClone",
"changeSelectedAttributeNoUndo", "changeSelectedAttribute", "deleteSelectedElements", "groupSelectedElements", "zoomChanged",
"ungroupSelectedElement", "moveToTopSelectedElement", "moveToBottomSelectedElement", "moveSelectedElements",
"getStrokedBBox", "getVisibleElements", "cycleElement", "getUndoStackSize", "getRedoStackSize", "getNextUndoCommandText",
"getNextRedoCommandText", "undo", "redo", "cloneSelectedElements", "alignSelectedElements", "getZoom", "getVersion",
"setIconSize", "setLang", "setCustomHandlers"];
functions = ['updateElementFromJson', 'embedImage', 'fixOperaXML', 'clearSelection',
'addToSelection',
'removeFromSelection', 'addNodeToSelection', 'open', 'save', 'getSvgString', 'setSvgString', 'createLayer',
'deleteCurrentLayer', 'getCurrentDrawing', 'setCurrentLayer', 'renameCurrentLayer', 'setCurrentLayerPosition',
'setLayerVisibility', 'moveSelectedToLayer', 'clear', 'clearPath', 'getNodePoint', 'clonePathNode', 'deletePathNode',
'getResolution', 'getImageTitle', 'setImageTitle', 'setResolution', 'setBBoxZoom', 'setZoom', 'getMode', 'setMode',
'getStrokeColor', 'setStrokeColor', 'getFillColor', 'setFillColor', 'setStrokePaint', 'setFillPaint', 'getStrokeWidth',
'setStrokeWidth', 'getStrokeStyle', 'setStrokeStyle', 'getOpacity', 'setOpacity', 'getFillOpacity', 'setFillOpacity',
'getStrokeOpacity', 'setStrokeOpacity', 'getTransformList', 'getBBox', 'getRotationAngle', 'setRotationAngle', 'each',
'bind', 'setIdPrefix', 'getBold', 'setBold', 'getItalic', 'setItalic', 'getFontFamily', 'setFontFamily', 'getFontSize',
'setFontSize', 'getText', 'setTextContent', 'setImageURL', 'setRectRadius', 'setSegType', 'quickClone',
'changeSelectedAttributeNoUndo', 'changeSelectedAttribute', 'deleteSelectedElements', 'groupSelectedElements', 'zoomChanged',
'ungroupSelectedElement', 'moveToTopSelectedElement', 'moveToBottomSelectedElement', 'moveSelectedElements',
'getStrokedBBox', 'getVisibleElements', 'cycleElement', 'getUndoStackSize', 'getRedoStackSize', 'getNextUndoCommandText',
'getNextRedoCommandText', 'undo', 'redo', 'cloneSelectedElements', 'alignSelectedElements', 'getZoom', 'getVersion',
'setIconSize', 'setLang', 'setCustomHandlers'];
// TODO: rewrite the following, it's pretty scary.
for (i = 0; i < functions.length; i++) {
this[functions[i]] = getCallbackSetter(functions[i]);
}
// Older IE may need a polyfill for addEventListener, but so it would for SVG
window.addEventListener('message', function(e) {
// We accept and post strings as opposed to objets for the sake of IE9 support; this
// will most likely be changed in the future
if (typeof e.data !== 'string') {
return;
}
var result, cbid,
data = e.data && JSON.parse(e.data);
if (!data || typeof data !== 'object' || data.namespace !== 'svg-edit') {
return;
}
result = data.result || data.error;
cbid = data.id;
if (t.callbacks[cbid]) {
if (data.result) {
t.callbacks[cbid](result);
} else {
t.callbacks[cbid](result, "error");
}
}
}, false);
window.addEventListener('message', getMessageListener(this), false);
}
EmbeddedSVGEdit.prototype.send = function(name, args, callback){
EmbeddedSVGEdit.prototype.send = function (name, args, callback){
var t = this;
cbid++;
this.callbacks[cbid] = callback;
setTimeout(function(){ // Delay for the callback to be set in case its synchronous
// Todo: Handle non-JSON arguments and return values (undefined, nonfinite numbers, functions, and built-in objects like Date, RegExp), etc.?
setTimeout(function () { // Delay for the callback to be set in case its synchronous
/*
* Todo: Handle non-JSON arguments and return values (undefined,
* nonfinite numbers, functions, and built-in objects like Date,
* RegExp), etc.? Allow promises instead of callbacks? Review
* SVG-Edit functions for whether JSON-able parameters can be
* made compatile with all API functionality
*/
// We accept and post strings for the sake of IE9 support
t.frame.contentWindow.postMessage(JSON.stringify({namespace: "svgCanvas", id: cbid, name: name, args: args}), '*');
if (window.location.origin === t.frame.contentWindow.location.origin) {
// Although we do not really need this API if we are working same
// domain, it could allow us to write in a way that would work
// cross-domain as well, assuming we stick to the argument limitations
// of the current JSON-based communication API (e.g., not passing
// callbacks). We might be able to address these shortcomings; see
// the todo elsewhere in this file.
var message = {id: cbid},
svgCanvas = t.frame.contentWindow.svgCanvas;
try {
message.result = svgCanvas[name].apply(svgCanvas, args);
}
catch (err) {
message.error = err.message;
}
addCallback(t, message);
}
else { // Requires the ext-xdomain-messaging.js extension
t.frame.contentWindow.postMessage(JSON.stringify({namespace: 'svgCanvas', id: cbid, name: name, args: args}), '*');
}
}, 0);
return cbid;
};