HackMD/public/js/render.js
Sheogorath 5d347d583d
Extend HTML5 support by whitelisting various tags
HTML5 provides a wide feature set of useful elements. Since Markdown
usually supports HTML it should be able to use these HTML5 tags as well.
As they were requested by some users and they where checked for being
safe, whitelisting them isn't a problem. To make the experience the same
as on GitHub when it comes to the basic look and feel of the rendered
markdown, some CSS was added to make the summary and the details tag
look like on GitHub.

Signed-off-by: Sheogorath <sheogorath@shivering-isles.com>
2018-02-25 14:54:21 +01:00

75 lines
2.6 KiB
JavaScript

/* eslint-env browser, jquery */
/* global filterXSS */
// allow some attributes
var whiteListAttr = ['id', 'class', 'style']
window.whiteListAttr = whiteListAttr
// allow link starts with '.', '/' and custom protocol with '://', exclude link starts with javascript://
var linkRegex = /^(?!javascript:\/\/)([\w|-]+:\/\/)|^([.|/])+/i
// allow data uri, from https://gist.github.com/bgrins/6194623
var dataUriRegex = /^\s*data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)\s*$/i
// custom white list
var whiteList = filterXSS.whiteList
// allow ol specify start number
whiteList['ol'] = ['start']
// allow li specify value number
whiteList['li'] = ['value']
// allow style tag
whiteList['style'] = []
// allow kbd tag
whiteList['kbd'] = []
// allow ifram tag with some safe attributes
whiteList['iframe'] = ['allowfullscreen', 'name', 'referrerpolicy', 'sandbox', 'src', 'width', 'height']
// allow details tag
whiteList['details'] = []
// allow summary tag for details
whiteList['summary'] = []
// allow ruby tag
whiteList['ruby'] = []
// allow rt tag for ruby
whiteList['rt'] = []
// allow figure tag
whiteList['figure'] = []
// allow figcaption tag
whiteList['figcaption'] = []
var filterXSSOptions = {
allowCommentTag: true,
whiteList: whiteList,
escapeHtml: function (html) {
// allow html comment in multiple lines
return html.replace(/<(?!!--)/g, '&lt;').replace(/-->/g, '__HTML_COMMENT_END__').replace(/>/g, '&gt;').replace(/__HTML_COMMENT_END__/g, '-->')
},
onIgnoreTag: function (tag, html, options) {
// allow comment tag
if (tag === '!--') {
// do not filter its attributes
return html
}
},
onTagAttr: function (tag, name, value, isWhiteAttr) {
// allow href and src that match linkRegex
if (isWhiteAttr && (name === 'href' || name === 'src') && linkRegex.test(value)) {
return name + '="' + filterXSS.escapeAttrValue(value) + '"'
}
// allow data uri in img src
if (isWhiteAttr && (tag === 'img' && name === 'src') && dataUriRegex.test(value)) {
return name + '="' + filterXSS.escapeAttrValue(value) + '"'
}
},
onIgnoreTagAttr: function (tag, name, value, isWhiteAttr) {
// allow attr start with 'data-' or in the whiteListAttr
if (name.substr(0, 5) === 'data-' || window.whiteListAttr.indexOf(name) !== -1) {
// escape its value using built-in escapeAttrValue function
return name + '="' + filterXSS.escapeAttrValue(value) + '"'
}
}
}
function preventXSS (html) {
return filterXSS(html, filterXSSOptions)
}
window.preventXSS = preventXSS
module.exports = {
preventXSS: preventXSS
}