Skip to content

[webview_flutter_wkwebview] Fixes JSON.stringify() cannot serialize cyclic structures #6274

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
auto-submit merged 12 commits into from
May 15, 2024
Merged

[webview_flutter_wkwebview] Fixes JSON.stringify() cannot serialize cyclic structures #6274

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6057b1d
Fixs JSON.stringify() cannot serialize cyclic structures
LinXunFeng Mar 6, 2024
a37f7bf
Update version and CHANGELOG
LinXunFeng Mar 6, 2024
182afac
Remove cyclic object
LinXunFeng Mar 12, 2024
ee66a4a
Remove whitespace
LinXunFeng Mar 12, 2024
a709175
Remove whitespace
LinXunFeng Mar 12, 2024
b7a3661
Improve logic
LinXunFeng Mar 15, 2024
f7ac9bd
Merge branch 'main' into fix_json_stringify_cyclic_structures_error_w…
LinXunFeng Mar 15, 2024
ae1a4a2
Adjust to use _flutter_webview_plugin_overrides namespace
LinXunFeng Apr 30, 2024
979d8ee
Update comment
LinXunFeng Apr 30, 2024
fd9bbcf
Update comment
LinXunFeng Apr 30, 2024
c32dedd
Update AUTHORS
LinXunFeng Apr 30, 2024
3700600
Rename
LinXunFeng May 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion AUTHORS
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,4 +74,5 @@ Twin Sun, LLC <google-contrib@twinsunsolutions.com>
Amir Panahandeh <amirpanahandeh@gmail.com>
Daniele Cambi <dancam.dev@gmail.com>
Michele Benedetti <michelebenx98@gmail.com>
Taskulu LDA <contributions@taskulu.com>
Taskulu LDA <contributions@taskulu.com>
LinXunFeng <linxunfeng@yeah.net>
1 change: 1 addition & 0 deletions packages/webview_flutter/webview_flutter_wkwebview/AUTHORS
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,3 +68,4 @@ Maurits van Beusekom <maurits@baseflow.com>
Antonino Di Natale <gyorgio88@gmail.com>
Nick Bradshaw <nickalasb@gmail.com>
The Vinh Luong <ltv.luongthevinh@gmail.com>
LinXunFeng <linxunfeng@yeah.net>
4 changes: 4 additions & 0 deletions packages/webview_flutter/webview_flutter_wkwebview/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 3.13.1

* Fixes `JSON.stringify()` cannot serialize cyclic structures.

## 3.13.0

* Adds `decidePolicyForNavigationResponse` to internal WKNavigationDelegate to support the
Expand Down
58 changes: 58 additions & 0 deletions ...view_flutter/webview_flutter_wkwebview/example/integration_test/webview_flutter_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1522,6 +1522,64 @@ Future<void> main() async {
await expectLater(
debugMessageReceived.future, completion('debug:Debug message'));
});

testWidgets('can receive console log messages with cyclic object value',
(WidgetTester tester) async {
const String testPage = '''
<!DOCTYPE html>
<html>
<head>
<title>WebResourceError test</title>
<script type="text/javascript">
function onLoad() {
const obj1 = {
name: "obj1",
};
const obj2 = {
name: "obj2",
obj1: obj1,
};
const obj = {
obj1: obj1,
obj2: obj2,
};
obj.self = obj;
console.log(obj);
}
</script>
</head>
<body onload="onLoad();">
</html>
''';

final Completer<String> debugMessageReceived = Completer<String>();
final PlatformWebViewController controller = PlatformWebViewController(
const PlatformWebViewControllerCreationParams(),
);
unawaited(controller.setJavaScriptMode(JavaScriptMode.unrestricted));

await controller
.setOnConsoleMessage((JavaScriptConsoleMessage consoleMessage) {
debugMessageReceived
.complete('${consoleMessage.level.name}:${consoleMessage.message}');
});

await controller.loadHtmlString(testPage);

await tester.pumpWidget(Builder(
builder: (BuildContext context) {
return PlatformWebViewWidget(
PlatformWebViewWidgetCreationParams(controller: controller),
).build(context);
},
));

await expectLater(
debugMessageReceived.future,
completion(
'log:{"obj1":{"name":"obj1"},"obj2":{"name":"obj2","obj1":{"name":"obj1"}}}'),
);
});
});
}

