Cherry pick #6679 to minecraft stable

cli/cli.ts

@@ -30,6 +30,8 @@ import * as crowdin from './crowdin';
 
 const rimraf: (f: string, opts: any, cb: (err: any, res: any) => void) => void = require('rimraf');
 
+pxt.docs.requireDOMSanitizer = () => require("sanitize-html");
+
 let forceCloudBuild = process.env["KS_FORCE_CLOUD"] !== "no";
 let forceLocalBuild = !!process.env["PXT_FORCE_LOCAL"];
 let forceBuild = false; // don't use cache

gulpfile.js

@@ -51,6 +51,7 @@ const pxtblockly = () => gulp.src([
 
 const pxtapp = () => gulp.src([
         "node_modules/lzma/src/lzma_worker-min.js",
+        "node_modules/dompurify/dist/purify.min.js",
         "built/pxtlib.js",
         "built/pxtwinrt.js",
         "built/pxteditor.js",
@@ -63,6 +64,7 @@ const pxtworker = () => gulp.src([
         "pxtcompiler/ext-typescript/lib/typescript.js",
         "node_modules/fuse.js/dist/fuse.min.js",
         "node_modules/lzma/src/lzma_worker-min.js",
+        "node_modules/dompurify/dist/purify.min.js",
         "built/pxtlib.js",
         "built/pxtcompiler.js",
         "built/pxtpy.js"
@@ -74,6 +76,7 @@ const pxtworker = () => gulp.src([
 const pxtembed = () => gulp.src([
         "pxtcompiler/ext-typescript/lib/typescript.js",
         "node_modules/lzma/src/lzma_worker-min.js",
+        "node_modules/dompurify/dist/purify.min.js",
         "built/pxtlib.js",
         "built/pxtcompiler.js",
         "built/pxtpy.js",

localtypings/dompurify.d.ts

@@ -0,0 +1,3 @@
+declare namespace DOMPurify {
+    function sanitize(dirty: string): string;
+}

package.json

@@ -74,7 +74,9 @@
     "karma-chai": "0.1.0",
     "karma-chrome-launcher": "3.1.0",
     "karma-mocha": "1.3.0",
-    "puppeteer": "^2.0.0"
+    "puppeteer": "^2.0.0",
+    "dompurify": "2.0.8",
+    "sanitize-html": "1.22.0"
   },
   "lazyDependencies": {
     "node-hid": "^0.7.2",

pxtlib/docsrender.ts

@@ -1,4 +1,5 @@
 /// <reference path='../localtypings/pxtarget.d.ts' />
+/// <reference path='../localtypings/dompurify.d.ts' />
 /// <reference path="commonutil.ts"/>
 
 namespace pxt.docs {
@@ -86,6 +87,12 @@ namespace pxt.docs {
         return require("marked") as typeof marked;
     }
 
+    export let requireDOMSanitizer = () => {
+        if (typeof DOMPurify !== "undefined") return DOMPurify.sanitize;
+        if (typeof require === "undefined") return undefined;
+        return (require("DOMPurify") as typeof DOMPurify).sanitize;
+    }
+
     export interface RenderData {
         html: string;
         theme: AppTheme;
@@ -504,13 +511,16 @@ namespace pxt.docs {
             const html = linkRenderer.call(renderer, href, title, text);
             return html.replace(/^<a /, `<a ${target ? `target="${target}"` : ''} rel="nofollow noopener" `);
         };
+
+        let sanitizer = requireDOMSanitizer();
         markedInstance.setOptions({
             renderer: renderer,
             gfm: true,
             tables: true,
             breaks: false,
             pedantic: false,
             sanitize: true,
+            sanitizer: sanitizer,
             smartLists: true,
             smartypants: true
         });
@@ -852,13 +862,15 @@ ${opts.repo.name.replace(/^pxt-/, '')}=github:${opts.repo.fullName}#${opts.repo.
             return null
 
         const markedInstance = pxt.docs.requireMarked();
+        const sanitizer = requireDOMSanitizer();
         const options = {
             renderer: new markedInstance.Renderer(),
             gfm: true,
             tables: false,
             breaks: false,
             pedantic: false,
-            sanitize: false,
+            sanitize: true,
+            sanitizer: sanitizer,
             smartLists: false,
             smartypants: false
         };

webapp/src/marked.tsx

@@ -1,3 +1,4 @@
+/// <reference path='../../localtypings/dompurify.d.ts' />
 
 import * as React from "react";
 import * as data from "./data";
@@ -309,15 +310,16 @@ export class MarkedContent extends data.Component<MarkedContentProps, MarkedCont
         // Set markdown options
         marked.setOptions({
             renderer: renderer,
-            sanitize: true
+            sanitize: true,
+            sanitizer: pxt.docs.requireDOMSanitizer()
         })
 
         // Render the markdown and add it to the content div
         /* tslint:disable:no-inner-html (marked content is already sanitized) */
         content.innerHTML = marked(markdown);
         /* tslint:enable:no-inner-html */
 
-        // 
+        //
 
         // We'll go through a series of adjustments here, rendering inline blocks, blocks and snippets as needed
         this.renderInlineBlocks(content);