Uncaught SyntaxError: Unexpected identifier error at a single quote in webview

Question

I am passing certain values to a form which is loaded on webview to autofill it using JavaScript. It works perfectly till any one of the Strings passed has a single quote " ' " in it. When a single quote is encountered I get this error:

Uncaught SyntaxError: Unexpected identifier

And no data gets filled. The code to autofill the form

public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                PageURL = view.getUrl();
                PageTitle = view.getTitle();
                actionBar = getSupportActionBar();
                if (actionBar != null) {
                    actionBar.setTitle(PageTitle);
                }

                actionBar.setSubtitle(PageURL);
                final String js = "javascript: " +
                        "var nameDoc = document.getElementsByName('name');" +
                        "nameDoc[0].value = '" + n + "';" +
                        "var checkOutDoc = document.getElementsByName('checkout');" +
                        "checkOutDoc[0].value = '" + btn_co + "';" +
                        "var noOFPaxDoc = document.getElementsByName('no_of_pax');" +
                        "noOFPaxDoc[0].value = '" + a + "';" + // a should be int based on ur HTML
                        "var noOFKidDoc = document.getElementsByName('no_of_kid');" +
                        "noOFKidDoc[0].value = '" + k + "';" + // a should be int based on ur HTML
                        "var noOFRoomsDoc = document.getElementsByName('no_of_rooms');" +
                        "noOFRoomsDoc[0].value = '" + r + "';" + // a should be int based on ur HTML
                        "var checkInDoc = document.getElementsByName('checkin');" +
                        "checkInDoc[0].value = '" + btn_ci + "';" +
                        "var email = document.getElementsByName('guest_email');" +
                        "email[0].value = '" + m + "';" +
                        "var resortName = document.getElementsByName('resort_name[]');" +
                        "resortName[0].value = '" + mail_list[0] + "';" +
                        "var distFrom = document.getElementsByName('distance_from[]');" +
                        "distFrom[0].value = '" + dist + "';" +
                        "var roomType = document.getElementsByName('room_category[]');" +
                        "roomType[0].value = '" + room_list[0] + "';" +
                        "var price = document.getElementsByName('package_price[]');" +
                        "price[0].value = '" + room_price_list[0] + "';" +
                        "var distance = document.getElementsByName('distance[]');" +
                        "distance[0].value = '" + distance + "';" +
                        "var ex = document.getElementsByName('excursions[]');" +
                        "ex[0].value = '" + ex + "';" +
                        "var act = document.getElementsByName('activities[]');" +
                        "act[0].value = '" + act_f + "';" +
                        "var dest = document.getElementsByName('destination');" +
                        "dest[0].value = '" + state + "';" +
                        "var days = document.getElementsByName('total_days');" +
                        "days[0].value = '" + d + "';" +
                        "javascript:(function(){" +
                        "l=document.getElementsByName('submit');" +
                        "e=document.createEvent('HTMLEvents');" +
                        "e.initEvent('click',true,true);" +
                        "l[0].dispatchEvent(e);" +
                        "})()";

                if (Build.VERSION.SDK_INT >= 19) {
                    view.evaluateJavascript(js, new ValueCallback<String>() {
                        @Override
                        public void onReceiveValue(String s) {

                        }
                    });
                } else {
                    view.loadUrl(js);
                }
            }

Answer 1

It happens because your strings are not escaped. When you insert data directly into JS as you're doing the computer doesn't know the difference between cod you entered and code that was added from the input field.

Thus, when your users input some text nameDoc[0].value = '" + n + "'; becomes nameDoc[0].value = 'My name is Norbs' and I'm breaking your code';

In the example above, the string is ended after "Norbs", and as what comes afterwards is not valid JS the script fails.

Possible solution

Change

nameDoc[0].value = '" + n + "';

To

nameDoc[0].value = '" + n.replace("'", "\\'") + "'; .