Expand Down
68 changes: 50 additions & 18 deletions packages/webview_flutter/webview_flutter_wkwebview/lib/src/webkit_webview_controller.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -630,33 +630,65 @@ class WebKitWebViewController extends PlatformWebViewController {
}

Future<void> _injectConsoleOverride() {
// Within overrideScript, a series of console output methods such as
// console.log will be rewritten to pass the output content to the Flutter
// end.
//
// These output contents will first be serialized through JSON.stringify(),
// but if the output content contains cyclic objects, it will encounter the
// following error.
// TypeError: JSON.stringify cannot serialize cyclic structures.
// See https://github.com/flutter/flutter/issues/144535.
//
// Considering this is just looking at the logs printed via console.log,
// the cyclic object is not important, so remove it.
// Therefore, the replacer parameter of JSON.stringify() is used and the
// removeCyclicObject method is passed in to solve the error.
const WKUserScript overrideScript = WKUserScript(

@stuartmorgan-g stuartmorgan-g Apr 24, 2024

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add a comment briefly explaining the approach at a high level so readers don't need to reverse-engineer what is being done here.

@LinXunFeng LinXunFeng Apr 30, 2024

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

'''
function log(type, args) {
var message = Object.values(args)
.map(v => typeof(v) === "undefined" ? "undefined" : typeof(v) === "object" ? JSON.stringify(v) : v.toString())
.map(v => v.substring(0, 3000)) // Limit msg to 3000 chars
.join(", ");

var log = {
level: type,
message: message
};

window.webkit.messageHandlers.fltConsoleMessage.postMessage(JSON.stringify(log));
}
var _flutter_webview_plugin_overrides = _flutter_webview_plugin_overrides || {
removeCyclicObject: function() {
const levelObjects = [];

@stuartmorgan-g stuartmorgan-g May 7, 2024

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on the description in the PR comment, traversalStack would probably be a clearer name.

@LinXunFeng LinXunFeng May 8, 2024

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thx.

return function (k, v) {
if (typeof v !== "object" || v === null) { return v; }
const currentParentObj = this;
while (
levelObjects.length > 0 &&
levelObjects[levelObjects.length - 1] !== currentParentObj
) {
levelObjects.pop();
}
if (levelObjects.includes(v)) { return; }
levelObjects.push(v);
return v;
};
},
log: function (type, args) {
var message = Object.values(args)
.map(v => typeof(v) === "undefined" ? "undefined" : typeof(v) === "object" ? JSON.stringify(v, _flutter_webview_plugin_overrides.removeCyclicObject()) : v.toString())
.map(v => v.substring(0, 3000)) // Limit msg to 3000 chars
.join(", ");

var log = {
level: type,
message: message
};

window.webkit.messageHandlers.fltConsoleMessage.postMessage(JSON.stringify(log));
}
};

let originalLog = console.log;
let originalInfo = console.info;
let originalWarn = console.warn;
let originalError = console.error;
let originalDebug = console.debug;

console.log = function() { log("log", arguments); originalLog.apply(null, arguments) };
console.info = function() { log("info", arguments); originalInfo.apply(null, arguments) };
console.warn = function() { log("warning", arguments); originalWarn.apply(null, arguments) };
console.error = function() { log("error", arguments); originalError.apply(null, arguments) };
console.debug = function() { log("debug", arguments); originalDebug.apply(null, arguments) };
console.log = function() { _flutter_webview_plugin_overrides.log("log", arguments); originalLog.apply(null, arguments) };
console.info = function() { _flutter_webview_plugin_overrides.log("info", arguments); originalInfo.apply(null, arguments) };
console.warn = function() { _flutter_webview_plugin_overrides.log("warning", arguments); originalWarn.apply(null, arguments) };
console.error = function() { _flutter_webview_plugin_overrides.log("error", arguments); originalError.apply(null, arguments) };
console.debug = function() { _flutter_webview_plugin_overrides.log("debug", arguments); originalDebug.apply(null, arguments) };

window.addEventListener("error", function(e) {
log("error", e.message + " at " + e.filename + ":" + e.lineno + ":" + e.colno);
Expand Down
2 changes: 1 addition & 1 deletion packages/webview_flutter/webview_flutter_wkwebview/pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ name: webview_flutter_wkwebview
description: A Flutter plugin that provides a WebView widget based on Apple's WKWebView control.
repository: https://github.com/flutter/packages/tree/main/packages/webview_flutter/webview_flutter_wkwebview
issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+webview%22
version: 3.13.0
version: 3.13.1

environment:
sdk: ^3.2.3
Expand Down
54 changes: 36 additions & 18 deletions packages/webview_flutter/webview_flutter_wkwebview/test/webkit_webview_controller_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1378,31 +1378,49 @@ void main() {
expect(overrideConsoleScript.injectionTime,
WKUserScriptInjectionTime.atDocumentStart);
expect(overrideConsoleScript.source, '''
function log(type, args) {
var message = Object.values(args)
.map(v => typeof(v) === "undefined" ? "undefined" : typeof(v) === "object" ? JSON.stringify(v) : v.toString())
.map(v => v.substring(0, 3000)) // Limit msg to 3000 chars
.join(", ");

var log = {
level: type,
message: message
};

window.webkit.messageHandlers.fltConsoleMessage.postMessage(JSON.stringify(log));
}
var _flutter_webview_plugin_overrides = _flutter_webview_plugin_overrides || {
removeCyclicObject: function() {
const levelObjects = [];
return function (k, v) {
if (typeof v !== "object" || v === null) { return v; }
const currentParentObj = this;
while (
levelObjects.length > 0 &&
levelObjects[levelObjects.length - 1] !== currentParentObj
) {
levelObjects.pop();
}
if (levelObjects.includes(v)) { return; }
levelObjects.push(v);
return v;
};
},
log: function (type, args) {
var message = Object.values(args)
.map(v => typeof(v) === "undefined" ? "undefined" : typeof(v) === "object" ? JSON.stringify(v, _flutter_webview_plugin_overrides.removeCyclicObject()) : v.toString())
.map(v => v.substring(0, 3000)) // Limit msg to 3000 chars
.join(", ");

var log = {
level: type,
message: message
};

window.webkit.messageHandlers.fltConsoleMessage.postMessage(JSON.stringify(log));
}
};

let originalLog = console.log;
let originalInfo = console.info;
let originalWarn = console.warn;
let originalError = console.error;
let originalDebug = console.debug;

console.log = function() { log("log", arguments); originalLog.apply(null, arguments) };
console.info = function() { log("info", arguments); originalInfo.apply(null, arguments) };
console.warn = function() { log("warning", arguments); originalWarn.apply(null, arguments) };
console.error = function() { log("error", arguments); originalError.apply(null, arguments) };
console.debug = function() { log("debug", arguments); originalDebug.apply(null, arguments) };
console.log = function() { _flutter_webview_plugin_overrides.log("log", arguments); originalLog.apply(null, arguments) };
console.info = function() { _flutter_webview_plugin_overrides.log("info", arguments); originalInfo.apply(null, arguments) };
console.warn = function() { _flutter_webview_plugin_overrides.log("warning", arguments); originalWarn.apply(null, arguments) };
console.error = function() { _flutter_webview_plugin_overrides.log("error", arguments); originalError.apply(null, arguments) };
console.debug = function() { _flutter_webview_plugin_overrides.log("debug", arguments); originalDebug.apply(null, arguments) };

window.addEventListener("error", function(e) {
log("error", e.message + " at " + e.filename + ":" + e.lineno + ":" + e.colno);
Expand Down