import xss from "xss"; const HTML_TYPES = ["html_block", "html_inline"]; // add image to array if src has an upload function addImage(uploads, token) { if (token.attrs) { for (let i = 0; i < token.attrs.length; i++) { if (token.attrs[i][1].indexOf("upload://") === 0) { uploads.push({ token, srcIndex: i, origSrc: token.attrs[i][1] }); break; } } } } function attr(name, value) { if (value) { return `${name}="${xss.escapeAttrValue(value)}"`; } return name; } function uploadLocatorString(url) { return `___REPLACE_UPLOAD_SRC_${url}___`; } function findUploadsInHtml(uploads, blockToken) { // Slightly misusing our HTML sanitizer to look for upload:// // image src attributes, and replace them with a placeholder. // Note that we can't use browser DOM APIs because this needs // to run in mini-racer. const fakeAllowList = {}; let foundImage = false; const newContent = xss(blockToken.content, { allowList: fakeAllowList, allowCommentTag: true, onTag(tag, html, options) { // We're not using this for sanitizing, so allow all tags through options.isWhite = true; fakeAllowList[tag] = []; }, onTagAttr(tag, name, value) { if (tag === "img" && name === "src" && value.startsWith("upload://")) { uploads.push({ token: blockToken, srcIndex: null, origSrc: value }); foundImage = true; return uploadLocatorString(value); } return attr(name, value); }, }); if (foundImage) { blockToken.content = newContent; } } function processToken(uploads, token) { if (token.tag === "img" || token.tag === "a") { addImage(uploads, token); } else if (HTML_TYPES.includes(token.type)) { findUploadsInHtml(uploads, token); } if (token.children) { for (let j = 0; j < token.children.length; j++) { const childToken = token.children[j]; processToken(uploads, childToken); } } } function rule(state) { let uploads = []; for (let i = 0; i < state.tokens.length; i++) { let blockToken = state.tokens[i]; processToken(uploads, blockToken); } if (uploads.length > 0) { let srcList = uploads.map((u) => u.origSrc); // In client-side cooking, this lookup returns nothing // This means we set data-orig-src, and let decorateCooked // lookup the image URLs asynchronously let lookup = state.md.options.discourse.lookupUploadUrls; let longUrls = (lookup && lookup(srcList)) || {}; uploads.forEach(({ token, srcIndex, origSrc }) => { let mapped = longUrls[origSrc]; if (HTML_TYPES.includes(token.type)) { const locator = uploadLocatorString(origSrc); let attrs = []; if (mapped) { attrs.push( attr("src", mapped.url), attr("data-base62-sha1", mapped.base62_sha1) ); } else { attrs.push( attr( "src", state.md.options.discourse.getURL("/images/transparent.png") ), attr("data-orig-src", origSrc) ); } token.content = token.content.replace(locator, attrs.join(" ")); } else if (token.tag === "img") { if (mapped) { token.attrs[srcIndex][1] = mapped.url; token.attrs.push(["data-base62-sha1", mapped.base62_sha1]); } else { // no point putting a transparent .png for audio/video if (token.content.match(/\|video|\|audio/)) { token.attrs[srcIndex][1] = state.md.options.discourse.getURL( "/404" ); } else { token.attrs[srcIndex][1] = state.md.options.discourse.getURL( "/images/transparent.png" ); } token.attrs.push(["data-orig-src", origSrc]); } } else if (token.tag === "a") { if (mapped) { // when secure media is enabled we want the full /secure-media-uploads/ // url to take advantage of access control security if ( state.md.options.discourse.limitedSiteSettings.secureMedia && mapped.url.indexOf("secure-media-uploads") > -1 ) { token.attrs[srcIndex][1] = mapped.url; } else { token.attrs[srcIndex][1] = mapped.short_path; } } else { token.attrs[srcIndex][1] = state.md.options.discourse.getURL("/404"); token.attrs.push(["data-orig-href", origSrc]); } } }); } } export function setup(helper) { const opts = helper.getOptions(); if (opts.previewing) { helper.allowList(["img.resizable"]); } helper.allowList([ "img[data-orig-src]", "img[data-base62-sha1]", "a[data-orig-href]", ]); helper.registerPlugin((md) => { md.core.ruler.push("upload-protocol", rule); }); }