From cc6c4d0480c4c70ae3d757cc41ea367aa70826eb Mon Sep 17 00:00:00 2001 From: Harsh Singh <64768386+harshdoesdev@users.noreply.github.com> Date: Mon, 11 Sep 2023 17:38:37 +0530 Subject: [PATCH] fix escape HTML in ftd.text (#1296) * fix escape HTML in ftd.text * added more characters in escape map * fixed tests * fixed test --- fastn-js/js/dom.js | 3 +- fastn-js/js/utils.js | 21 ++++---- fastn-js/js/virtual.js | 2 +- ftd/t/js/01-basic.html | 2 +- ftd/t/js/03-common-properties.html | 10 ++-- ftd/t/js/09-text-properties.html | 8 +-- ftd/t/js/18-rive.html | 2 +- ftd/t/js/31-advance-list.html | 2 +- ftd/t/js/46-code-languages.html | 44 ++++++++--------- ftd/t/js/47-ftd-code-syntax.html | 10 ++-- ftd/t/js/53-link-color.html | 4 +- ftd/t/js/56-title-fix.ftd | 5 ++ ftd/t/js/56-title-fix.html | 79 ++++++++++++++++++++++++++++++ 13 files changed, 138 insertions(+), 54 deletions(-) create mode 100644 ftd/t/js/56-title-fix.ftd create mode 100644 ftd/t/js/56-title-fix.html diff --git a/fastn-js/js/dom.js b/fastn-js/js/dom.js index 9f205471bb..8b211f8970 100644 --- a/fastn-js/js/dom.js +++ b/fastn-js/js/dom.js @@ -1836,8 +1836,7 @@ class Node2 { } else if (kind === fastn_dom.PropertyKind.StringValue) { this.#rawInnerValue = staticValue; if (!ssr) { - let escapedHtmlValue = fastn_utils.escapeHtmlInMarkdown(staticValue); - staticValue = fastn_utils.markdown_inline(escapedHtmlValue); + staticValue = fastn_utils.markdown_inline(staticValue); staticValue = fastn_utils.process_post_markdown(this.#node, staticValue); } this.#node.innerHTML = staticValue; diff --git a/fastn-js/js/utils.js b/fastn-js/js/utils.js index 70d9c89925..45fac08a34 100644 --- a/fastn-js/js/utils.js +++ b/fastn-js/js/utils.js @@ -421,21 +421,22 @@ let fastn_utils = { }, escapeHtmlInMarkdown(str) { + if(typeof str !== 'string') { + return str; + } + let result = ""; let ch_map = { - '<': "<" + '<': "<", + '>': ">", + '&': "&", + '"': """, + "'": "'", + '/': "/", }; - // To avoid replacing html characters inside body - let backtick_found = false; for (var i = 0; i < str.length; i++) { let current = str[i]; - if (current === '`') backtick_found = !backtick_found; - if (ch_map[current] !== undefined && !backtick_found) { - result += ch_map[current]; - } - else { - result += current; - } + result += ch_map[current] ?? current; } return result; }, diff --git a/fastn-js/js/virtual.js b/fastn-js/js/virtual.js index 96943ff361..15f293ebb5 100644 --- a/fastn-js/js/virtual.js +++ b/fastn-js/js/virtual.js @@ -68,7 +68,7 @@ class Node { toHtmlAsString() { const openingTag = `<${this.#tagName}${this.getDataIdString()}${this.getAttributesString()}${this.getClassString()}${this.getStyleString()}>`; const closingTag = ``; - const innerHTML = this.innerHTML; + const innerHTML = fastn_utils.escapeHtmlInMarkdown(this.innerHTML); const childNodes = this.#children.map(child => child.toHtmlAsString()).join(''); return `${openingTag}${innerHTML}${childNodes}${closingTag}`; diff --git a/ftd/t/js/01-basic.html b/ftd/t/js/01-basic.html index 83b955ae5b..ae244c274f 100644 --- a/ftd/t/js/01-basic.html +++ b/ftd/t/js/01-basic.html @@ -16,7 +16,7 @@ -
"Hello"
Hello
Hello
-
Start Idle
Idle/ Run
Wiper On/Off
Rainy On/Off
No Wiper On/Off
Sunny On/Off
Stationary On/Off
Bouncing On/Off
Broken On/Off
-
fastn
 
language
Enter name:
Enter score:
1
Arpita
100
2
Arpita
90
Total items are:
2
-
/-- ds.code:
+
/-- ds.code:
 lang: ftd
 
 fooo
 
;; Section Comment
 
-/-- ftd.text:
+/-- ftd.text:
 color: red
 
 This is body part of ftd.text
@@ -31,7 +31,7 @@
 
 -- ftd.text: Hello ;; This is inline comment
 
--- import: fastn-community.github.io/bling/quote
+-- import: fastn-community.github.io/bling/quote
 
 ;; Component invocation
 
@@ -96,7 +96,7 @@
 $loop$: $foo as $ui
 
;; Section Comment
 
-/-- ftd.text:
+/-- ftd.text:
 color: red
 
 This is body part of ftd.text
@@ -105,7 +105,7 @@
 
 -- ftd.text: Hello ;; This is inline comment
 
--- import: fastn-community.github.io/bling/quote
+-- import: fastn-community.github.io/bling/quote
 
 ;; Component invocation
 
diff --git a/ftd/t/js/53-link-color.html b/ftd/t/js/53-link-color.html
index a2126a6d6f..ac8937a99b 100644
--- a/ftd/t/js/53-link-color.html
+++ b/ftd/t/js/53-link-color.html
@@ -16,9 +16,9 @@
     
 
 
-
Click me
Hello world [Test](https://google.com)
+
Click me
Hello world [Test](https://google.com)
 
-This is awesome [Test](https://google.com)

diff --git a/ftd/t/js/56-title-fix.ftd b/ftd/t/js/56-title-fix.ftd
new file mode 100644
index 0000000000..5336920e87
--- /dev/null
+++ b/ftd/t/js/56-title-fix.ftd
@@ -0,0 +1,5 @@
+-- ftd.text:
+
+this is a `` 
+
+;; Escaped Output: this is a `<title>`
diff --git a/ftd/t/js/56-title-fix.html b/ftd/t/js/56-title-fix.html
new file mode 100644
index 0000000000..255d8cb981
--- /dev/null
+++ b/ftd/t/js/56-title-fix.html
@@ -0,0 +1,79 @@
+<html>
+<head>
+    <meta charset="UTF-8">
+    
+    <meta content="fastn" name="generator">
+    
+    
+    <script>
+        let __fastn_package_name__ = "foo";
+    </script>
+
+    <script src="fastn-js.js"></script>
+
+    <style>
+       
+    </style>
+</head>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+<body data-id="1"><div data-id="2" class="ft_column __w-1 __h-2"><div data-id="3">this is a `<title>`</div></div></body><style id="styles">
+    .__w-1 { width: 100%; }
+	.__h-2 { height: 100%; }
+    </style>
+<script>
+    (function() {
+        let global = {
+};
+let main = function (parent) {
+  let __fastn_super_package_name__ = __fastn_package_name__;
+  __fastn_package_name__ = "foo";
+  try {
+    let parenti0 = fastn_dom.createKernel(parent, fastn_dom.ElementKind.Text);
+    parenti0.setProperty(fastn_dom.PropertyKind.StringValue, "this is a `<title>`", inherited);
+  } finally {
+    __fastn_package_name__ = __fastn_super_package_name__;
+  }
+}
+global["main"] = main;
+fastn_dom.codeData.availableThemes["coldark-theme.dark"] = "../../theme_css/coldark-theme.dark.css";
+fastn_dom.codeData.availableThemes["coldark-theme.light"] = "../../theme_css/coldark-theme.light.css";
+fastn_dom.codeData.availableThemes["coy-theme"] = "../../theme_css/coy-theme.css";
+fastn_dom.codeData.availableThemes["dracula-theme"] = "../../theme_css/dracula-theme.css";
+fastn_dom.codeData.availableThemes["duotone-theme.dark"] = "../../theme_css/duotone-theme.dark.css";
+fastn_dom.codeData.availableThemes["duotone-theme.earth"] = "../../theme_css/duotone-theme.earth.css";
+fastn_dom.codeData.availableThemes["duotone-theme.forest"] = "../../theme_css/duotone-theme.forest.css";
+fastn_dom.codeData.availableThemes["duotone-theme.light"] = "../../theme_css/duotone-theme.light.css";
+fastn_dom.codeData.availableThemes["duotone-theme.sea"] = "../../theme_css/duotone-theme.sea.css";
+fastn_dom.codeData.availableThemes["duotone-theme.space"] = "../../theme_css/duotone-theme.space.css";
+fastn_dom.codeData.availableThemes["fastn-theme.dark"] = "../../theme_css/fastn-theme.dark.css";
+fastn_dom.codeData.availableThemes["fastn-theme.light"] = "../../theme_css/fastn-theme.light.css";
+fastn_dom.codeData.availableThemes["fire.light"] = "../../theme_css/fire.light.css";
+fastn_dom.codeData.availableThemes["gruvbox-theme.dark"] = "../../theme_css/gruvbox-theme.dark.css";
+fastn_dom.codeData.availableThemes["gruvbox-theme.light"] = "../../theme_css/gruvbox-theme.light.css";
+fastn_dom.codeData.availableThemes["laserwave-theme"] = "../../theme_css/laserwave-theme.css";
+fastn_dom.codeData.availableThemes["material-theme.dark"] = "../../theme_css/material-theme.dark.css";
+fastn_dom.codeData.availableThemes["material-theme.light"] = "../../theme_css/material-theme.light.css";
+fastn_dom.codeData.availableThemes["nightowl-theme"] = "../../theme_css/nightowl-theme.css";
+fastn_dom.codeData.availableThemes["one-theme.dark"] = "../../theme_css/one-theme.dark.css";
+fastn_dom.codeData.availableThemes["one-theme.light"] = "../../theme_css/one-theme.light.css";
+fastn_dom.codeData.availableThemes["vs-theme.dark"] = "../../theme_css/vs-theme.dark.css";
+fastn_dom.codeData.availableThemes["vs-theme.light"] = "../../theme_css/vs-theme.light.css";
+fastn_dom.codeData.availableThemes["ztouch-theme"] = "../../theme_css/ztouch-theme.css";
+
+        let main_wrapper = function (parent) {
+            let parenti0 = fastn_dom.createKernel(parent, fastn_dom.ElementKind.Column);
+            parenti0.setProperty(fastn_dom.PropertyKind.Width, fastn_dom.Resizing.FillContainer, inherited);
+            parenti0.setProperty(fastn_dom.PropertyKind.Height, fastn_dom.Resizing.FillContainer, inherited);
+            main(parenti0);
+        }
+        fastn_virtual.hydrate(main_wrapper);
+        ftd.post_init();
+    })();
+
+    window.onload = function() {
+        fastn_utils.resetFullHeight();
+        fastn_utils.setFullHeight();
+    };
+
+</script>
+</html>