Escape HTML output characters generated by R code output (#116)

coatless · Dec 7, 2023 · c9f8640 · c9f8640
1 parent f81f1b5
commit c9f8640
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 3 deletions.
diff --git a/_extensions/webr/_extension.yml b/_extensions/webr/_extension.yml
@@ -1,7 +1,7 @@
 name: webr
 title: Embedded webr code cells
 author: James Joseph Balamuta
-version: 0.4.0-dev.2
+version: 0.4.0-dev.3
 quarto-required: ">=1.2.198"
 contributes:
   filters:

diff --git a/_extensions/webr/webr-context-interactive.html b/_extensions/webr/webr-context-interactive.html
@@ -188,7 +188,7 @@
         .filter(evt => evt.type === "stdout" || evt.type === "stderr")
         .map((evt, index) => {
           const className = `qwebr-output-code-${evt.type}`;
-          return `<code id="${className}-editor-{{WEBRCOUNTER}}-result-${index + 1}" class="${className}">${evt.data}</code>`;
+          return `<code id="${className}-editor-{{WEBRCOUNTER}}-result-${index + 1}" class="${className}">${qwebrEscapeHTMLCharacters(evt.data)}</code>`;
         })
         .join("\n");
 

diff --git a/_extensions/webr/webr-context-output.html b/_extensions/webr/webr-context-output.html
@@ -72,7 +72,7 @@
         .filter(evt => evt.type === "stdout" || evt.type === "stderr")
         .map((evt, index) => {
           const className = `qwebr-output-code-${evt.type}`;
-          return `<code id="${className}-editor-{{WEBRCOUNTER}}-result-${index + 1}" class="${className}">${evt.data}</code>`;
+          return `<code id="${className}-editor-{{WEBRCOUNTER}}-result-${index + 1}" class="${className}">${qwebrEscapeHTMLCharacters(evt.data)}</code>`;
         })
         .join("\n");
 

diff --git a/_extensions/webr/webr-init.html b/_extensions/webr/webr-init.html
@@ -292,4 +292,14 @@
     true
   );
 
+  // Global version of the Escape HTML function that converts HTML 
+  // characters to their HTML entities.
+  globalThis.qwebrEscapeHTMLCharacters = function(unsafe) {
+    return unsafe
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  };
 </script>
diff --git a/docs/qwebr-release-notes.qmd b/docs/qwebr-release-notes.qmd
@@ -19,6 +19,7 @@ format:
 
 ## Bugfixes
 
+- Prevented HTML output being shown as HTML by replacing HTML characters like `<`, `>`, `&`, etc., with their corresponding HTML entities. ([#115](https://github.com/coatless/quarto-webr/issues/115), h/t [@gvelasq](https://github.com/gvelasq))
 - Fixed display of text found after a code cell in RevealJS appearing off the page ([#102](https://github.com/coatless/quarto-webr/issues/102), [#106](https://github.com/coatless/quarto-webr/issues/106))
 
 ## Documentation 

diff --git a/tests/qwebr-test-escape-html-output-characters.qmd b/tests/qwebr-test-escape-html-output-characters.qmd
@@ -0,0 +1,34 @@
+---
+title: "Test: Escape Output with HTML Entities"
+format: html
+engine: knitr
+filters:
+  - webr
+---
+
+Ensure HTML output is escaped.
+
+## Interactive
+
+```{webr-r}
+# This function converts a markdown link into HTML
+"[Posit](https://posit.co)" |> (\(.) {
+  text <- sub("\\].*", "", sub(".*\\[", "", .))
+  url <- sub("\\).*", "", sub(".*\\(", "", .))
+  
+  writeLines(noquote(paste0('<a href="', url, '" target = "_blank">', text, '</a>')))
+})()
+```
+
+## Non-interactive
+
+```{webr-r}
+#| context: output
+# This function converts a markdown link into HTML
+"[Posit](https://posit.co)" |> (\(.) {
+  text <- sub("\\].*", "", sub(".*\\[", "", .))
+  url <- sub("\\).*", "", sub(".*\\(", "", .))
+  
+  writeLines(noquote(paste0('<a href="', url, '" target = "_blank">', text, '</a>')))
+})()
+```