I have tested my website with PageSpeed Insights and i have the following error: Avoid document.write(). I have on my website a javascript code used for tracking visitors:
<script type="text/javascript" async>
document.write('<img src=\"https://traficwebsite/button.php?u=user&ref='+escape(document.referrer)+'&page='+escape(location.href.replace(/#.+$/,''))+'&rez='+screen.width+'x'+screen.height+'\" alt=\"DespreTrafic\" border=\"0\" width=\"1\" height=\"1\" />');
</script>
How can i replace document.write in this code. Thank you!
You can create an element using document.createElement()
.
That element can then be appended to document.body
.
// Create an <img>-element
var img = document.createElement('img');
// Configure the attributes of your element
img.alt = 'An alternative text';
// Append it
document.body.append(img);
You can add the String directly to the HTML using Element.innerHTML
. However, as mentioned in the link, that makes your site vulnerable to script-execution when a script is inserted without using the <script>
-tag.
Example of the vulnerability (hover over the image-element to see its effect):
var altText = 'some text" onmouseover="(() => {console.log(\'This lambda was executed!\')})()';
// This will add the following:
// <img alt="some text" onmouseover="(() => {console.log('This lambda was executed!')})()">
document.body.innerHTML += '<img alt="' + altText + '">';
But if you are sure that the string you build is safe, you can add the contained element like this (replace the String-placeholder below with your String):
document.body.innerHTML += '<img alt="Some text">';
<p>I was here first!</p>