#blog #news #infos #snippets

Javascript: avoid document.write()

Google Chrome Konsole Warnung zu document.write()

Eine direkte Ausgabe von JavaScript-Werten mit „document.write“ sollte heutzutage vermieden werden, da es den Weg zur Injektion von unerwünschtem und evtl. schädlichem Code öffnet. Google Chrome und andere Browser geben deshalb auch eine Warnung aus. Aber was tun, wenn man doch gerne z.B. ein Script verwenden möchte, um im Footer das Copyright mit der Jahreszahl zu verwenden und sich das selbstverständlich „von alleine“ zum Jahreswechsel umstellen soll?

So sah das früher aus:


  © <script type="text/javascript">document.write(new Date().getFullYear());</script> Christiane Weigel Webdevelopment, Berlin 

Und so sieht das Beispiel nach heutigen Konventionen aus:


  © <span id="thisyear"></span><script>document.getElementById("thisyear").innerHTML = new Date().getFullYear();</script> Christiane Weigel Webdevelopment, Berlin 

Dies ist die Ausgabe des Codes:
Javascript Copyright full-year

Was tun wir?

Statt „document.write()“ eröffnen wir ein leeres span-Element mit einer ID. Via getElementbyID sprechen wir das document an. in die Klammern kommt der Name der ID den wir individuell vergeben haben. Mit .innerHTML sagen wir dem Script, dass es aus dem folgenden ein HTML-Element machen soll. getFullYear steht für den Standard in Javascript. Weitere Standards findet ihr z.B. hier:

– Beide Scripte liefern exakt das gleiche Ergebnis. Jedoch wird die Konsole im ersten Fall eine Warnung ausgeben.
– Der Script-Type darf inzwischen ebenfalls entfallen.
– Hübsch machen könnt ihr das – wie immer – indem ihr dem span, div oder welchem Container auch immer eine ID oder Klasse zuweise und dann via CSS stylt.

Mehr dazu:

wiki.selfhtml.org
Google Developers

Folgen und liken!