Posted in Uncategorized

Unhandled http error while appending an html with script element

   February 23, 2021  1 Comment on Unhandled http error while appending an html with script element

Description

I have an application where the customers can load arbitrary HTML code which is then loaded into the DOM via jQuery.
A customer had a copy and paste error which linked to an non existing js file. This lead to an 404 but nevertheless jQuery pushes the return value (error HTML page) into a HTMLScriptElement text property. This leads to an exception:

Uncaught SyntaxError: Unexpected token <
at DOMEval (jquery-3.3.1.js:111)
at Function.globalEval (jquery-3.3.1.js:345)
at text script (jquery-3.3.1.js:9640)
at ajaxConvert (jquery-3.3.1.js:8784)
at done (jquery-3.3.1.js:9255)
at XMLHttpRequest.<anonymous> (jquery-3.3.1.js:9548)
at Object.send (jquery-3.3.1.js:9600)
at Function.ajax (jquery-3.3.1.js:9206)
at Function.jQuery._evalUrl (jquery-3.3.1.js:9367)
at domManip (jquery-3.3.1.js:5759)

Minimal test case

Put this HTML onto an webserver:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <title>Title</title>
	<script>
	function clickme() {
			var jBody = $(document.body);
			jBody.append('<script type="text/javascript" src="notexisting.js"><'+'/script>');
	}
	</script>
  </head>
  <body>
        <button onclick="clickme()">Click</button>
  </body>
</html>

Author: Fantashit

1 thought on “Unhandled http error while appending an html with script element”

  1. I wasn’t sure about what changes were necessary and had been exploring extensions to ajax converter and dataFilter arguments, but in the end came to a much simpler conclusion: rather than relying upon them, we should update jQuery._evalUrl to evaluate responses manually:

    return jQuery.ajax( {
	url: url,

	// Make this explicit, since user can override this through ajaxSetup (#11264)
	type: "GET",
	dataType: "text",
	cache: true,
	async: false,
	global: false,
	"throws": true,

	// Only evaluate the response if it is successful (gh-4126)
	success: function( text ) { jQuery.globalEval( text ); }
} );

Comments are closed.