Fixed prevent XSS might break lots of tags and only need after rendered

This commit is contained in:
Cheng-Han, Wu 2016-02-11 03:45:13 -06:00
parent 176021ccd8
commit 4c4a0e0f3f
10 changed files with 442 additions and 20 deletions

View file

@ -11,7 +11,6 @@ var shortId = require('shortid');
var metaMarked = require('meta-marked');
var querystring = require('querystring');
var request = require('request');
var xss = require('xss');
//core
var config = require("../config.js");
@ -228,7 +227,6 @@ function showPublishNote(req, res, next) {
//na
}
var updatetime = notedata.update_time;
body = xss(body); // prevent xss
var text = S(body).escapeHTML().s;
var title = notedata.title;
var decodedTitle = LZString.decompressFromBase64(title);
@ -612,7 +610,6 @@ function showPublishSlide(req, res, next) {
var decodedTitle = LZString.decompressFromBase64(title);
if (decodedTitle) title = decodedTitle;
title = Note.generateWebTitle(title);
body = xss(body); // prevent xss
var text = S(body).escapeHTML().s;
render(res, title, text);
});

View file

@ -49,8 +49,7 @@
"socket.io": "1.4.4",
"string": "^3.3.1",
"toobusy-js": "^0.4.2",
"winston": "^2.1.1",
"xss": "^0.2.10"
"winston": "^2.1.1"
},
"engines": {
"node": ">=4.x"

View file

@ -180,7 +180,7 @@ function finishView(view) {
.each(function (key, value) {
$.ajax({
type: 'GET',
url: '//vimeo.com/api/v2/video/' + $(value).attr('videoid') + '.json',
url: '//vimeo.com/api/v2/video/' + $(value).attr('data-videoid') + '.json',
jsonp: 'callback',
dataType: 'jsonp',
success: function (data) {
@ -285,7 +285,7 @@ function finishView(view) {
.each(function (key, value) {
$.ajax({
type: 'GET',
url: '//www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/' + $(value).attr('slideshareid') + '&format=json',
url: '//www.slideshare.net/api/oembed/2?url=http://www.slideshare.net/' + $(value).attr('data-slideshareid') + '&format=json',
jsonp: 'callback',
dataType: 'jsonp',
success: function (data) {
@ -304,7 +304,7 @@ function finishView(view) {
//speakerdeck
view.find(".speakerdeck.raw").removeClass("raw")
.each(function (key, value) {
var url = 'https://speakerdeck.com/oembed.json?url=https%3A%2F%2Fspeakerdeck.com%2F' + encodeURIComponent($(value).attr('speakerdeckid'));
var url = 'https://speakerdeck.com/oembed.json?url=https%3A%2F%2Fspeakerdeck.com%2F' + encodeURIComponent($(value).attr('data-speakerdeckid'));
//use yql because speakerdeck not support jsonp
$.ajax({
url: 'https://query.yahooapis.com/v1/public/yql',
@ -383,8 +383,8 @@ function exportToHTML(view) {
$(value).attr('src', 'https://www.tortue.me/emoji/' + name + '.png');
});
//replace video to iframe
src.find("div[videoid]").each(function (key, value) {
var id = $(value).attr('videoid');
src.find("div[data-videoid]").each(function (key, value) {
var id = $(value).attr('data-videoid');
var style = $(value).attr('style');
var url = null;
if ($(value).hasClass('youtube')) {
@ -534,9 +534,9 @@ function smoothHashScroll() {
}
function imgPlayiframe(element, src) {
if (!$(element).attr("videoid")) return;
if (!$(element).attr("data-videoid")) return;
var iframe = $("<iframe frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>");
$(iframe).attr("src", src + $(element).attr("videoid") + '?autoplay=1');
$(iframe).attr("src", src + $(element).attr("data-videoid") + '?autoplay=1');
$(element).find('img').css('visibility', 'hidden');
$(element).append(iframe);
}
@ -730,7 +730,7 @@ var youtubePlugin = new Plugin(
var videoid = match[1];
if (!videoid) return;
var div = $('<div class="youtube raw"></div>');
div.attr('videoid', videoid);
div.attr('data-videoid', videoid);
var thumbnail_src = '//img.youtube.com/vi/' + videoid + '/hqdefault.jpg';
var image = '<img src="' + thumbnail_src + '" />';
div.append(image);
@ -749,7 +749,7 @@ var vimeoPlugin = new Plugin(
var videoid = match[1];
if (!videoid) return;
var div = $('<div class="vimeo raw"></div>');
div.attr('videoid', videoid);
div.attr('data-videoid', videoid);
var icon = '<i class="icon fa fa-vimeo-square fa-5x"></i>';
div.append(icon);
return div[0].outerHTML;
@ -799,7 +799,7 @@ var slidesharePlugin = new Plugin(
function (match, utils) {
var slideshareid = match[1];
var div = $('<div class="slideshare raw"></div>');
div.attr('slideshareid', slideshareid);
div.attr('data-slideshareid', slideshareid);
return div[0].outerHTML;
}
);
@ -812,7 +812,7 @@ var speakerdeckPlugin = new Plugin(
function (match, utils) {
var speakerdeckid = match[1];
var div = $('<div class="speakerdeck raw"></div>');
div.attr('speakerdeckid', speakerdeckid);
div.attr('data-speakerdeckid', speakerdeckid);
return div[0].outerHTML;
}
);

View file

@ -2132,11 +2132,12 @@ var lastResult = null;
function updateViewInner() {
if (currentMode == modeType.edit || !isDirty) return;
var value = editor.getValue();
value = filterXSS(value); // prevent xss
md.meta = {};
md.render(value); //only for get meta
parseMeta(md, ui.area.markdown, $('#toc'), $('#toc-affix'));
var result = postProcess(md.render(value)).children().toArray();
var rendered = md.render(value);
rendered = preventXSS(rendered);
var result = postProcess(rendered).children().toArray();
partialUpdate(result, lastResult, ui.area.markdown.children().toArray());
if (result && lastResult && result.length != lastResult.length)
updateDataAttrs(result, ui.area.markdown.children().toArray());

View file

@ -3,7 +3,9 @@ var text = $('<textarea/>').html(markdown.html()).text();
md.meta = {};
md.render(text); //only for get meta
parseMeta(md, markdown, $('#toc'), $('#toc-affix'));
var result = postProcess(md.render(text));
var rendered = md.render(text);
rendered = preventXSS(rendered);
var result = postProcess(rendered);
markdown.html(result.html());
$(document.body).show();
finishView(markdown);

13
public/js/render.js Normal file
View file

@ -0,0 +1,13 @@
function preventXSS(html) {
var options = {
allowCommentTag: true,
onIgnoreTagAttr: function (tag, name, value, isWhiteAttr) {
// allow attr start with 'data-' or equal 'id' and 'class'
if (name.substr(0, 5) === 'data-' || name === 'id' || name === 'class') {
// escape its value using built-in escapeAttrValue function
return name + '="' + filterXSS.escapeAttrValue(value) + '"';
}
}
};
return filterXSS(html, options);
}

405
public/js/reveal-markdown.js Executable file
View file

@ -0,0 +1,405 @@
/**
* The reveal.js markdown plugin. Handles parsing of
* markdown inside of presentations as well as loading
* of external markdown documents.
*/
(function( root, factory ) {
if( typeof exports === 'object' ) {
module.exports = factory( require( './marked' ) );
}
else {
// Browser globals (root is window)
root.RevealMarkdown = factory( root.marked );
root.RevealMarkdown.initialize();
}
}( this, function( marked ) {
if( typeof marked === 'undefined' ) {
throw 'The reveal.js Markdown plugin requires marked to be loaded';
}
if( typeof hljs !== 'undefined' ) {
marked.setOptions({
highlight: function( lang, code ) {
return hljs.highlightAuto( lang, code ).value;
}
});
}
var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
DEFAULT_NOTES_SEPARATOR = 'note:',
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
var SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__';
/**
* Retrieves the markdown contents of a slide section
* element. Normalizes leading tabs/whitespace.
*/
function getMarkdownFromSlide( section ) {
var template = section.querySelector( 'script' );
// strip leading whitespace so it isn't evaluated as code
var text = ( template || section ).textContent;
// restore script end tags
text = text.replace( new RegExp( SCRIPT_END_PLACEHOLDER, 'g' ), '</script>' );
var leadingWs = text.match( /^\n?(\s*)/ )[1].length,
leadingTabs = text.match( /^\n?(\t*)/ )[1].length;
if( leadingTabs > 0 ) {
text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
}
else if( leadingWs > 1 ) {
text = text.replace( new RegExp('\\n? {' + leadingWs + '}', 'g'), '\n' );
}
return text;
}
/**
* Given a markdown slide section element, this will
* return all arguments that aren't related to markdown
* parsing. Used to forward any other user-defined arguments
* to the output markdown slide.
*/
function getForwardedAttributes( section ) {
var attributes = section.attributes;
var result = [];
for( var i = 0, len = attributes.length; i < len; i++ ) {
var name = attributes[i].name,
value = attributes[i].value;
// disregard attributes that are used for markdown loading/parsing
if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue;
if( value ) {
result.push( name + '="' + value + '"' );
}
else {
result.push( name );
}
}
return result.join( ' ' );
}
/**
* Inspects the given options and fills out default
* values for what's not defined.
*/
function getSlidifyOptions( options ) {
options = options || {};
options.separator = options.separator || DEFAULT_SLIDE_SEPARATOR;
options.notesSeparator = options.notesSeparator || DEFAULT_NOTES_SEPARATOR;
options.attributes = options.attributes || '';
return options;
}
/**
* Helper function for constructing a markdown slide.
*/
function createMarkdownSlide( content, options ) {
options = getSlidifyOptions( options );
var notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) );
if( notesMatch.length === 2 ) {
content = notesMatch[0] + '<aside class="notes" data-markdown>' + notesMatch[1].trim() + '</aside>';
}
// prevent script end tags in the content from interfering
// with parsing
content = content.replace( /<\/script>/g, SCRIPT_END_PLACEHOLDER );
return '<script type="text/template">' + content + '</script>';
}
/**
* Parses a data string into multiple slides based
* on the passed in separator arguments.
*/
function slidify( markdown, options ) {
options = getSlidifyOptions( options );
var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ),
horizontalSeparatorRegex = new RegExp( options.separator );
var matches,
lastIndex = 0,
isHorizontal,
wasHorizontal = true,
content,
sectionStack = [];
// iterate until all blocks between separators are stacked up
while( matches = separatorRegex.exec( markdown ) ) {
notes = null;
// determine direction (horizontal by default)
isHorizontal = horizontalSeparatorRegex.test( matches[0] );
if( !isHorizontal && wasHorizontal ) {
// create vertical stack
sectionStack.push( [] );
}
// pluck slide content from markdown input
content = markdown.substring( lastIndex, matches.index );
if( isHorizontal && wasHorizontal ) {
// add to horizontal stack
sectionStack.push( content );
}
else {
// add to vertical stack
sectionStack[sectionStack.length-1].push( content );
}
lastIndex = separatorRegex.lastIndex;
wasHorizontal = isHorizontal;
}
// add the remaining slide
( wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1] ).push( markdown.substring( lastIndex ) );
var markdownSections = '';
// flatten the hierarchical stack, and insert <section data-markdown> tags
for( var i = 0, len = sectionStack.length; i < len; i++ ) {
// vertical
if( sectionStack[i] instanceof Array ) {
markdownSections += '<section '+ options.attributes +'>';
sectionStack[i].forEach( function( child ) {
markdownSections += '<section data-markdown>' + createMarkdownSlide( child, options ) + '</section>';
} );
markdownSections += '</section>';
}
else {
markdownSections += '<section '+ options.attributes +' data-markdown>' + createMarkdownSlide( sectionStack[i], options ) + '</section>';
}
}
return markdownSections;
}
/**
* Parses any current data-markdown slides, splits
* multi-slide markdown into separate sections and
* handles loading of external markdown.
*/
function processSlides() {
var sections = document.querySelectorAll( '[data-markdown]'),
section;
for( var i = 0, len = sections.length; i < len; i++ ) {
section = sections[i];
if( section.getAttribute( 'data-markdown' ).length ) {
var xhr = new XMLHttpRequest(),
url = section.getAttribute( 'data-markdown' );
datacharset = section.getAttribute( 'data-charset' );
// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
if( datacharset != null && datacharset != '' ) {
xhr.overrideMimeType( 'text/html; charset=' + datacharset );
}
xhr.onreadystatechange = function() {
if( xhr.readyState === 4 ) {
// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
section.outerHTML = slidify( xhr.responseText, {
separator: section.getAttribute( 'data-separator' ),
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
notesSeparator: section.getAttribute( 'data-separator-notes' ),
attributes: getForwardedAttributes( section )
});
}
else {
section.outerHTML = '<section data-state="alert">' +
'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' +
'Check your browser\'s JavaScript console for more details.' +
'<p>Remember that you need to serve the presentation HTML from a HTTP server.</p>' +
'</section>';
}
}
};
xhr.open( 'GET', url, false );
try {
xhr.send();
}
catch ( e ) {
alert( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e );
}
}
else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
section.outerHTML = slidify( getMarkdownFromSlide( section ), {
separator: section.getAttribute( 'data-separator' ),
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
notesSeparator: section.getAttribute( 'data-separator-notes' ),
attributes: getForwardedAttributes( section )
});
}
else {
section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
}
}
}
/**
* Check if a node value has the attributes pattern.
* If yes, extract it and add that value as one or several attributes
* the the terget element.
*
* You need Cache Killer on Chrome to see the effect on any FOM transformation
* directly on refresh (F5)
* http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/7000899#answer-11786277
*/
function addAttributeInElement( node, elementTarget, separator ) {
var mardownClassesInElementsRegex = new RegExp( separator, 'mg' );
var mardownClassRegex = new RegExp( "([^\"= ]+?)=\"([^\"=]+?)\"", 'mg' );
var nodeValue = node.nodeValue;
if( matches = mardownClassesInElementsRegex.exec( nodeValue ) ) {
var classes = matches[1];
nodeValue = nodeValue.substring( 0, matches.index ) + nodeValue.substring( mardownClassesInElementsRegex.lastIndex );
node.nodeValue = nodeValue;
while( matchesClass = mardownClassRegex.exec( classes ) ) {
elementTarget.setAttribute( matchesClass[1], matchesClass[2] );
}
return true;
}
return false;
}
/**
* Add attributes to the parent element of a text node,
* or the element of an attribute node.
*/
function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) {
if ( element != null && element.childNodes != undefined && element.childNodes.length > 0 ) {
previousParentElement = element;
for( var i = 0; i < element.childNodes.length; i++ ) {
childElement = element.childNodes[i];
if ( i > 0 ) {
j = i - 1;
while ( j >= 0 ) {
aPreviousChildElement = element.childNodes[j];
if ( typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR" ) {
previousParentElement = aPreviousChildElement;
break;
}
j = j - 1;
}
}
parentSection = section;
if( childElement.nodeName == "section" ) {
parentSection = childElement ;
previousParentElement = childElement ;
}
if ( typeof childElement.setAttribute == 'function' || childElement.nodeType == Node.COMMENT_NODE ) {
addAttributes( parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes );
}
}
}
if ( element.nodeType == Node.COMMENT_NODE ) {
if ( addAttributeInElement( element, previousElement, separatorElementAttributes ) == false ) {
addAttributeInElement( element, section, separatorSectionAttributes );
}
}
}
/**
* Converts any current data-markdown slides in the
* DOM to HTML.
*/
function convertSlides() {
var sections = document.querySelectorAll( '[data-markdown]');
for( var i = 0, len = sections.length; i < len; i++ ) {
var section = sections[i];
// Only parse the same slide once
if( !section.getAttribute( 'data-markdown-parsed' ) ) {
section.setAttribute( 'data-markdown-parsed', true )
var notes = section.querySelector( 'aside.notes' );
var markdown = getMarkdownFromSlide( section );
var rendered = marked( markdown );
rendered = preventXSS(rendered);
section.innerHTML = rendered;
addAttributes( section, section, null, section.getAttribute( 'data-element-attributes' ) ||
section.parentNode.getAttribute( 'data-element-attributes' ) ||
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
section.getAttribute( 'data-attributes' ) ||
section.parentNode.getAttribute( 'data-attributes' ) ||
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
// If there were notes, we need to re-add them after
// having overwritten the section's HTML
if( notes ) {
section.appendChild( notes );
}
}
}
}
// API
return {
initialize: function() {
processSlides();
convertSlides();
},
// TODO: Do these belong in the API?
processSlides: processSlides,
convertSlides: convertSlides,
slidify: slidify
};
}));

View file

@ -60,6 +60,7 @@
<script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
<script src="/js/common.js" defer></script>
<script src="/js/extra.js" defer></script>
<script src="/js/render.js" defer></script>
<script src="/js/history.js" defer></script>
<script src="/js/index.js" defer></script>
<script src="/js/syncscroll.js" defer></script>

View file

@ -76,6 +76,7 @@
<script src="<%- url %>/vendor/js-yaml/dist/js-yaml.min.js" defer></script>
<% } %>
<script src="<%- url %>/vendor/lz-string/libs/lz-string.min.js" defer></script>
<script src="<%- url %>/vendor/xss/dist/xss.min.js" defer></script>
<script src="<%- url %>/vendor/remarkable.min.js" defer></script>
<script src="<%- url %>/vendor/remarkable-regex.js" defer></script>
<script src="<%- url %>/vendor/gist-embed.js" defer></script>
@ -94,4 +95,5 @@
</script>
<script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" defer></script>
<script src="<%- url %>/js/extra.js" defer></script>
<script src="<%- url %>/js/render.js" defer></script>
<script src="<%- url %>/js/pretty.js" defer></script>

View file

@ -31,6 +31,8 @@
<script src="/vendor/reveal.js/lib/js/head.min.js"></script>
<script src="/vendor/reveal.js/js/reveal.js"></script>
<script src="/vendor/string.min.js"></script>
<script src="/vendor/xss/dist/xss.min.js"></script>
<script src="/js/render.js"></script>
<script>
var body = $(".slides").html();
@ -53,7 +55,7 @@
var deps = [
{ src: '/vendor/reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: '/vendor/reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector('[data-markdown]'); } },
{ src: '/vendor/reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector('[data-markdown]'); } },
{ src: '/js/reveal-markdown.js', condition: function() { return !!document.querySelector('[data-markdown]'); } },
{ src: '/vendor/reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: '/vendor/reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: '/vendor/reveal.js/plugin/math/math.js', async: true }