security(lottie): escape user-controlled values in HTML renderer iframe

cursoragent · sharjeelyunus · cursoragent · commit 62023d288d8a · 2026-06-19T09:09:57.000Z
Co-authored-by: Sharjeel Yunus &lt;sharjeelyunus@users.noreply.github.com&gt;
diff --git a/modules/ensemble/lib/widget/lottie/lottie_html_renderer_security.dart b/modules/ensemble/lib/widget/lottie/lottie_html_renderer_security.dart
@@ -0,0 +1,26 @@
+import 'dart:convert';
+
+import 'package:meta/meta.dart';
+
+/// Returns true when [id] is safe to embed in generated JavaScript identifiers
+/// and HTML attributes for the Lottie HTML renderer iframe.
+@visibleForTesting
+bool isSafeLottieHtmlRendererId(String id) {
+  if (id.isEmpty || id.length > 128) {
+    return false;
+  }
+  return RegExp(r'^[a-zA-Z][a-zA-Z0-9_]*$').hasMatch(id);
+}
+
+/// Sanitizes [id] for embedding in generated iframe JavaScript.
+///
+/// Falls back to [fallbackId] when [id] contains characters that would break
+/// out of JS string literals or variable names.
+@visibleForTesting
+String sanitizeLottieHtmlRendererId(String id, String fallbackId) {
+  return isSafeLottieHtmlRendererId(id) ? id : fallbackId;
+}
+
+/// JSON-encoded source URL literal safe to embed in generated iframe JS.
+@visibleForTesting
+String lottieSourceLiteral(String source) => jsonEncode(source);
diff --git a/modules/ensemble/lib/widget/lottie/web/lottiestate.dart b/modules/ensemble/lib/widget/lottie/web/lottiestate.dart
@@ -10,6 +10,7 @@ import 'package:ensemble/util/utils.dart';
 import 'package:ensemble/widget/helpers/box_wrapper.dart';
 import 'package:ensemble/widget/helpers/widgets.dart';
 import 'package:ensemble/widget/lottie/lottie.dart';
+import 'package:ensemble/widget/lottie/lottie_html_renderer_security.dart';
 import 'package:ensemble/widget/widget_util.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
@@ -29,7 +30,7 @@ class LottieState extends EWidgetState<EnsembleLottie>
   @override
   void initState() {
     super.initState();
-    divId = widget.controller.id ?? id;
+    divId = sanitizeLottieHtmlRendererId(widget.controller.id ?? id, id);
     if (isCanvasKit) {
       widget.controller
         ..lottieController = AnimationController(vsync: this)
@@ -48,6 +49,7 @@ class LottieState extends EWidgetState<EnsembleLottie>
   void didUpdateWidget(covariant EnsembleLottie oldWidget) {
     super.didUpdateWidget(oldWidget);
     widget.controller.lottieAction = this;
+    divId = sanitizeLottieHtmlRendererId(widget.controller.id ?? id, id);
   }
 
   @override
@@ -115,6 +117,7 @@ class LottieState extends EWidgetState<EnsembleLottie>
       // the image will throw exception. We have to use a permanent placeholder
       // until the binding engages
       // HTML & JS code for the web html renderer
+      final sourceLiteral = lottieSourceLiteral(source);
       final htmlString = '''
 <html>
   <body>
@@ -129,7 +132,7 @@ class LottieState extends EWidgetState<EnsembleLottie>
       let player_$divId = document.getElementById("$divId");
       // A counter variable which increments upon each event and thus making each event unique and allowing to segregate from old events
       let counter = 0;
-      player_$divId.load("$source");
+      player_$divId.load($sourceLiteral);
       if ($autoPlay) player_$divId.play();
       window.parent.addEventListener("message", handleMessage, false); // Hooking the event listener
       
diff --git a/modules/ensemble/test/lottie_html_renderer_security_test.dart b/modules/ensemble/test/lottie_html_renderer_security_test.dart
@@ -0,0 +1,45 @@
+import 'dart:convert';
+
+import 'package:ensemble/widget/lottie/lottie_html_renderer_security.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  group('isSafeLottieHtmlRendererId', () {
+    test('accepts simple alphanumeric ids', () {
+      expect(isSafeLottieHtmlRendererId('lottie_123'), isTrue);
+      expect(isSafeLottieHtmlRendererId('myWidget'), isTrue);
+    });
+
+    test('rejects ids that can break generated JavaScript', () {
+      expect(isSafeLottieHtmlRendererId('foo"); alert(1);//'), isFalse);
+      expect(isSafeLottieHtmlRendererId('foo-bar'), isFalse);
+      expect(isSafeLottieHtmlRendererId(''), isFalse);
+      expect(isSafeLottieHtmlRendererId('a' * 129), isFalse);
+    });
+  });
+
+  group('sanitizeLottieHtmlRendererId', () {
+    test('falls back when id is unsafe', () {
+      expect(
+        sanitizeLottieHtmlRendererId('bad"); alert(1);//', 'lottie_safe'),
+        'lottie_safe',
+      );
+    });
+  });
+
+  group('lottieSourceLiteral', () {
+    test('JSON-encodes source URLs for safe embedding', () {
+      expect(
+        lottieSourceLiteral('https://cdn.example.com/anim.json'),
+        jsonEncode('https://cdn.example.com/anim.json'),
+      );
+    });
+
+    test('neutralizes JavaScript breakout in source URL', () {
+      const malicious = '"); alert(1);//';
+      final literal = lottieSourceLiteral(malicious);
+      expect(literal, jsonEncode(malicious));
+      expect(literal, isNot(contains('load(""); alert(1);')));
+    });
+  });
+}
