From cb7fe4a0008529cfa69f33cd95b67c339bd9f69f Mon Sep 17 00:00:00 2001
From: Masaaki Hirotsu <hirotsu.masaaki@gmail.com>
Date: Thu, 14 May 2026 22:25:07 +0900
Subject: [PATCH 1/3] fix(render-html): escape script end tag
 case-insensitively

HTML parsers terminate <script> blocks on any case variant of the
</script tag, including </SCRIPT>, </Script>, or </script foo>. The
previous escape only matched the exact lowercase </script> string,
which let metadata containing those variants escape the JSON island
and execute as markup. Match the </script prefix case-insensitively
and preserve the original casing when emitting the inert backslash
sequence, and cover the variants with regression tests.
---
 crates/relune-render-html/src/html.rs | 89 +++++++++++++++++++++++++--
 1 file changed, 83 insertions(+), 6 deletions(-)

diff --git a/crates/relune-render-html/src/html.rs b/crates/relune-render-html/src/html.rs
index 812ffa2..42ed4d6 100644
--- a/crates/relune-render-html/src/html.rs
+++ b/crates/relune-render-html/src/html.rs
@@ -21,13 +21,50 @@ static FAVICON_DATA_URI: LazyLock<String> = LazyLock::new(|| {
 });
 
 /// Escape JSON content for safe embedding in a script tag.
+///
+/// The HTML parser treats script end tags case-insensitively, so any
+/// `</script` sequence must be neutralized regardless of casing (e.g.
+/// `</SCRIPT>`, `</Script foo>`) to prevent premature script termination
+/// and XSS via metadata. `<!--` and `-->` are also neutralized to avoid
+/// HTML comment issues in legacy parsers.
 pub fn escape_json_for_script(json: &str) -> String {
-    // For JSON inside a script tag, we need to escape </script> to prevent
-    // premature script termination. We also escape <!-- and --> to prevent
-    // HTML comment issues in older browsers.
-    json.replace("</script>", "<\\/script>")
-        .replace("<!--", "<\\!--")
-        .replace("-->", "-\\->")
+    let bytes = json.as_bytes();
+    let mut out = String::with_capacity(json.len());
+    let mut copy_from = 0;
+    let mut i = 0;
+    while i < bytes.len() {
+        let b = bytes[i];
+        if b == b'<' && matches_ascii_ci(bytes, i + 1, b"/script") {
+            // Preserve the original casing of the matched substring and only
+            // insert the inert backslash before the slash.
+            out.push_str(&json[copy_from..i]);
+            out.push_str("<\\");
+            out.push_str(&json[i + 1..i + "</script".len()]);
+            i += "</script".len();
+            copy_from = i;
+        } else if b == b'<' && bytes.get(i + 1..i + 4) == Some(b"!--") {
+            out.push_str(&json[copy_from..i]);
+            out.push_str("<\\!--");
+            i += "<!--".len();
+            copy_from = i;
+        } else if b == b'-' && bytes.get(i + 1..i + 3) == Some(b"->") {
+            out.push_str(&json[copy_from..i]);
+            out.push_str("-\\->");
+            i += "-->".len();
+            copy_from = i;
+        } else {
+            i += 1;
+        }
+    }
+    out.push_str(&json[copy_from..]);
+    out
+}
+
+/// Returns true when `bytes[start..]` starts with `needle` ignoring ASCII case.
+fn matches_ascii_ci(bytes: &[u8], start: usize, needle: &[u8]) -> bool {
+    bytes
+        .get(start..start + needle.len())
+        .is_some_and(|slice| slice.eq_ignore_ascii_case(needle))
 }
 
 /// Build the complete HTML document.
@@ -189,6 +226,32 @@ mod tests {
         assert!(!escaped.contains("</script>"));
     }
 
