Sandbox all outputs in iFrame (#624)

src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx

@@ -1,18 +1,20 @@
-import * as React from "react";
-import "./base.css";
-import "./default.css";
-
-import { CodeCell, RawCell, Cells, MarkdownCell } from "@nteract/stateful-components";
-import Prompt, { PassedPromptProps } from "@nteract/stateful-components/lib/inputs/prompt";
-import { AzureTheme } from "./AzureTheme";
-
-import { connect } from "react-redux";
-import { Dispatch } from "redux";
 import { actions, ContentRef } from "@nteract/core";
-import loadTransform from "../NotebookComponent/loadTransform";
+import { KernelOutputError, StreamText } from "@nteract/outputs";
+import { Cells, CodeCell, MarkdownCell, RawCell } from "@nteract/stateful-components";
 import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
 import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
+import Prompt, { PassedPromptProps } from "@nteract/stateful-components/lib/inputs/prompt";
+import TransformMedia from "@nteract/stateful-components/lib/outputs/transform-media";
+import * as React from "react";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { userContext } from "../../../UserContext";
+import loadTransform from "../NotebookComponent/loadTransform";
+import { AzureTheme } from "./AzureTheme";
+import "./base.css";
+import "./default.css";
 import "./NotebookReadOnlyRenderer.less";
+import IFrameOutputs from "./outputs/IFrameOutputs";
 
 export interface NotebookRendererProps {
   contentRef: any;
@@ -60,6 +62,16 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
               <CodeCell id={id} contentRef={contentRef}>
                 {{
                   prompt: (props: { id: string; contentRef: string }) => this.renderPrompt(props.id, props.contentRef),
+                  outputs: userContext.features.sandboxNotebookOutputs
+                    ? (props: any) => (
+                        <IFrameOutputs id={id} contentRef={contentRef}>
+                          <TransformMedia output_type={"display_data"} id={id} contentRef={contentRef} />
+                          <TransformMedia output_type={"execute_result"} id={id} contentRef={contentRef} />
+                          <KernelOutputError />
+                          <StreamText />
+                        </IFrameOutputs>
+                      )
+                    : undefined,
                   editor: {
                     monaco: (props: PassedEditorProps) =>
                       this.props.hideInputs ? <></> : <MonacoEditor readOnly={true} {...props} editorType={"monaco"} />,

src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx

@@ -1,37 +1,32 @@
-import * as React from "react";
-import "./base.css";
-import "./default.css";
-
-import { RawCell, Cells, CodeCell, MarkdownCell } from "@nteract/stateful-components";
+import { CellId } from "@nteract/commutable";
+import { CellType } from "@nteract/commutable/src";
+import { actions, ContentRef } from "@nteract/core";
+import { KernelOutputError, StreamText } from "@nteract/outputs";
+import { Cells, CodeCell, MarkdownCell, RawCell } from "@nteract/stateful-components";
 import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
 import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
-
-import Prompt from "./Prompt";
-import { promptContent } from "./PromptContent";
-
-import { AzureTheme } from "./AzureTheme";
+import TransformMedia from "@nteract/stateful-components/lib/outputs/transform-media";
+import * as React from "react";
 import { DndProvider } from "react-dnd";
 import HTML5Backend from "react-dnd-html5-backend";
-
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-import { actions, ContentRef } from "@nteract/core";
-import { CellId } from "@nteract/commutable";
-import loadTransform from "../NotebookComponent/loadTransform";
-import DraggableCell from "./decorators/draggable";
-import CellCreator from "./decorators/CellCreator";
-import KeyboardShortcuts from "./decorators/kbd-shortcuts";
-
-import CellToolbar from "./Toolbar";
-import StatusBar from "./StatusBar";
-
-import HijackScroll from "./decorators/hijack-scroll";
-import { CellType } from "@nteract/commutable/src";
-
-import "./NotebookRenderer.less";
-import HoverableCell from "./decorators/HoverableCell";
-import CellLabeler from "./decorators/CellLabeler";
+import { userContext } from "../../../UserContext";
 import * as cdbActions from "../NotebookComponent/actions";
+import loadTransform from "../NotebookComponent/loadTransform";
+import { AzureTheme } from "./AzureTheme";
+import "./base.css";
+import CellCreator from "./decorators/CellCreator";
+import CellLabeler from "./decorators/CellLabeler";
+import HoverableCell from "./decorators/HoverableCell";
+import KeyboardShortcuts from "./decorators/kbd-shortcuts";
+import "./default.css";
+import "./NotebookRenderer.less";
+import IFrameOutputs from "./outputs/IFrameOutputs";
+import Prompt from "./Prompt";
+import { promptContent } from "./PromptContent";
+import StatusBar from "./StatusBar";
+import CellToolbar from "./Toolbar";
 
 export interface NotebookRendererBaseProps {
   contentRef: any;
@@ -112,6 +107,16 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
                               </Prompt>
                             ),
                             toolbar: () => <CellToolbar id={id} contentRef={contentRef} />,
+                            outputs: userContext.features.sandboxNotebookOutputs
+                              ? (props: any) => (
+                                  <IFrameOutputs id={id} contentRef={contentRef}>
+                                    <TransformMedia output_type={"display_data"} id={id} contentRef={contentRef} />
+                                    <TransformMedia output_type={"execute_result"} id={id} contentRef={contentRef} />
+                                    <KernelOutputError />
+                                    <StreamText />
+                                  </IFrameOutputs>
+                                )
+                              : undefined,
                           }}
                         </CodeCell>
                       ),

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

@@ -0,0 +1,70 @@
+import { AppState, ContentRef, selectors } from "@nteract/core";
+import { Output } from "@nteract/outputs";
+import Immutable from "immutable";
+import React from "react";
+import { connect } from "react-redux";
+import { SandboxFrame } from "./SandboxFrame";
+
+// Adapted from https://github.com/nteract/nteract/blob/main/packages/stateful-components/src/outputs/index.tsx
+// to add support for sandboxing using <iframe>
+
+interface ComponentProps {
+  id: string;
+  contentRef: ContentRef;
+  children: React.ReactNode;
+}
+
+interface StateProps {
+  hidden: boolean;
+  expanded: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  outputs: Immutable.List<any>;
+}
+
+export class IFrameOutputs extends React.PureComponent<ComponentProps & StateProps> {
+  render(): JSX.Element {
+    const { outputs, children, hidden, expanded } = this.props;
+    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"
+      >
+        <div className={`nteract-cell-outputs ${hidden ? "hidden" : ""} ${expanded ? "expanded" : ""}`}>
+          {outputs.map((output, index) => (
+            <Output output={output} key={index}>
+              {children}
+            </Output>
+          ))}
+        </div>
+      </SandboxFrame>
+    );
+  }
+}
+
+export const makeMapStateToProps = (
+  initialState: AppState,
+  ownProps: ComponentProps
+): ((state: AppState) => StateProps) => {
+  const mapStateToProps = (state: AppState): StateProps => {
+    let outputs = Immutable.List();
+    let hidden = false;
+    let expanded = false;
+
+    const { contentRef, id } = ownProps;
+    const model = selectors.model(state, { contentRef });
+
+    if (model && model.type === "notebook") {
+      const cell = selectors.notebook.cellById(model, { id });
+      if (cell) {
+        outputs = cell.get("outputs", Immutable.List());
+        hidden = cell.cell_type === "code" && cell.getIn(["metadata", "jupyter", "outputs_hidden"]);
+        expanded = cell.cell_type === "code" && cell.getIn(["metadata", "collapsed"]) === false;
+      }
+    }
+
+    return { outputs, hidden, expanded };
+  };
+  return mapStateToProps;
+};
+
+export default connect<StateProps, void, ComponentProps, AppState>(makeMapStateToProps)(IFrameOutputs);

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

@@ -0,0 +1,64 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { copyStyles } from "../../../../Utils/StyleUtils";
+
+interface SandboxFrameProps {
+  style: React.CSSProperties;
+  sandbox: string;
+}
+
+interface SandboxFrameState {
+  frame: HTMLIFrameElement;
+  frameBody: HTMLElement;
+  frameHeight: number;
+}
+
+export class SandboxFrame extends React.PureComponent<SandboxFrameProps, SandboxFrameState> {
+  private resizeObserver: ResizeObserver;
+
+  constructor(props: SandboxFrameProps) {
+    super(props);
+
+    this.state = {
+      frame: undefined,
+      frameBody: undefined,
+      frameHeight: 0,
+    };
+  }
+
+  render(): JSX.Element {
+    return (
+      <iframe
+        ref={(ele) => this.setState({ frame: ele })}
+        srcDoc={`<!DOCTYPE html>`}
+        onLoad={(event) => this.onFrameLoad(event)}
+        style={this.props.style}
+        sandbox={this.props.sandbox}
+        height={this.state.frameHeight}
+      >
+        {this.state.frameBody && ReactDOM.createPortal(this.props.children, this.state.frameBody)}
+      </iframe>
+    );
+  }
+
+  componentWillUnmount() {
+    this.resizeObserver?.disconnect();
+  }
+
+  onFrameLoad(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void {
+    const doc = (event.target as HTMLIFrameElement).contentDocument;
+    copyStyles(document, doc);
+
+    this.setState({
+      frameBody: doc.body,
+      frameHeight: doc.body.scrollHeight,
+    });
+
+    this.resizeObserver = new ResizeObserver(() =>
+      this.setState({
+        frameHeight: this.state.frameBody.scrollHeight,
+      })
+    );
+    this.resizeObserver.observe(doc.body);
+  }
+}

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

@@ -0,0 +1,26 @@
+import { Media } from "@nteract/outputs";
+import React from "react";
+
+interface Props {
+  /**
+   * The JavaScript code that we would like to execute.
+   */
+  data: string;
+  /**
+   * The media type associated with our component.
+   */
+  mediaType: "text/javascript";
+}
+
+export class JavaScript extends React.PureComponent<Props> {
+  static defaultProps = {
+    data: "",
+    mediaType: "application/javascript",
+  };
+
+  render(): JSX.Element {
+    return <Media.HTML data={`<script>${this.props.data}</script>`} />;
+  }
+}
+
+export default JavaScript;