使用Spring在HTML中转义撇号

Question

I have an error in some legacy code and while trying to fix it I found a behaviour that I do not understand. The application is a Spring MVC application that uses JSP and JSTL. The following is a simplified example that reproduces the behaviour I am talking about. The code of my controller is:

@GetMapping("/users/thing")
public ModelAndView thing() {

    ModelAndView model = new ModelAndView("users/thing");
    String stringWithApostrophe = "Any'String";
    String escapedWithHtmlUtils = HtmlUtils.htmlEscape(stringWithApostrophe);

    model.addObject("stringWithApostrophe", stringWithApostrophe);
    model.addObject("escapedWithHtmlUtils", escapedWithHtmlUtils);
    return model;
}

The variable stringWithApostrophe has an apostrophe character within it, and then I escape it and store the escaped value in other variable. After that I add both of them to the model.

My view is like this:

<p><a onClick="clicked('${stringWithApostrophe}');" href="#">stringWithApostrophe: ${stringWithApostrophe}</a></p>
<p><a onClick="clicked('${escapedWithHtmlUtils}');" href="#">escapedWithHtmlUtils: ${escapedWithHtmlUtils}</a></p>

<script type="text/javascript">
    function clicked(text){
        console.log(text);
    }
</script>

If I press CTRL+U in my browser to see the source of the page I see the following:

<p><a onClick="clicked('Any'String');" href="#">stringWithApostrophe: Any'String</a></p>
<p><a onClick="clicked('Any&#39;String');" href="#">escapedWithHtmlUtils: Any&#39;String</a></p>

...which looks good, and renders like this:

...which is what I expected too. When I click the first link it fails also as expected, the browser console shows the error message Syntax error: missing ) after argument list because the unescaped apostrophe broke the javascript code.

However, although I expected the second link to work, it also fails, with the same error message . Why is this the case? I cannot understand it, the apostrophe is converted into an html entity as CTRL+U shows, so it should not broke the javascript. I've been looking in the Internet about possible causes for this, but found nothing. What am I missing?

Update : I've uploaded the example project I used to reproduce the error to Github, in case it is useful.

Answer 1

As noted in your question, the apostrophe is successfully converted into an HTML entity reference by the HtmlUtils class to become ' . The behavior you described is occurring because the HTML parsers resolve entity references in attribute values before content is handed off to the JavaScript engine. The entity in the onclick(...) statement is therefore decoded into the original character ' as shown below.

onClick="clicked('Any'String');" => onClick="clicked('Any'String');" .

Therefore to the JS engine, the two onClick(...) statements are equivalent.

See this related discussion discussion for more information on the issue.