Android WebView unable to execute Javascript when html has a special character &#x2713;

Asked 5/2, 2019 at 14:20 Answered 6/2, 2019 at 11:21

android html utf-8 android-webview cybersource

Javascript is not getting executed when the below code is loaded in Android WebView.

Issue is seen only when the input box with a value of ✓ is being included in the html. Refer the text input field in the code given below with the name "utf8".

This input and its value is returned by a payment gateway provider, It's part of their form data, which needs to be submitted to their domain url to complete the payment. Hence the value and the html cannot be altered.

<!DOCTYPE html>
<html>
	<head>
	  <title></title>
	</head>
	<body>
	<form action=“” accept-charset=“UTF-8” method=“post”>
	   <input name=“utf8” type=“hidden” value=“&#x2713;” />
	</form>
	<script>
		alert("hello world");
	</script>
	</body>
</html>

Issue is seen on :

Samsung Galaxy S7, Android version 8.0.0
One Plus 5, Android version 9

Working perfectly on:

Motog 5s Plus, Android version 8.1.0
Samsung J2, Android version 5.1.1

Quest answered 5/2, 2019 at 14:20 Comment(0)

The solution for me was to replace # with %23.

From Chrome 72 update webview treats the # as the end of content: https://www.chromestatus.com/feature/5656049583390720

Patience answered 6/2, 2019 at 11:21 Comment(3)

Yes replacing the value works, but changing the value of the form data will fail the payment. Hence need a solution which works without alteration of the form data. – Quest 6/2, 2019 at 13:25

Agree. Chromium team suggests Base64 encoding the HTML content bugs.chromium.org/p/chromium/issues/detail?id=929083. – Patience 11/2, 2019 at 8:53

It works correctly without any issues, if loadDataWithBaseURL is being used, developer.android.com/reference/android/webkit/… – Quest 12/2, 2019 at 13:50

Why are you setting the value like that?

And why not set the "type" as checkbox in your example?

You can set the checkbox as "checked" or "unchecked" simply by including "checked" inside the tag. e.g.

<input name=“utf8” type=“checkbox” value=“Buy_Milk” checked >

You can set the value attribute to something relevant, like say "buy milk", and you can check whether that's ticked using the .checked method in Javascript.

document.getElementById("utf8").checked = true;
//Do something if true

document.getElementById("utf8").checked = true;
//Do something else if false

There's no reason as far as I can see, to add the unicode reference as the value.

Brokerage answered 5/2, 2019 at 16:20 Comment(2)

I also faced the same issue. In my case the html content was provided by a third party service with some silent form submissions. This scenario is really happening. – Bothwell 5/2, 2019 at 16:46

@Brokerage I have now updated the question, mentioning the reason, why the value and the html cannot be altered. – Quest 6/2, 2019 at 5:18

I get this issue as soon as there's any hashmark characters in my webview. I thought i was only react-native + chrome 72 specific issue. Still an issue if you remove the # ?

(Is there anyway to display html with hashmarks (#) in react-native android WebViews where Chrome ver. > 72)

Prototrophic answered 6/2, 2019 at 9:5 Comment(0)

Recommended topics

Hot tags