+    #[test]
+    fn test_escape_json_for_script_neutralizes_uppercase_end_tag() {
+        // HTML parsers treat </SCRIPT> identically to </script>; the escape
+        // must catch it to prevent XSS via metadata that contains uppercase
+        // or mixed-case script end tags.
+        let input = r#"{"name": "</SCRIPT>"}"#;
+        let escaped = escape_json_for_script(input);
+        assert_eq!(escaped, r#"{"name": "<\/SCRIPT>"}"#);
+        assert!(!escaped.to_ascii_lowercase().contains("</script>"));
+    }
+
+    #[test]
+    fn test_escape_json_for_script_neutralizes_mixed_case_end_tag() {
+        let input = r#"{"name": "</Script>"}"#;
+        let escaped = escape_json_for_script(input);
+        assert_eq!(escaped, r#"{"name": "<\/Script>"}"#);
+    }
+
+    #[test]
+    fn test_escape_json_for_script_neutralizes_end_tag_with_attribute() {
+        // Browsers still terminate the script when </script foo> appears.
+        let input = r#"{"name": "</script foo>"}"#;
+        let escaped = escape_json_for_script(input);
+        assert_eq!(escaped, r#"{"name": "<\/script foo>"}"#);
+    }
+
     #[test]
     fn test_escape_json_preserves_content() {
         let input = r#"{"key": "value", "number": 42}"#;
@@ -196,6 +259,20 @@ mod tests {
         assert_eq!(escaped, input);
     }
 
+    #[test]
+    fn test_escape_json_preserves_unicode_content() {
+        let input = r#"{"name": "テスト", "emoji": "🚀"}"#;
+        let escaped = escape_json_for_script(input);
+        assert_eq!(escaped, input);
+    }
+
+    #[test]
+    fn test_escape_json_neutralizes_html_comments() {
+        let input = r#"{"a": "<!--", "b": "-->"}"#;
+        let escaped = escape_json_for_script(input);
+        assert_eq!(escaped, r#"{"a": "<\!--", "b": "-\->"}"#);
+    }
+
     #[test]
     fn test_escape_xml_text_for_html() {
         assert_eq!(escape_xml_text("<script>"), "&lt;script&gt;");

From f97b2a575ae7110757c0150ab7055757c4e95fea Mon Sep 17 00:00:00 2001
From: Masaaki Hirotsu <hirotsu.masaaki@gmail.com>
Date: Thu, 14 May 2026 22:38:09 +0900
Subject: [PATCH 2/3] refactor(render-html): require typed SvgArtifact for HTML
 embedding

render_html previously accepted any &str as the SVG payload, so the
crate boundary allowed arbitrary <script> blocks, event handlers, or
external resource references to be wrapped in the trusted HTML
document. Introduce SvgArtifact in relune-render-svg as the typed
output of render_svg / render_svg_with_overlay, and require
&SvgArtifact in render_html / render_html_with_overlay so the only
zero-friction path is through the SVG renderer that already escapes
user-derived content. SvgArtifact::from_trusted remains for callers
that need to wrap an externally produced SVG and accept the same
escaping contract.
---
 Cargo.lock                               |  1 +
 crates/relune-app/src/usecases/diff.rs   |  2 +-
 crates/relune-app/src/usecases/render.rs |  2 +-
 crates/relune-render-html/Cargo.toml     |  1 +
 crates/relune-render-html/src/lib.rs     | 43 ++++++++-------
 crates/relune-render-svg/src/lib.rs      | 67 ++++++++++++++++++++----
 6 files changed, 87 insertions(+), 29 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 190501c..0248d03 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2253,6 +2253,7 @@ dependencies = [
  "insta",
  "relune-core",
  "relune-layout",
+ "relune-render-svg",
  "relune-render-theme",
  "serde",
  "serde_json",
diff --git a/crates/relune-app/src/usecases/diff.rs b/crates/relune-app/src/usecases/diff.rs
index 214b46c..bda581f 100644
--- a/crates/relune-app/src/usecases/diff.rs
+++ b/crates/relune-app/src/usecases/diff.rs
@@ -118,7 +118,7 @@ fn render_with_schema(
     let svg = render_svg_with_overlay(&positioned, svg_options, request.overlay.as_ref())?;
 
     match request.output_format {
-        OutputFormat::Svg => Ok(svg),
+        OutputFormat::Svg => Ok(svg.into_string()),
         OutputFormat::Html => {
             let html_theme = match request.options.theme {
                 RenderTheme::Light => HtmlTheme::Light,
diff --git a/crates/relune-app/src/usecases/render.rs b/crates/relune-app/src/usecases/render.rs
index d28cac0..5e1139e 100644
--- a/crates/relune-app/src/usecases/render.rs
+++ b/crates/relune-app/src/usecases/render.rs
@@ -198,7 +198,7 @@ fn render_svg_output(
         compact: false,
         show_tooltips: true,
     };
-    Ok(render_svg_with_overlay(positioned, options, overlay)?)
+    Ok(render_svg_with_overlay(positioned, options, overlay)?.into_string())
 }
 
 /// Render to HTML format.
diff --git a/crates/relune-render-html/Cargo.toml b/crates/relune-render-html/Cargo.toml
index 8d6e88c..ddbc257 100644
--- a/crates/relune-render-html/Cargo.toml
+++ b/crates/relune-render-html/Cargo.toml
@@ -9,6 +9,7 @@ rust-version.workspace = true
 base64.workspace = true
 relune-core = { path = "../relune-core" }
 relune-layout = { path = "../relune-layout" }
+relune-render-svg = { path = "../relune-render-svg" }
 relune-render-theme = { path = "../relune-render-theme" }
 serde.workspace = true
 serde_json.workspace = true
diff --git a/crates/relune-render-html/src/lib.rs b/crates/relune-render-html/src/lib.rs
index b700f15..9ef1cf6 100644
--- a/crates/relune-render-html/src/lib.rs
+++ b/crates/relune-render-html/src/lib.rs
@@ -12,6 +12,7 @@ mod options;
 
 pub use error::HtmlRenderError;
 pub use options::{HtmlRenderOptions, Theme};
+pub use relune_render_svg::SvgArtifact;
 
 use relune_layout::LayoutGraph;
 
@@ -20,7 +21,7 @@ use relune_layout::LayoutGraph;
 /// # Arguments
 ///
 /// * `graph` - The layout graph containing node/edge/group information
-/// * `svg` - Pre-rendered SVG content to embed
+/// * `svg` - Pre-rendered SVG produced by [`relune_render_svg`]
 /// * `options` - HTML rendering options
 ///
 /// # Returns
@@ -28,7 +29,7 @@ use relune_layout::LayoutGraph;
 /// A complete, self-contained HTML document string.
 pub fn render_html(
     graph: &LayoutGraph,
-    svg: &str,
+    svg: &SvgArtifact,
     options: &HtmlRenderOptions,
 ) -> Result<String, HtmlRenderError> {
     render_html_with_overlay(graph, svg, options, None)
@@ -40,7 +41,7 @@ pub fn render_html(
 /// so that client-side scripts can display lint warnings, diff status, etc.
 pub fn render_html_with_overlay(
     graph: &LayoutGraph,
-    svg: &str,
+    svg: &SvgArtifact,
     options: &HtmlRenderOptions,
     overlay: Option<&relune_layout::DiagramOverlay>,
 ) -> Result<String, HtmlRenderError> {
@@ -48,7 +49,7 @@ pub fn render_html_with_overlay(
     let metadata_json = serde_json::to_string(&metadata)?;
     let escaped_metadata = html::escape_json_for_script(&metadata_json);
 
-    let html_document = html::build_html_document(svg, &escaped_metadata, options);
+    let html_document = html::build_html_document(svg.as_str(), &escaped_metadata, options);
 
     Ok(html_document)
 }
@@ -151,12 +152,15 @@ mod tests {
         }
     }
 
-    fn create_test_svg() -> &'static str {
-        r#"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 400">
+    fn create_test_svg() -> SvgArtifact {
+        SvgArtifact::from_trusted(
+            r#"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 400">
   <g class="node" data-id="users"><rect x="56" y="56" width="260" height="94"/></g>
   <g class="node" data-id="posts"><rect x="56" y="230" width="260" height="112"/></g>
   <g class="edge"><line x1="316" y1="286" x2="56" y2="103"/></g>
 </svg>"#
+                .to_string(),
+        )
     }
 
     #[test]
@@ -165,7 +169,7 @@ mod tests {
         let svg = create_test_svg();
         let options = HtmlRenderOptions::default();
 
-        let result = render_html(&graph, svg, &options).unwrap();
+        let result = render_html(&graph, &svg, &options).unwrap();
 
         assert!(result.contains("<!DOCTYPE html>"));
         assert!(result.contains("<html"));
@@ -180,7 +184,7 @@ mod tests {
         let svg = create_test_svg();
         let options = HtmlRenderOptions::default();
 
-        let result = render_html(&graph, svg, &options).unwrap();
+        let result = render_html(&graph, &svg, &options).unwrap();
 
         assert!(result.contains(r#"<svg xmlns="http://www.w3.org/2000/svg""#));
         assert!(result.contains(r#"data-id="users""#));
@@ -193,7 +197,7 @@ mod tests {
         let svg = create_test_svg();
         let options = HtmlRenderOptions::default();
 
-        let result = render_html(&graph, svg, &options).unwrap();
+        let result = render_html(&graph, &svg, &options).unwrap();
 
         assert!(result.contains(r#"id="relune-metadata""#));
         assert!(result.contains(r#""tables""#));
@@ -211,7 +215,7 @@ mod tests {
             ..Default::default()
         };
 
-        let result = render_html(&graph, svg, &options).unwrap();
+        let result = render_html(&graph, &svg, &options).unwrap();
 
         assert!(result.contains("<title>My Schema ERD</title>"));
         assert!(result.contains("<h1>My Schema ERD</h1>"));
@@ -226,7 +230,7 @@ mod tests {
             ..Default::default()
         };
 
-        let result = render_html(&graph, svg, &options).unwrap();
+        let result = render_html(&graph, &svg, &options).unwrap();
 
         assert!(result.contains("--bg-color: #0c0f1a"));
         assert!(result.contains("--text-color: #e2e8f0"));
@@ -241,7 +245,7 @@ mod tests {
             ..Default::default()
         };
 
-        let result = render_html(&graph, svg, &options).unwrap();
+        let result = render_html(&graph, &svg, &options).unwrap();
 
         assert!(result.contains("--bg-color: #f7f8fc"));
         assert!(result.contains("--text-color: #1e293b"));
@@ -253,7 +257,7 @@ mod tests {
         let svg = create_test_svg();
         let options = HtmlRenderOptions::default();
 
-        let result = render_html(&graph, svg, &options).unwrap();
+        let result = render_html(&graph, &svg, &options).unwrap();
 
         assert!(result.contains("updateTransform"));
         assert!(result.contains("addEventListener"));
@@ -265,7 +269,7 @@ mod tests {
         let svg = create_test_svg();
         let options = HtmlRenderOptions::default();
 
-        let result = render_html(&graph, svg, &options).unwrap();
+        let result = render_html(&graph, &svg, &options).unwrap();
 
         // Should not reference external HTTP resources
         assert!(result.contains("<link"));
@@ -279,7 +283,7 @@ mod tests {
         let svg = create_test_svg();
         let options = HtmlRenderOptions::default();
 
-        let result = render_html(&graph, svg, &options).unwrap();
+        let result = render_html(&graph, &svg, &options).unwrap();
 
         // Check metadata contains expected structure
         assert!(result.contains(r#""id":"users""#));
@@ -350,12 +354,15 @@ mod tests {
             node_index: std::collections::BTreeMap::new(),
             reverse_index: std::collections::BTreeMap::new(),
         };
-        let svg = r#"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 400">
+        let svg = SvgArtifact::from_trusted(
+            r#"<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432 400">
   <g class="table-node node node-kind-view" data-table-id="active_users" data-id="active_users" data-node-kind="view"></g>
   <g class="table-node node node-kind-enum" data-table-id="status" data-id="status" data-node-kind="enum"></g>
-</svg>"#;
+</svg>"#
+                .to_string(),
+        );
 
-        let result = render_html(&graph, svg, &HtmlRenderOptions::default()).unwrap();
+        let result = render_html(&graph, &svg, &HtmlRenderOptions::default()).unwrap();
 
         assert!(result.contains(r#""kind":"view""#));
         assert!(result.contains(r#""kind":"enum""#));
diff --git a/crates/relune-render-svg/src/lib.rs b/crates/relune-render-svg/src/lib.rs
index ffde325..1079af3 100644
--- a/crates/relune-render-svg/src/lib.rs
+++ b/crates/relune-render-svg/src/lib.rs
@@ -26,11 +26,56 @@ pub use legend::render_legend;
 pub use options::SvgRenderOptions;
 pub use theme::{Theme, ThemeColors, get_colors};
 
+/// SVG produced by this crate's rendering pipeline.
+///
+/// This is the typed boundary between SVG production and downstream consumers
+/// (notably HTML embedding). All values written through this crate's renderers
+/// are escaped via [`relune_render_theme::escape_xml_text`], so a `SvgArtifact`
+/// is safe to embed in HTML without further sanitization. Callers that need to
+/// wrap an externally produced SVG must use [`SvgArtifact::from_trusted`] and
+/// uphold the same guarantee themselves.
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct SvgArtifact {
+    svg: String,
+}
+
+impl SvgArtifact {
+    /// Wrap a string that the caller asserts is safe SVG.
+    ///
+    /// The caller is responsible for ensuring the string contains no
+    /// unescaped script content, event handlers, or external references.
+    /// Prefer obtaining a `SvgArtifact` from [`render_svg`] or
+    /// [`render_svg_with_overlay`], which apply the required escaping
+    /// internally.
+    #[must_use]
+    pub const fn from_trusted(svg: String) -> Self {
+        Self { svg }
+    }
+
+    /// Borrow the SVG content as a string slice.
+    #[must_use]
+    pub fn as_str(&self) -> &str {
+        &self.svg
+    }
+
+    /// Consume the artifact and return the underlying SVG string.
+    #[must_use]
+    pub fn into_string(self) -> String {
+        self.svg
+    }
+}
+
+impl AsRef<str> for SvgArtifact {
+    fn as_ref(&self) -> &str {
+        &self.svg
+    }
+}
+
 /// When any backbone segment is shorter than this, Crow's Foot `<marker>` geometry
 /// (refX up to ~26px) intrudes past orthogonal elbows; draw inline symbols instead.
 const MIN_SVG_MARKER_BACKBONE_SEGMENT: f32 = 32.0;
 
-/// Renders a positioned graph to an SVG string with the given options.
+/// Renders a positioned graph to an [`SvgArtifact`] with the given options.
 ///
 /// Supports group rendering for visually grouping related tables.
 /// When an overlay is provided, annotations (lint warnings, diff status, etc.)
@@ -38,19 +83,19 @@ const MIN_SVG_MARKER_BACKBONE_SEGMENT: f32 = 32.0;
 pub fn render_svg(
     graph: &relune_layout::PositionedGraph,
     options: SvgRenderOptions,
-) -> Result<String, SvgRenderError> {
+) -> Result<SvgArtifact, SvgRenderError> {
     render_svg_with_overlay(graph, options, None)
 }
 
-/// Renders a positioned graph to an SVG string with an optional overlay.
+/// Renders a positioned graph to an [`SvgArtifact`] with an optional overlay.
 ///
-/// This is the full-featured entry point. `render_svg` delegates here with
-/// `overlay = None` for backwards compatibility.
+/// This is the full-featured entry point. [`render_svg`] delegates here with
+/// `overlay = None`.
 pub fn render_svg_with_overlay(
     graph: &relune_layout::PositionedGraph,
     options: SvgRenderOptions,
     overlay: Option<&relune_layout::DiagramOverlay>,
-) -> Result<String, SvgRenderError> {
+) -> Result<SvgArtifact, SvgRenderError> {
     let colors = get_colors(options.theme);
     let mut out = String::with_capacity(estimate_svg_capacity(graph, options, overlay));
 
@@ -108,7 +153,7 @@ pub fn render_svg_with_overlay(
     }
 
     out.push_str("</svg>");
-    Ok(out)
+    Ok(SvgArtifact::from_trusted(out))
 }
 
 fn estimate_svg_capacity(
@@ -577,7 +622,9 @@ mod tests {
     };
 
     fn render_svg(graph: &relune_layout::PositionedGraph, options: SvgRenderOptions) -> String {
-        super::render_svg(graph, options).expect("svg rendering should succeed in tests")
+        super::render_svg(graph, options)
+            .expect("svg rendering should succeed in tests")
+            .into_string()
     }
 
     fn render_svg_with_overlay(
@@ -587,6 +634,7 @@ mod tests {
     ) -> String {
         super::render_svg_with_overlay(graph, options, overlay)
             .expect("svg overlay rendering should succeed in tests")
+            .into_string()
     }
 
     fn relation_flags(
@@ -1844,7 +1892,8 @@ mod snapshot_tests {
             .and_then(|schema| build_layout(schema).ok())
             .and_then(|positioned_graph| {
                 render_svg(&positioned_graph, SvgRenderOptions::default()).ok()
-            });
+            })
+            .map(SvgArtifact::into_string);
         (parse_output, svg)
     }
 

From d61f42269635203e5b3f3274e5120481f97bb355 Mon Sep 17 00:00:00 2001
From: Masaaki Hirotsu <hirotsu.masaaki@gmail.com>
Date: Thu, 14 May 2026 23:14:55 +0900
Subject: [PATCH 3/3] fix(render-html): emit JSON-valid Unicode escapes for
 HTML comment markers

Previously `<!--` / `-->` were rewritten as `<\!--` / `-\->`, which are
not valid JSON escape sequences. Browser-side `JSON.parse` of the
embedded metadata would therefore fail on any metadata containing those
markers, leaving search/highlight/etc. with `null`.

Use `<!--` and `-->` instead. The HTML parser still cannot see
a literal `<!--` or `-->` in the script body, but `JSON.parse` losslessly
recovers the original characters.
---
 crates/relune-render-html/src/html.rs | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/crates/relune-render-html/src/html.rs b/crates/relune-render-html/src/html.rs
index 42ed4d6..4c7c72c 100644
--- a/crates/relune-render-html/src/html.rs
+++ b/crates/relune-render-html/src/html.rs
@@ -43,13 +43,16 @@ pub fn escape_json_for_script(json: &str) -> String {
             i += "</script".len();
             copy_from = i;
         } else if b == b'<' && bytes.get(i + 1..i + 4) == Some(b"!--") {
+            // Emit a JSON `\uXXXX` escape for `<` so the HTML parser never sees
+            // `<!--`, while `JSON.parse` still recovers the original character.
             out.push_str(&json[copy_from..i]);
-            out.push_str("<\\!--");
+            out.push_str("\\u003C!--");
             i += "<!--".len();
             copy_from = i;
         } else if b == b'-' && bytes.get(i + 1..i + 3) == Some(b"->") {
+            // Same approach for `-->`: escape `>` so the runtime string is unchanged.
             out.push_str(&json[copy_from..i]);
-            out.push_str("-\\->");
+            out.push_str("--\\u003E");
             i += "-->".len();
             copy_from = i;
         } else {
@@ -270,7 +273,13 @@ mod tests {
     fn test_escape_json_neutralizes_html_comments() {
         let input = r#"{"a": "<!--", "b": "-->"}"#;
         let escaped = escape_json_for_script(input);
-        assert_eq!(escaped, r#"{"a": "<\!--", "b": "-\->"}"#);
+        // The `<` / `>` forms are valid JSON escapes that hide the raw
+        // `<` / `>` from the HTML parser; `JSON.parse` decodes them back losslessly.
+        assert_eq!(escaped, r#"{"a": "\u003C!--", "b": "--\u003E"}"#);
+        // Output must still be parseable by JSON consumers (e.g. the embedded viewer).
+        let parsed: serde_json::Value = serde_json::from_str(&escaped).expect("valid JSON");
+        assert_eq!(parsed["a"], "<!--");
+        assert_eq!(parsed["b"], "-->");
     }
 
     #[test]