Adds kwarg to disable html sanitization in gr.Chatbot() (#5304)

* disable sanitize * add changeset * Fix devcontainer postCreateCommand (#5289) * add chmod commands to grant execute permissions to each script before running them * increase the memory limit * Increase memory requirement to 8 * Setting a minimum specification for codespace machines * Rotate axes labels on LinePlot, BarPlot, and ScatterPlot (#5305) * add chmod commands to grant execute permissions to each script before running them * increase the memory limit * Increase memory requirement to 8 * Setting a minimum specification for codespace machines * Added label_angle parameter to LinePlot * add the x_label_angle and y_label_angle to the postprocess * Add x_label_angle and y_label_angle to ScatterPlot * Add x_label_angle and y_label_angle to BarPlot * Remove postCreateCommand update from this PR, it is in its own PR * Remove custumization on the devcontainer, it is on another PR * Remove extra line on the devcontainer, it is on another PR * add changeset * update the parameter definition in the docstring --------- Co-authored-by: Abubakar Abid <abubakar@huggingface.co> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * `make_waveform()` twitter video resolution fix (#5296) * waveform res fix * add changeset * add changeset * Improve audio streaming (#5238) * changes * changes * add changeset * add changeset * chages * Update silver-clowns-brush.md * changes * chagers * changes * Update silver-clowns-brush.md * change * change --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: pngwn <hello@pngwn.io> * Tweaks to `icon` parameter in `gr.Button()` (#5285) * button * add changeset * fix * add changeset * add changeset * types * type fix * formatting * fix based on review * fix unit tests * stories --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * test * test --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: aliabid94 <aabid94@gmail.com> Co-authored-by: pngwn <hello@pngwn.io> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Allow caching examples with streamed output (#5295) * changes * changes * add changeset * add changeset * chages * Update silver-clowns-brush.md * changes * chagers * changes * Update silver-clowns-brush.md * change * change * change * changes * chages * changes * add changeset * changes * changes * changes --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: pngwn <hello@pngwn.io> * Create event listener table for components on docs (#5298) * changes * changes * remove languages from code docs * fix img path in guide * rework event listeners * add changeset * remove console log * name it event arguments * Update js/_website/src/lib/components/EventListeners.svelte Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Update js/_website/src/lib/components/EventListeners.svelte Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * requested changes --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * merge * fix (#5308) * only start listening for events after the components are mounted (#5312) * only start listening for events after the components are mounted * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Restores missing part of bottom border on file component (#5313) * removes missing part of bottom border on file component * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * chore: update versions (#5177) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Test Blocks.svelte footer copy (#5307) * test test * fix test * tweak * tweak test name * ensure login form has correct styles (#5324) * fix changelog generation (#5328) * Add ignore scripts to pnpm i in pypi action (#5316) * add json generation to prepare * add changeset * remove pnpm prepare * add changeset * bring back prepare, add ignore scripts * delete changeset * add to right commadn * add frozen lockfile to gh_action_pypi * remove unused gh_action_pypi script * remove unused scripts --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * ensure dropdown stays open when identical data is passed in (#5323) * ensure dropwdown stays open when new data is passed in * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Fix ci again again again (#5329) * fix changelog generation * fix changelog generation * fix * chore: update versions (#5326) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Fix ci again again again (#5330) * fix changelog generation * fix changelog generation * fix * fix script * Fix ci again again again (#5331) * fix changelog generation * fix changelog generation * fix * fix script * fix script * Fix ci again again again (#5332) * fix changelog generation * fix changelog generation * fix * fix script * fix script * fix vars * Fix ci again again again (#5333) * fix changelog generation * fix changelog generation * fix * fix script * fix script * fix vars * fix vars * Fix Checkbox select dispatch (#5340) * Fix bug * add changeset --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * Minor bug fix sweep (#5284) * changes * changes * add changeset * changes * changes * fix box changes on website * add changeset * changes * changes * Revert "changes" This reverts commit 189b4e8. * chanegs * changes * changes * changes * changes * add changeset * Update fancy-bats-deny.md --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: aliabd <ali.si3luwa@gmail.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Fix: wrap avatar-image in a div to clip its shape (#5319) * fix: wrap avatar-image in a div to clip its shape and add data url support * add changeset * revert get file from data url * add changeset --------- Co-authored-by: Dawood Khan <dawoodkhan82@gmail.com> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> * chore: update versions (#5341) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * add kwarg to markdown * add changeset * config --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Faiga Alawad <faiga.alawd91@gmail.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co> Co-authored-by: aliabid94 <aabid94@gmail.com> Co-authored-by: pngwn <hello@pngwn.io> Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Hannah <hannahblair@users.noreply.github.com> Co-authored-by: Freddy Boulton <alfonsoboulton@gmail.com> Co-authored-by: Keldos <Keldos.ljw@gmail.com>
gradio-app · Aug 29, 2023 · 0589230 · 0589230
1 parent c5bf913
commit 0589230
Show file tree

Hide file tree

Showing 13 changed files with 1,550 additions and 1,421 deletions.
diff --git a/.changeset/clear-suits-own.md b/.changeset/clear-suits-own.md
@@ -0,0 +1,8 @@
+---
+"@gradio/chatbot": patch
+"@gradio/markdown": patch
+"gradio": patch
+"website": patch
+---
+
+fix:Adds kwarg to disable html sanitization in `gr.Chatbot()`
diff --git a/gradio/components/chatbot.py b/gradio/components/chatbot.py
@@ -55,6 +55,7 @@ def __init__(
         show_share_button: bool | None = None,
         show_copy_button: bool = False,
         avatar_images: tuple[str | Path | None, str | Path | None] | None = None,
+        sanitize_html: bool = True,
         bubble_full_width: bool = True,
         **kwargs,
     ):
@@ -77,6 +78,7 @@ def __init__(
             show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
             show_copy_button: If True, will show a copy button for each chatbot message.
             avatar_images: Tuple of two avatar image paths or URLs for user and bot (in that order). Pass None for either the user or bot image to skip. Must be within the working directory of the Gradio app or an external URL.
+            sanitize_html: If False, will disable HTML sanitization for chatbot messages. This is not recommended, as it can lead to security vulnerabilities.
             bubble_full_width: If False, the chat bubble will fit to the content of the message. If True (default), the chat bubble will be the full width of the component.
         """
         if color_map is not None:
@@ -99,6 +101,7 @@ def __init__(
             else show_share_button
         )
         self.show_copy_button = show_copy_button
+        self.sanitize_html = sanitize_html
         self.bubble_full_width = bubble_full_width
         IOComponent.__init__(
             self,
@@ -125,6 +128,7 @@ def get_config(self):
             "rtl": self.rtl,
             "show_copy_button": self.show_copy_button,
             "avatar_images": self.avatar_images,
+            "sanitize_html": self.sanitize_html,
             "bubble_full_width": self.bubble_full_width,
             **IOComponent.get_config(self),
         }
@@ -146,6 +150,7 @@ def update(
         show_share_button: bool | None = None,
         show_copy_button: bool | None = None,
         avatar_images: tuple[str | Path | None] | None = None,
+        sanitize_html: bool | None = None,
         bubble_full_width: bool | None = None,
     ):
         updated_config = {
@@ -162,6 +167,7 @@ def update(
             "latex_delimiters": latex_delimiters,
             "show_copy_button": show_copy_button,
             "avatar_images": avatar_images,
+            "sanitize_html": sanitize_html,
             "bubble_full_width": bubble_full_width,
             "__type__": "update",
         }

diff --git a/gradio/components/markdown.py b/gradio/components/markdown.py
@@ -36,6 +36,7 @@ def __init__(
         visible: bool = True,
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
+        sanitize_html: bool = True,
         **kwargs,
     ):
         """
@@ -46,11 +47,13 @@ def __init__(
             visible: If False, component will be hidden.
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            sanitize_html: If False, will disable HTML sanitization when converted from markdown. This is not recommended, as it can lead to security vulnerabilities.
         """
         self.rtl = rtl
         if latex_delimiters is None:
             latex_delimiters = [{"left": "$", "right": "$", "display": False}]
         self.latex_delimiters = latex_delimiters
+        self.sanitize_html = sanitize_html
 
         IOComponent.__init__(
             self,
@@ -78,6 +81,7 @@ def get_config(self):
             "value": self.value,
             "rtl": self.rtl,
             "latex_delimiters": self.latex_delimiters,
+            "sanitize_html": self.sanitize_html,
             **Component.get_config(self),
         }
 
@@ -87,12 +91,14 @@ def update(
         visible: bool | None = None,
         rtl: bool | None = None,
         latex_delimiters: list[dict[str, str | bool]] | None = None,
+        sanitize_html: bool | None = None,
     ):
         updated_config = {
             "visible": visible,
             "value": value,
             "rtl": rtl,
             "latex_delimiters": latex_delimiters,
+            "sanitize_html": sanitize_html,
             "__type__": "update",
         }
         return updated_config

diff --git a/js/_website/src/lib/components/EventListeners.svelte b/js/_website/src/lib/components/EventListeners.svelte
@@ -21,8 +21,8 @@
 	</h4>
 	<p class="mb-4 text-lg text-gray-600">
 		The <span class="font-mono">{fns[0].parent.replace("gradio.", "")}</span>
-		component supports the following event listeners. Each event listener takes
-		the same parameters, which are listed in the
+		component supports the following event listeners. Each event listener takes the
+		same parameters, which are listed in the
 		<a href="#event-listeners-arguments" class="text-orange-500 font-light"
 			>Event Arguments</a
 		> table below.

diff --git a/js/chatbot/static/ChatBot.svelte b/js/chatbot/static/ChatBot.svelte
@@ -27,6 +27,7 @@
 	export let rtl = false;
 	export let show_copy_button = false;
 	export let avatar_images: [string | null, string | null] = [null, null];
+	export let sanitize_html = true;
 	export let bubble_full_width = true;
 	export let root: string;
 	export let root_url: null | string;
@@ -123,7 +124,12 @@
 							dir={rtl ? "rtl" : "ltr"}
 						>
 							{#if typeof message === "string"}
-								<Markdown {message} {latex_delimiters} on:load={scroll} />
+								<Markdown
+									{message}
+									{latex_delimiters}
+									{sanitize_html}
+									on:load={scroll}
+								/>
 								{#if feedback && j == 1}
 									<div class="feedback">
 										{#each feedback as f}

diff --git a/js/chatbot/static/StaticChatbot.svelte b/js/chatbot/static/StaticChatbot.svelte
@@ -23,6 +23,7 @@
 	export let show_share_button = false;
 	export let rtl = false;
 	export let show_copy_button = false;
+	export let sanitize_html = true;
 	export let bubble_full_width = true;
 	export let latex_delimiters: {
 		left: string;
@@ -97,6 +98,7 @@
 			on:share={(e) => gradio.dispatch("share", e.detail)}
 			on:error={(e) => gradio.dispatch("error", e.detail)}
 			{avatar_images}
+			{sanitize_html}
 			{bubble_full_width}
 			{root_url}
 			{root}

diff --git a/js/markdown/static/Markdown.svelte b/js/markdown/static/Markdown.svelte
@@ -10,6 +10,7 @@
 	export let value: string;
 	export let min_height = false;
 	export let rtl = false;
+	export let sanitize_html = true;
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
@@ -31,7 +32,12 @@
 	dir={rtl ? "rtl" : "ltr"}
 	use:copy
 >
-	<MarkdownCode message={value} {latex_delimiters} chatbot={false} />
+	<MarkdownCode
+		message={value}
+		{latex_delimiters}
+		{sanitize_html}
+		chatbot={false}
+	/>
 </div>
 
 <style>

diff --git a/js/markdown/static/MarkdownCode.svelte b/js/markdown/static/MarkdownCode.svelte
@@ -19,13 +19,15 @@
 
 	export let chatbot = true;
 	export let message: string;
+	export let sanitize_html = true;
 	export let latex_delimiters: {
 		left: string;
 		right: string;
 		display: boolean;
 	}[];
 
 	let el: HTMLSpanElement;
+	let html: string;
 
 	DOMPurify.addHook("afterSanitizeAttributes", function (node) {
 		if ("target" in node) {
@@ -36,9 +38,13 @@
 
 	$: el && html && render_html(message);
 
-	$: html =
-		message && message.trim() ? DOMPurify.sanitize(marked.parse(message)) : "";
-
+	$: if (message && message.trim()) {
+		html = sanitize_html
+			? DOMPurify.sanitize(marked.parse(message))
+			: marked.parse(message);
+	} else {
+		html = "";
+	}
 	async function render_html(value: string): Promise<void> {
 		if (latex_delimiters.length > 0) {
 			render_math_in_element(el, {

diff --git a/js/markdown/static/StaticMarkdown.svelte b/js/markdown/static/StaticMarkdown.svelte
@@ -13,6 +13,7 @@
 	export let value = "";
 	export let loading_status: LoadingStatus;
 	export let rtl = false;
+	export let sanitize_html = true;
 	export let gradio: Gradio<{
 		change: never;
 	}>;
@@ -37,6 +38,7 @@
 			{rtl}
 			on:change={() => gradio.dispatch("change")}
 			{latex_delimiters}
+			{sanitize_html}
 		/>
 	</div>
 </Block>

diff --git a/test/test_components.py b/test/test_components.py
@@ -2018,6 +2018,7 @@ def test_component_functions(self):
             "rtl": False,
             "show_copy_button": False,
             "avatar_images": (None, None),
+            "sanitize_html": True,
             "bubble_full_width": True,
         }