Use kotlinx serialization for JsMessage parsing and added type validation in parseJsMessage

Author: DrUlysses

gradle/libs.versions.toml

@@ -38,6 +38,7 @@ androidLibrary = { id = "com.android.library", version.ref = "androidGradlePlugi
 composeHotReload = { id = "org.jetbrains.compose.hot-reload", version.ref = "composeHotReload" }
 composeMultiplatform = { id = "org.jetbrains.compose", version.ref = "composeMultiplatform" }
 composeCompiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
+kotlinSerialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }
 kotlinAtomicfu = { id = "org.jetbrains.kotlin.plugin.atomicfu", version.ref = "kotlin" }
 kotlinJvm = { id = "org.jetbrains.kotlin.jvm", version.ref = "kotlin" }
 kotlinMultiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }

webview-compose/build.gradle.kts

@@ -6,6 +6,7 @@ import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
 plugins {
     alias(libs.plugins.androidLibrary)
     alias(libs.plugins.kotlinMultiplatform)
+    alias(libs.plugins.kotlinSerialization)
     alias(libs.plugins.composeMultiplatform)
     alias(libs.plugins.composeCompiler)
     alias(libs.plugins.mavenPublish)

webview-compose/src/commonMain/kotlin/io/github/kdroidfilter/webview/jsbridge/JsMessage.kt

@@ -1,13 +1,16 @@
 package io.github.kdroidfilter.webview.jsbridge
 
+import kotlinx.serialization.Serializable
+
 /**
  * Message dispatched from JS to native.
  *
  * `params` is expected to be a JSON string (API compatibility with compose-webview-multiplatform).
  */
+@Serializable
 data class JsMessage(
     val callbackId: Int,
     val methodName: String,
-    val params: String,
+    val params: String
 )
 

webview-compose/src/commonMain/kotlin/io/github/kdroidfilter/webview/jsbridge/JsMessageParsing.kt

@@ -1,20 +1,45 @@
 package io.github.kdroidfilter.webview.jsbridge
 
+import kotlinx.serialization.Serializable
 import kotlinx.serialization.json.Json
-import kotlinx.serialization.json.jsonObject
-import kotlinx.serialization.json.jsonPrimitive
+import kotlinx.serialization.json.JsonElement
+import kotlinx.serialization.json.JsonPrimitive
 
 private val jsBridgeJson = Json { ignoreUnknownKeys = true }
 
-internal fun parseJsMessage(raw: String): JsMessage? =
-    runCatching {
-        val obj = jsBridgeJson.parseToJsonElement(raw).jsonObject
-        val callbackId = obj["callbackId"]?.jsonPrimitive?.content?.toIntOrNull() ?: -1
-        val methodName = obj["methodName"]?.jsonPrimitive?.content ?: return null
-        val params =
-            obj["params"]?.jsonPrimitive?.content
-                ?: obj["params"]?.toString()
-                ?: ""
-        JsMessage(callbackId = callbackId, methodName = methodName, params = params)
-    }.getOrNull()
+@Serializable
+private data class ParsedJsBridgeMessage(
+    val callbackId: Int? = null,
+    val methodName: String? = null,
+    val action: String? = null,
+    val params: JsonElement? = null,
+    val type: String? = null,
+)
 
+internal fun parseJsMessage(
+    raw: String,
+    expectedType: String? = null,
+): JsMessage? = runCatching {
+    val message = jsBridgeJson.decodeFromString<ParsedJsBridgeMessage>(raw)
+    if (expectedType != null && message.type != expectedType) return null
+
+    val methodName = message.methodName ?: message.action ?: return null
+    val isWasmBridgeMessage = message.action != null
+    val params = message.params?.toJsMessageParams() ?: if (isWasmBridgeMessage) "{}" else ""
+    val callbackId = message.callbackId ?: if (isWasmBridgeMessage) 0 else -1
+
+    JsMessage(
+        callbackId = callbackId,
+        methodName = methodName,
+        params = params
+    )
+}.getOrNull()
+
+private fun JsonElement.toJsMessageParams(): String = if (
+    this is JsonPrimitive &&
+    isString
+) {
+    content
+} else {
+    toString()
+}

webview-compose/src/wasmJsMain/kotlin/io/github/kdroidfilter/webview/web/WebView.wasmJs.kt

@@ -3,14 +3,16 @@ package io.github.kdroidfilter.webview.web
 
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
-import io.github.kdroidfilter.webview.jsbridge.JsMessage
 import io.github.kdroidfilter.webview.jsbridge.WebViewJsBridge
+import io.github.kdroidfilter.webview.jsbridge.parseJsMessage
 import io.github.kdroidfilter.webview.setting.WebSettings
 import io.github.kdroidfilter.webview.util.KLogger
 import kotlinx.browser.document
 import kotlinx.coroutines.launch
 import org.w3c.dom.HTMLIFrameElement
+import org.w3c.dom.MessageEvent
 import org.w3c.dom.Node
+import org.w3c.dom.events.Event
 
 /**
  * Platform-specific parameters for the WebView factory in WebAssembly/JavaScript.
@@ -275,37 +277,18 @@ private fun setupJsBridgeForWasm(
     webViewJsBridge: WebViewJsBridge,
     webViewWrapper: WasmJsWebView
 ): () -> Unit {
-    val messageHandler: (org.w3c.dom.events.Event) -> Unit = { event ->
-        val messageEvent = event as org.w3c.dom.MessageEvent
+    val messageHandler: (Event) -> Unit = { event ->
+        val messageEvent = event as MessageEvent
 
-        if (messageEvent.source == element.contentWindow && messageEvent.data != null) {
+        if (
+            messageEvent.source == element.contentWindow &&
+            messageEvent.data != null
+        ) {
             try {
-                val dataString = messageEvent.data.toString()
-
-                if (dataString.contains(webViewJsBridge.jsBridgeName) && dataString.startsWith("{")) {
-                    val actionPattern = """"action"\s*:\s*"([^"]*)"""".toRegex()
-                    val paramsPattern = """"params"\s*:\s*"((?:[^"\\]|\\.)*)"""".toRegex()
-                    val callbackPattern = """"callbackId"\s*:\s*(\d+)""".toRegex()
-
-                    val actionMatch = actionPattern.find(dataString)
-                    val paramsMatch = paramsPattern.find(dataString)
-                    val callbackMatch = callbackPattern.find(dataString)
-
-                    if (actionMatch != null) {
-                        val action = actionMatch.groupValues[1]
-                        val rawParams = paramsMatch?.groupValues?.get(1) ?: "{}"
-                        val params = rawParams.replace("\\\"", "\"").replace("\\\\", "\\")
-                        val callbackId = callbackMatch?.groupValues?.get(1)?.toIntOrNull() ?: 0
-
-                        val jsMessage = JsMessage(
-                            callbackId = callbackId,
-                            methodName = action,
-                            params = params,
-                        )
-
-                        webViewJsBridge.dispatch(jsMessage)
-                    }
-                }
+                parseJsMessage(
+                    raw = messageEvent.data.toString(),
+                    expectedType = webViewJsBridge.jsBridgeName,
+                )?.let(webViewJsBridge::dispatch)
             } catch (e: Exception) {
                 KLogger.e(
                     t = e,