Inline javascript with thymeleaf escaping character

Question

I use thymeleaf and spring. I try to do inline javascript.

<script th:inline="javascript">

    $("#genericTable").bootstrapTable({
        url: /*[[${url}]]*/ 'generic',
        ...
     });

On the server side I do

 model.addAttribute("url", "/rest/vehicles");

I get

url: "\/rest\/vehicles",

Why some caracters are added to the string?

Edit

with

url: /*[[@{${url}}]]*/ 'generic',

first / is like removed, so it's invalid to call...

J think that's because it makes a kind of escaping of the /. That's why for URLs there's a special syntax. See here, there's a section about URL rewriting. http://www.thymeleaf.org/doc/articles/standardurlsyntax.html — Luca Masera, Sep 25 '17 at 20:03
Have you tried to generate it outside the Javascript comment? For example, as a text directly in HTML (using the @, of course). In case what do you get? — Luca Masera, Sep 25 '17 at 20:28
Sorry, I mean outside the whole javascript block. Check what's generated when you just write it as a URL in HTML code. All the examples are always with something like "/path/to/@{value}". Maybe it ignores the first /. — Luca Masera, Sep 26 '17 at 12:23
I know it looks ugly, but does escaping the forward slash cause any problems? That is, even though `url: "\/rest\/vehicles"` appears in the JavaScript _code_, isn't the resulting string still `"/rest/vehicles"`? If you do a `console.log(…)` of the value, won't it log `"/rest/vehicles"`? What is the actual problem here other than aesthetics of the JavaScript source code? — Garret Wilson, Apr 28 '23 at 15:48

score 8 · Answer 1 · answered Dec 07 '19 at 10:32

[(...)] should help

Example with problem I am facing:

$.getJSON('[[@{/management/users/search/unit/}]]' + value, function(data) {

Is transformed to:

$.getJSON('"\/management\/users\/search\/unit\/"' + value, function(data) {

Using [(...)]:

$.getJSON('[(@{/management/users/search/unit/})]' + value, function(data) {

Is transformed to:

$.getJSON('/management/users/search/unit/' + value, function(data) {

From Thymeleaf 3.0 docs

Note that, while [[...]] corresponds to th:text (i.e. result will be HTML-escaped), [(...)] corresponds to th:utext and will not perform any HTML-escaping.

Assume that there is code like: $.getJSON("[(@{/some/url(param=${someUserInput})})]") , there is a risk of javascript code injection vulnerability here... For this specific scene, while s is generated string, s.replace("\/", "/") might be a better choice, I guess. — Mackerel, May 10 '22 at 08:08

score 3 · Accepted Answer · answered Sep 26 '17 at 17:24

3

You can try something like this:

<script type="text/javascript" th:inline="javascript">
  /*<![CDATA[*/
    $("#genericTable").bootstrapTable({
        url: /*[[${url}]]*/ 'generic',
        ...
    });  
  /*]]>*/
</script>

answered Sep 26 '17 at 17:24

juanlumn

6,155
2
30
39

Please note that this answer is from September 2017, things may have changed in these years... – juanlumn Feb 15 '20 at 13:19

score 0 · Answer 3 · answered Feb 04 '21 at 09:40

I know the question is a little old but the answer don't correct the problem, or the same I faced. To remove escaping I suggest to write code like this (double quotes are here only for javascript purpose) :

<script type="text/javascript" th:inline="javascript">
  /*<![CDATA[*/
    $("#genericTable").bootstrapTable({
        url: "[(@{ ${url} })]",
        ...
    });  
  /*]]>*/
</script>

Inline javascript with thymeleaf escaping character

3 Answers3