Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Multiple inline SVGs break HTML files

See original GitHub issue

I’m submitting a…

[x] Bug report

Behavior

Inserting multiple inline SVGs gives a broken HTML page due to code injection from live-server being cutoff.

expected injection (first SVG):

	//   <-- For SVG support
	if ('WebSocket' in window) {
		(function () {
			function refreshCSS() {
				var sheets = [].slice.call(document.getElementsByTagName("link"));
				var head = document.getElementsByTagName("head")[0];
				for (var i = 0; i < sheets.length; ++i) {
					var elem = sheets[i];
					head.removeChild(elem);
					var rel = elem.rel;
					if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
						var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
					}
					head.appendChild(elem);
				}
			}
			var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
			var address = protocol + window.location.host + window.location.pathname + '/ws';
			var socket = new WebSocket(address);
			socket.onmessage = function (msg) {
				if (msg.data == 'reload') window.location.reload();
				else if (msg.data == 'refreshcss') refreshCSS();
			};
			if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
				console.log('Live reload enabled.');
				sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
			}
		})();
	}
	else {
		console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
	}
	//

resulting injection (after the 1st SVG):

	//   <-- For SVG support
	if ('WebSocket' in window) {
		(function () {
			function refreshCSS() {
				var sheets = [].slice.call(document.getElementsByTagName("link"));
				var head = document.getElementsByTagName("head")[0];
				for (var i = 0; i < sheets.length; ++i) {
					var elem = sheets[i];
					head.removeChild(elem);
					var rel = elem.rel;
					if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
						var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
					}
					head.appendChi

Environment

Browser:
All Browsers

For Tooling issues:

- Live Server: 5.1.1
- Platform: Mac
- Visual Studio Code: 1.26.0-insider

Other

Same issue: https://github.com/tapio/live-server/issues/272

Issue Analytics

State:
Created 5 years ago
Comments:8

Top GitHub Comments

6reactions

Harshithvellalacommented, Aug 31, 2021

can you says how to fix it

2reactions

jboarmancommented, May 24, 2019

As indicated by others, the issue appears due to multiple attempts by live-server to inject the client-side javascript code. The defect is around the matching and/or processing of those matches of injection candidates.

The current injection candidates are based on regular expression matches (new RegExp("</svg>")). The simplest way to resolve this particular issue may be to make the regex a bit smarter by having it match only the last occurrence of </svg> in the contents being served.

A proof-of-concept is outlined in the link below based on a convoluted-looking expression of <\/svg>(?![\s\S]*<\/svg>)

Sample SVG File with Nest SVG Elements nested.svg

Fix Proof-of-Concept https://regexr.com/4elgb