escape possible quotes in string passed to a js function in a onclick event

Question

I have the following cycle in a jspx:

<c:forEach var="var" items="${dataFile.list.rows}">
  <li>
    <div>
      <a href="#" onClick="myFunct('${var.url}','escape(${var.title}),'escape(${var.descr})');">
        <img width="108" height="66" alt="" src="${var.img}" />
      </a>
    </div>
  </li>
</c:forEach>

Where function myFunct does some stuff on its own. My problems arise when either ${var.title} or ${var.descr} contain quotes or double quotes. I can't know in advance whether there's going to be some or which.

I tried the above, I tried a little helper js section just before the element, but not knowing which kind of quotes I'm going to have I can't guess whether I need to put escape("${var.title}"); or escape('${var.title}');.

Any idea on how to solve this? Thanks.

score 2 · Accepted Answer · edited May 23 '17 at 12:05

You should do it in the server side, not in the client side. Doing it in the client side is too late anyway. Depending on the sole purpose of the value, whether it's going to be used as part of HTML and doesn't contain linebreaks, or as JS code, you can use either the JSTL-provided EL function fn:escapeXml()

<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
...
<a onclick="myFunct('${var.url}','${fn:escapeXml(var.title)}','${fn:escapeXml(var.descr)}');">

or create a custom EL function which uses Apache Commons Lang StringEscapeUtils#escapeJavaScript() under the covers.

<%@taglib prefix="my" uri="http://example.com/functions" %>
...
<a onclick="myFunct('${var.url}','${my:escapeJs(var.title)}','${my:escapeJs(var.descr)}');">

You can find a concrete example how to create an EL function at the bottom of this answer.

I guess that it's going to be used as part of HTML, so fn:escapeXml() could to be sufficient.

This worked for me. Yes, it shouldn't be done client side, but unfortunately I have no power on that. I know it will only be text though, so I used escapeXml. Thanks. — Stephan, Dec 22 '11 at 11:34

score 1 · Answer 2 · answered Aug 12 '14 at 19:08

You don't need to create your own EL function but use apache-commons directly from your custom .tld:

<function>
    <name>escapeJavaScript</name>
    <function-class>org.apache.commons.lang.StringEscapeUtils</function-class>
    <function-signature>java.lang.String escapeJavaScript(java.lang.String)</function-signature>
</function>

score 0 · Answer 3 · answered Dec 21 '11 at 17:46

I suggest you encode on the server http://www.roseindia.net/jsp/jsp-url-encoding.shtml

or store the stuff in a hidden element

<span id="url" style="display:none">${var.URL}</span>
<span id="title" style="display:none">${var.title}</span>
<span id="desc" style="display:none">${var.descr}</span>

and do onClick="return myFunct(['url','title','desc'])">...</a>

function myFunct(parms) {
  var url   = parms[0]?document.getElementById(parms[0]).innerHTML:"No url";
  var title = parms[1]?document.getElementById(parms[1]).innerHTML:"No title";
  var descr = parms[2]?document.getElementById(parms[2]).innerHTML:"No description";
  return false;
}

score 0 · Answer 4 · answered Dec 21 '11 at 17:52

You need to pass a valid JavaScript String literal to myFunct. escape is a JavaScriptfunction that expects a valid String as well. You thus need to transform you Java String into a valid JavaScript literal. Use apache commons-lang StringEscapeUtils.escapeECMAScript to escape it. You could make it an EL function, and thus use something like

onClick="myFunct('${myFn:escapeJs(var.url)}','${myFn:escapeJs(var.title)}, '${myFn:escapeJs(var.descr)}');"

escape possible quotes in string passed to a js function in a onclick event

4 Answers4

Linked