Thymeleaf and inline scripts SAXParseException - javascript

I got a page which uses thymeleaf template, and I'm getting the following error on page load when using inline scripts:
org.xml.sax.SAXParseException; lineNumber: 270; columnNumber: 85; The
content of elements must consist of well-formed character data or
markup.
Code at line 270
<script type="text/javascript" >
window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
I have tried replacing "<", ">" symbols from document.write with < >, the exception doesn't occur anymore but the script is not loaded anymore

You need to add CDATA tags for the script like this:
<script type="text/javascript">
//<![CDATA[
window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
//]]>
</script>
The tags are telling thymeleaf's xml parser that the code between should not be interpreted as XML markup.
This is no longer necessary since Thymeleaf 3.0

Related

Jsoup parse issue for paring script tag (with c tag) in Jsp file

I have a JSP file, from that file I need to get js file details from the script tag's src attribute. which is works fine for normal plain script tag(like given below)
<script src="/resources/js/jquery.min.js" ></script>
am using the Jsoup libraries parse method with UTF-8 charset to parse the jsp file into html file
Document htmlDocument = Jsoup.parse(file, "UTF-8");
From the Document (HTML document) am getting a collection of all the script tags with src attribute, in foreach loop am getting the src attributes details from the collection.
Actual Script tag:
<script src="<c:url value="/resources/js/jquery.min.js" />"></script>
Jsoup 1.8.1 lib parsed output:
<script src="<c:url value=" esources="" s="" query.min.js"=""></script>">
Jsoup 1.12.1 lib parsed output:
<script src="<c:url value=" resources js jquery.min.js"></script>
Expected output:
"/resources/js/jquery.min.js"
Actual output :
"<c:url value="
Could anyone shed some light on the issue?
Seems that the JSoup parser doesn't like the inner quotes. I wouldn't say that this is a JSoup issue, since what your parsing isn't conforming to the HTML standard. In other words, I think JSoup is working as designed (the same can be said for the code formatting on SO).
I'm not sure if the JSP will work the same, but when I tried swapping out the inner double quotes for single quotes:
<script src="<c:url value'/resources/js/jquery.min.js' />"></script>
the parsing seems to work as you expected
<c:url value'/resources/js/jquery.min.js' />

Browser interpreting Javascript string as HTML tag

I have the following in my source HTML:
<head>
...
<script>window.jQuery || document.write('<script src="/js/jquery.min.js"></script>');</script>
...
</head>
But it is getting interpreted by my browser (Chrome) as:
<head>
...
<script>window.jQuery || document.write('<script src="/js/jquery.min.js"></script>
</head>
<body>
"');"
...
I've tried escaping the slash inside the document.write string, but that didn't work. Does anyone know how to prevent the browser from interpreting it as as a closing script tag?
</script> is alwasy interpreted as closing script tag even if it's inside string you need to split it like this:
'</'+'script>';
You need to escape some characters in your script.
Try this:
<script>window.jQuery || document.write('<script src="/js/jquery.min.js"><\/script>')</script>
I escaped the / character with a backslash \, so it ends up like: \/ in your document.write() statement.
For a good example of this setup, try looking at HTML5 Boilerplate project on GitHub here:
https://github.com/h5bp/html5-boilerplate/blob/master/src/index.html#L26
Hope this helps.

How to put "</script>" in a javascript string?

I've been trying some tricks in javascript and came to a ridiculous problem: I can't use <script> as a substring in a javascript string! Here is an example:
<html>
<head>
<script>
alert("<script></script>");
</script>
</head>
</html>
It supposed to print out <script></script>, but instead, I get this:
");
Printed out on the page, as HTML.
Question: How can I use <script> followed by </script> substrings in Javascript, and why is it acting that way?
Here is JSFiddle of it.
What's tripping you up is the </script>. The HTML parser doesn't recognize Javascript strings or nested <script> tags, so it's interpreting that as the closing tag for the initial <script>. That is, this part of the document is parsed as:
<script> (open tag)
alert("<script> (text node - contents of the script)
</script> (close tag)
"); (text node - plain text)
The second </script> is ignored, as there's no other <script> tag for it to close.
To work around this, break up </script so that the HTML parser doesn't see it. For instance:
alert("<script><\/script>");
or:
alert("<script><" + "/script>");
or just put the code in an external Javascript file. This issue only arises for inline scripts.
it is because of the \ I believe. i have no concrete explanation since I am a newbie to Javascript but this code should work:
alert("<script><\/script>");
came up with it using Java knowledge.. Haha since the \ is an escape key in many languages.
Alert(\<script>\</script>\)

Html to Haml conversion javascript

I have this html code. I want it to convert to haml format.
-->
<script type="text/javascript">
window.jQuery || document.write("<script src='assets/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>
<!--<![endif]-->
This is how I convert it to haml.
/ [if !IE]>
:javascript
window.jQuery || document.write("<script src='assets/jquery-2.0.3.min.js'>"+"<"+"/script>");
/ <![endif]
but I got this error Illegal nesting: nesting within a tag that already has content is illegal. Any idea why? or what is the right way to convert this code to haml?
Haml includes support for IE conditional comments, the sytax is / [cond], without the closing >
In your first line:
/ [if !IE]>
the last > is being treated as content, and you also nest the :javascript filter as content. This is why you get the nesting within a tag that already has content is illegal error.
However, you can’t use the !IE condition this way, you’ll end up with a single comment that all browsers will ignore. You’ll need to no something like this, using literal HTML:
<!--[if !IE]> -->
:javascript
window.jQuery || document.write("<script src='assets/jquery-2.0.3.min.js'>"+"<"+"/script>");
<!-- <![endif]-->

Using <script> inside a jQuery-template

I'm using jQuery-templates for the first time, and I need my template to include some javascript, so it it run when the template is rendered.
I need at timestamp for the current time...
Writing
<script type="text/javascript"></script>
in a template, renders it to fail.
Is this simply not possible?
the following was blatantly copied from my answer to another question
When the HTML parser finds <script> it will start parsing the contents until it finds </script> which is present in:
document.write("<script src='links7.js?'+Math.random()+></script>
As such, you'll need to change the source so that it's not parsed as the end of a script element:
document.write("<script src='links7.js?'+Math.random()+></scri" + "pt>");
Ideally, you'd have HTML escaped all your inline JavaScript code, which would also mitigate this issue:
document.write("<script src='links7.js?'+Math.random()+></script&
For your particular case (which is different enough for me to not mark as a dupe), make sure that your content between your script tags is HTML escaped, or correctly placed between <![CDATA[ ]]> tags.
<script type="text/javascript"></script>
-or-
/* <![CDATA[ */
<script type="text/javascript"></script>
/* ]]> */
That all being said, you should be calling the necessary JS during the rendering process, and not injecting a script element into the DOM unnecessarily.

Categories