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.

LiveServer breaks HTML after injecting code in fetch/response.text() with SVG content

See original GitHub issue

This took me 5 hours to finally conclude LiveServer was the problem.

I have a source file of 500+ SVGs,
loaded async with fetch,
then this long string is injected into the DOM with an innerHTML statement.

Problem is LiveServer injects code into the fetch body, breaking that file with 500+ SVGs.

So I would see only part of the file… but with a different number of SVGs in the whole file I would see a different result.

I eventually slimmed the issue down to 2 SVGs

solution: LiveServer, do not inject code in files I load!

Temporary fix

Do not use fetch with .html extension , but use .xml extension

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X ] Bug report  <!-- Please search GitHub for a similar issue or PR before submitting -->
[ ] Feature request
[ ] Documentation issue or request
[ ] Other: <!-- Please describe: -->

Current behavior

LiveServer injects wrong code in last SVG, disabling all HTML that comes afterwards

Expected behavior

Display all HTML

Environment

Browser:

- [X ] Chrome (desktop) version: latest
- [X] Firefox version: latest
- [ ] Safari (desktop)
- [X] Edge version: latest

For Tooling issues:

- Live Server: 5.6.1
- Platform:  Windows
- Visual Studio Code: latest

reproduce:

liveserver_svg_bug_source.html

SVG #1:
<svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
    <circle cx='4' cy='4' r='2' />
</svg>
SVG #2:
<svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
    <circle cx='4' cy='4' r='2'/>
</svg>
<h1>NEVER SHOWN</h1>

Run this: index.html

<html>

<head>
    <style>
        svg {
            width: 30px;
            background: green;
        }
    </style>
    <script>
        addEventListener("load", () => {
            fetch("liveserver_svg_bug_source.html")
                .then(response => response.text())
                .then(html => {
                    console.error(html)
                    SVG.innerHTML = html; // fails, does not display anything after the 2nd SVG
                })
        })
    </script>
</head>

<body>
    <div id=SVG></div>
</body>

</html>

console.error output:

SVG #1:
<svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
    <circle cx='4' cy='4' r='2' />
<!-- Code injected by live-server -->
<script type="text/javascript">
	// <![CDATA[  <-- 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];
					var parent = elem.parentElement || head;
					parent.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());
					}
					parent.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.');
	}
	// ]]>
</script></svg>
SVG #2:
<svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
    <circle cx='4' cy='4' r='2'/>
<!-- Code injected by live-

Issue Analytics

State:
Created 4 years ago
Reactions:19
Comments:23

Top GitHub Comments

5reactions

dawCreatorcommented, Dec 13, 2022

use ‘FIVE SERVER’ extension

EDIT: As of today ‘LIVE SERVER (FIVE SERVER)’ (renamed) injected code very similar to ‘LIVE SERVER’. Fixed with css rule: ‘style {display:none;}’

4reactions

johnbolo-codercommented, Sep 14, 2020

could anyone give me a solution for this issue please cuz i don’t know what to do .

// <![CDATA[  <-- 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];
				var parent = elem.parentElement || head;
				parent.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());
				}
				parent.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.');
}
// ]]>

Top Results From Across the Web

why is live-server injecting these javascript codes

Live server "injects" code in your website to work properly, if you open your html file, you'll see that it is doesn't saved,...

Live Server injects code in your source documents

Live Server injects code in your source documents; most notably breaking SVG files: ... Five Server, a fork of Live Server works better...

Fullstack React - Open Directory Data Archive

code may be used freely in your projects, commercial or otherwise. ... When checkStatus() is invoked, it's passed a Fetch response object that....

HTML Standard

Not validating user input; Cross-site scripting (XSS); SQL injection. When accepting untrusted input, e.g. user-generated content such as text comments, ...

CVE's linked by bid - CVE-Search

ID CVSS Last (major) update Published CVE‑2016‑8713 6.8 13‑12‑2022 ‑ 21:58 10‑02‑2017 ‑ 17:59 CVE‑2016‑8711 6.8 13‑12‑2022 ‑ 21:55 10‑02‑2017 ‑ 17:59 CVE‑2016‑8709 6.8 13‑12‑2022 ‑...