sanitize markdown before rendering to prevent XSS

draw rainbox borders on element redraws in vdom method.
This lets us see what being redrawn, as the vdom.diff method
is breaking a few things.
pull/1/head
ansuz 9 years ago
parent 13f5371199
commit 2e3b424a1a

@ -22,6 +22,10 @@ define([
var $textarea = $('textarea'), var $textarea = $('textarea'),
$target = $('#target'); $target = $('#target');
Marked.setOptions({
sanitize: true
});
var draw = function (content) { var draw = function (content) {
// draw stuff // draw stuff
$target.html(Marked(content)); $target.html(Marked(content));

@ -14,6 +14,10 @@ define([
Hyperjson = Convert.core.hyperjson, Hyperjson = Convert.core.hyperjson,
Hyperscript = Convert.core.hyperscript; Hyperscript = Convert.core.hyperscript;
window.Vdom = Vdom;
window.Hyperjson = Hyperjson;
window.Hyperscript = Hyperscript;
$(window).on('hashchange', function() { $(window).on('hashchange', function() {
window.location.reload(); window.location.reload();
}); });
@ -27,11 +31,16 @@ define([
var $textarea = $('textarea'), var $textarea = $('textarea'),
$target = $('#target'); $target = $('#target');
/* var stripScripts = function (md) {
var draw = function (content) { return md.replace(/<[\s\S]*?script[\s\S]*?>[\s\S]*?<\/script[\s\S]*?>/ig, "");
// draw stuff };
$target.html(Marked(content));
}; */ window.$textarea = $textarea;
// set markdwon rendering options
Marked.setOptions({
sanitize: true
});
window.draw = (function () { window.draw = (function () {
var target = $target[0], var target = $target[0],
@ -41,23 +50,69 @@ define([
var Previous = Convert.dom.to.vdom(inner); var Previous = Convert.dom.to.vdom(inner);
return function (md) { return function (md) {
var rendered = Marked(md); // strip scripts or people get xss
var rendered = stripScripts(Marked(md||""));
// make a dom // make a dom
var R = $('<div id="inner">'+rendered+'</div>')[0]; var R = $('<div id="inner">'+rendered+'</div>')[0];
var New = Convert.dom.to.vdom(R); var New = Convert.dom.to.vdom(R);
var patches = Vdom.diff(Previous, New); var patches = Vdom.diff(Previous, New);
Vdom.patch(inner, patches); Vdom.patch(inner, patches);
Previous = New; Previous = New;
return patches;
};
}());
window.colour = (function () {
var r = 0.6,
n = 24,
i = 0,
t = [],
rgb = [0,2,4];
while(i<n)t.push(i++);
var colours = t.map(function (c, I) {
return '#'+ rgb.map(function (j) {
var x = ((Math.sin(r*(I+22)+j)*127+128) *0x01<<0)
.toString(16);
return x.length<2?"0"+x:x;
}).join("");
});
var J = 0;
return function () {
var j = J++;
if (colours[j]) {
return colours[j];
}
J = 0;
return colours[0];
}; };
}()); }());
var redrawTimeout; var redrawTimeout;
var $inner = $('#inner');
window.makeRainbow = false
var makeRainbows = function () {
$inner
.find('*:not(.untouched)')
.css({
'border': '5px solid '+colour(),
margin: '5px'
})
.addClass('untouched');
};
var lazyDraw = function (md) {
redrawTimeout && clearTimeout(redrawTimeout);
redrawTimeout = setTimeout(function () {
draw(md);
makeRainbox && makeRainbows();
}, 450);
};
var rts = $textarea.toArray().map(function (e, i) { var rts = $textarea.toArray().map(function (e, i) {
var rt = Realtime.start(e, // window var rt = Realtime.start(e, // window
Config.websocketURL, // websocketUrl Config.websocketURL, // websocketUrl
@ -66,10 +121,7 @@ define([
key.cryptKey, key.cryptKey,
null, null,
function (){ function (){
redrawTimeout && clearTimeout(redrawTimeout); lazyDraw($textarea.val());
setTimeout(function () {
draw($textarea.val());
}, 500);
}); // cryptKey }); // cryptKey
return rt; return rt;
})[0]; })[0];
@ -78,7 +130,9 @@ define([
window.rts = rts; window.rts = rts;
$textarea.on('change keyup keydown', function () { $textarea.on('change keyup keydown', function () {
//console.log("pewpew"); redrawTimeout && clearTimeout(redrawTimeout);
draw($textarea.val()); redrawTimeout = setTimeout(function () {
lazyDraw($textarea.val());
}, 500);
}); });
}); });

Loading…
Cancel
Save