How to Escape Inline Scripts in WordPress Plugins to Prevent Rejection

I am currently uploading my custom WordPress plugin but it has been rejected twice due to security issues The primary problem is related to inline scripts that I am adding using wp_add_inline_script. Below is the response I received from the WordPress review team:

Variables and options must be escaped when echoed Much related to
sanitizing everything, all variables that are echoed need to be
escaped when they’re echoed, so it can’t hijack users or (worse) admin
screens. There are many esc_*() functions you can use to make sure you
don’t show people the wrong data, as well as some that will allow you
to echo HTML safely.

At this time, we ask you escape all $-variables, options, and any sort
of generated data when it is being echoed. That means you should not
be escaping when you build a variable, but when you output it at the
end. We call this "escaping late."

The Code

private function add_iframe_inline_script($iframe_data) {
        // Prepare the redirect URL for after verification
        $redirectUrl = esc_url_raw(get_site_url() . '/verification/?order_id=' . $iframe_data['order_id']);

        // Escape dynamic values for inclusion in the script
        $url = esc_url_raw($iframe_data['url']); // Escaping URL for use in form action
        $bin = esc_js($iframe_data['bin']); // Escaping JS value for the 'Bin' field
        $jwt = esc_js($iframe_data['jwt']); // Escaping JS value for the 'JWT' field
        $token = esc_js($iframe_data['token']); // Escaping JS value for 'token'
        $reference = esc_js($iframe_data['reference']); // Escaping JS value for 'reference'

        // The inline JavaScript, ensuring all dynamic values are properly escaped
        $inline_script = "
        const Iframe3ds = document.getElementById('3DSFrame');
        var form = document.createElement('form');
        form.setAttribute('id', 'collectionForm');
        form.setAttribute('name', 'devicedata');
        form.setAttribute('method', 'post');
        form.setAttribute('action', '{$url}');
        
        var binInput = document.createElement('input');
        binInput.setAttribute('type', 'text');
        binInput.setAttribute('name', 'Bin');
        binInput.setAttribute('value', '{$bin}');
        
        var jwInput = document.createElement('input');
        jwInput.setAttribute('type', 'text');
        jwInput.setAttribute('name', 'JWT');
        jwInput.setAttribute('value', '{$jwt}');
        
        form.append(binInput);
        form.append(jwInput);
        Iframe3ds.contentWindow.document.body.appendChild(form);
        
        document.addEventListener('DOMContentLoaded', function(event) {
            form.submit();
            window.addEventListener('message', function(event) {
                var SessionId = JSON.parse(event.data).SessionId;
                window.location.href="{$redirectUrl}&SessionId=" + SessionId + '&token={$token}&reference={$reference}';
            });
        });
    ";

        // Add the inline script to the enqueued script
        wp_add_inline_script('iframe-inline-script', $inline_script);
    }

The issue lies in the use of wp_add_inline_script() with $inline_script containing unescaped variables such as URLs, JWT tokens, and form fields.

The WordPress Review Team also mentioned the following points:

Use the proper escaping functions like esc_url() and esc_js() when outputting URLs and other variables in inline scripts.
Ensure all variables (such as $url, $jwt, $token) are escaped at the point where they are being echoed into the script.

You need to sign in to view this answers

Related Post