Tighten notebook code cell output sandbox and enable it by default (#664)

* Tighten notebook code cell output sandbox

* Enable sandboxnotebookoutputs by default

* Address feedback

src/Explorer/Notebook/NotebookClientV2.ts

@@ -34,7 +34,8 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import configureStore from "./NotebookComponent/store";
 import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
-import JavaScript from "./NotebookRenderer/outputs/javascript";
+import SandboxJavaScript from "./NotebookRenderer/outputs/SandboxJavaScript";
+import SanitizedHTML from "./NotebookRenderer/outputs/SanitizedHTML";
 
 export type KernelSpecsDisplay = { name: string; displayName: string };
 
@@ -167,8 +168,10 @@ export class NotebookClientV2 {
               "application/vnd.vega.v5+json": NullTransform,
               "application/vdom.v1+json": TransformVDOM,
               "application/json": Media.Json,
-              "application/javascript": userContext.features.sandboxNotebookOutputs ? JavaScript : Media.JavaScript,
-              "text/html": Media.HTML,
+              "application/javascript": userContext.features.sandboxNotebookOutputs
+                ? SandboxJavaScript
+                : Media.JavaScript,
+              "text/html": userContext.features.sandboxNotebookOutputs ? SanitizedHTML : Media.HTML,
               "text/markdown": Media.Markdown,
               "text/latex": Media.LaTeX,
               "image/svg+xml": Media.SVG,

src/Explorer/Notebook/NotebookRenderer/outputs/IFrameOutputs.tsx

@@ -27,7 +27,7 @@ export class IFrameOutputs extends React.PureComponent<ComponentProps & StatePro
     return (
       <SandboxFrame
         style={{ border: "none", width: "100%" }}
-        sandbox="allow-downloads allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-popups-to-escape-sandbox"
+        sandbox="allow-downloads allow-forms allow-pointer-lock allow-same-origin allow-scripts"
       >
         <div className={`nteract-cell-outputs ${hidden ? "hidden" : ""} ${expanded ? "expanded" : ""}`}>
           {outputs.map((output, index) => (

src/Explorer/Notebook/NotebookRenderer/outputs/SandboxFrame.tsx

@@ -41,7 +41,7 @@ export class SandboxFrame extends React.PureComponent<SandboxFrameProps, Sandbox
     );
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     this.resizeObserver?.disconnect();
   }
 

src/Explorer/Notebook/NotebookRenderer/outputs/SandboxJavaScript.tsx

@@ -12,7 +12,7 @@ interface Props {
   mediaType: "text/javascript";
 }
 
-export class JavaScript extends React.PureComponent<Props> {
+export class SandboxJavaScript extends React.PureComponent<Props> {
   static defaultProps = {
     data: "",
     mediaType: "application/javascript",
@@ -23,4 +23,4 @@ export class JavaScript extends React.PureComponent<Props> {
   }
 }
 
-export default JavaScript;
+export default SandboxJavaScript;

src/Explorer/Notebook/NotebookRenderer/outputs/SanitizedHTML.tsx

@@ -0,0 +1,38 @@
+import { Media } from "@nteract/outputs";
+import React from "react";
+import sanitizeHtml from "sanitize-html";
+
+interface Props {
+  /**
+   * The HTML string that will be rendered.
+   */
+  data: string;
+  /**
+   * The media type associated with the HTML
+   * string. This defaults to text/html.
+   */
+  mediaType: "text/html";
+}
+
+export class SanitizedHTML extends React.PureComponent<Props> {
+  static defaultProps = {
+    data: "",
+    mediaType: "text/html",
+  };
+
+  render(): JSX.Element {
+    return <Media.HTML data={sanitize(this.props.data)} />;
+  }
+}
+
+function sanitize(html: string): string {
+  return sanitizeHtml(html, {
+    allowedTags: false, // allow all tags
+    allowedAttributes: false, // allow all attrs
+    transformTags: {
+      iframe: "iframe-disabled", // disable iframes
+    },
+  });
+}
+
+export default SanitizedHTML;