{"id":9013,"date":"2017-01-02T20:06:00","date_gmt":"2017-01-02T20:06:00","guid":{"rendered":"https:\/\/www.wegneronline.com\/blog\/2017\/01\/02\/der-utf-8-bom-des-todes-dramatische-musik\/"},"modified":"2024-02-22T08:34:03","modified_gmt":"2024-02-22T07:34:03","slug":"der-utf-8-bom-des-todes-dramatische-musik","status":"publish","type":"post","link":"https:\/\/www.wegneronline.com\/blog\/2017\/01\/02\/der-utf-8-bom-des-todes-dramatische-musik\/","title":{"rendered":"Der UTF-8 BOM des Todes! (*dramatische Musik*)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u00ef\u00bb\u00bf<br> Na, sowas schon mal gesehen?<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">Und zwar ist das ein Kodierungsproblem. <a href=\"http:\/\/de.wikipedia.org\/wiki\/Byte_Order_Mark\" target=\"_blank\" rel=\"noopener\">Hier findest du alles Weitere dazu<\/a>, ich erkl\u00e4re es dir aber in K\u00fcrze (naja, nicht ganz so kurz \ud83d\ude09 ) in diesem Artikel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Was ist da los?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Bis vor einiger Zeit, vor der Internationalisierung, wurde f\u00fcr jedes Land eine eigene Kodierung (also ein eigener Zeichensatz \/ Zeichentabelle) verwendet, auch \u201eCharset\u201c genannt. Dadurch versuchte man Speicher zu sparen, da in diesen Kodierungen nur die Buchstaben vorhanden waren, die in der jeweiligen Sprache \u00fcberhaupt vorkommen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn Frau Meier aus Berlin an Herrn Schmitt in Hamburg eine E-Mail schreibt ist es unwahrscheinlich, dass da chinesische Schriftzeichen drin sind, also muss man die auch nicht laden\/speichern. Bei uns war\/ist dieses Charset f\u00fcr lateinische Schriftzeichen &#8222;ISO-8859-1&#8243; (auch \u201elatin1&#8220; genannt).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Inzwischen sind die wenigen Byte unerheblich geworden und moderne Systeme nutzen einfach UTF-8, auch Unicode genannt. In dieser Tabelle sind (fast) alle Zeichen aller Sprachen enthalten. Das U steht dabei f\u00fcr \u201eUniversal Character Set\u201c, frei \u00fcbersetzt \u201eAllgemeine Zeichentabelle\u201c. Es gibt auch noch UTF-16 und UTF-38 f\u00fcr asiatische Zeichen usw., aber meistens wird UTF-8 eingesetzt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wichtig zu wissen ist, dass die Kodierung zweimal \u201ehinterlegt\u201c wird:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Die Zeichen im Text werden kodiert bzw. die Kodierung angegeben<\/li>\n\n\n\n<li>Die Datei selbst wird im entsprechenden Format gespeichert und ausgegeben<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn das beides \u00fcbereinstimmt: Kein Problem.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn aber z.B. die Zeichen in der Datei UTF-8-Zeichen sind und die Datei mit latin1 gespeichert wird, kann der Webserver das nicht richtig auslesen. Weil UTF-8 zur \u201eMarkierung\u201c drei Byte vorwegstellt und latin1 diese nicht \u201eversteht\u201c entstehen diese drei kryptischen (und gef\u00fcrchteten) Zeichen \u00ef\u00bb\u00bf \u2013 die Byte Order Mark.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Konkret auf eine Webseiten-Situation bezogen:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Die Webseite hat im Meta-Tag (im HTML) angegeben, dass sie nach latin1 codiert ist, also dass der Browser latin1-Zeichen erwarten kann:<\/li>\n\n\n\n<li>Eine der PHP- oder Template-Dateien wurde aber im UTF-8 Format gespeichert. Wenn diese nun eingebunden oder ausgelesen wird, k\u00fcndigt diese mit dem BOM an: \u201eHallo, ich bin UTF-8 kodiert\u201c.<\/li>\n\n\n\n<li>Diese freundliche Ank\u00fcndigung versteht der Browser aber nicht, sondern er versteht nur: \u201eHrrrggzl mpppffth harrr!\u201c und gibt das entsprechend aus, da er denkt, das die Webseite mit dir spricht, statt mit dem Browser.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Was hei\u00dft das nun?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Eine der Dateien, die zum Zusammenbauen der Seite verwendet wird, ist eine UTF-8 Datei, und damit nicht mehr kompatibel mit dem Rest des Systems. Dadurch wird der BOM als Text dargestellt, was z.B. PHP aus der Bahn werfen kann, denn manchmal erwarten PHP-Scripte, dass keine Ausgabe erfolgt, bis PHP komplett den Code abgearbeitet hat. <br>Diese Scripte brechen dann mit dem \u201eFatal-Error\u201c ab und die Seite ist quasi kaputt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die gesamte Codierung der Webseite \u00fcber den Meta-Tag auf UTF-8 zu \u00e4ndern bringt leider auch nichts, da der Browser dann zwar generell UTF-8 erwartet, aber eben auch die als latin1 gespeicherten Dateien als UTF-8 wertet &#8212; und keine Umlaute, Sonderzeichen usw. anzeigt. Diese werden dann als Fragezeichen oder kryptische Symbole angezeigt, da sie ja in latin1 so nicht existieren. Lediglich die UTF-8-Datei w\u00fcrde korrekt angezeigt (bzw. der BOM verschwinden), aber das ist ja dann auch Bl\u00f6dsinn, wenn kein \u201e\u00e4\u201c, \u201e\u00f6\u201c, \u201e\u00fc\u201c, \u201e\u00df\u201c usw. mehr angezeigt werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Also, was tut man da?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du Zugriff auf den Server und damit die Shell (bei Linux) hast, kann man mit Tools wie \u201eiconv\u201c eine massenhafte Umkodierung und Neuspeicherung der Dateien ansto\u00dfen. Das Tool ruft dann jede Datei einzeln auf, konvertiert sowohl Zeichen als auch Dateiformat in ein Charset deiner Wahl. Meist l\u00e4sst sich damit der \u00dcbelt\u00e4ter ausmachen und eliminieren &#8212; aber leider auch nicht immer.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn das <strong>nicht<\/strong> der Fall ist, und du nur \u00fcber FTP-Zugriff o.\u00e4. verf\u00fcgst, wird es haarig. Dann sollte man sich \u00fcberlegen: Welche Dateien habe ich als letztes ver\u00e4ndert und gespeichert? Welche Dateien werden auf der Seite \u00fcberhaupt eingebunden?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es f\u00fchrt dann nichts daran vorbei, jede dieser Dateien zu \u00f6ffnen und wieder mit dem korrekten Charset zu speichern (z.B. kann der Windows Editor \u201eNotepad\u201c das).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Oder man l\u00e4dt alle Dateien runter, nutzt iconv auf Linux\/Mac (oder ein \u00e4hnliches Tool f\u00fcr Windows), und l\u00e4dt alles wieder hoch. Es kann aber sein, dass auch das nicht hilft.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Versuch&#8217;s mal mit Notepad&#8230;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du also eine grobe Ahnung hast, welche Datei(en) als letztes vor dem Auftreten des BOM ver\u00e4ndert wurden, w\u00e4re es nicht schlecht diese mal testweise mit Notepad neu zu speichern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. Start &gt; \u201enotepad\u201c eingeben &gt; Enter<br>\n2. Entsprechende Datei \u00f6ffnen<br>\n3. Datei &gt; Speichern unter\u2026<br>\n4. Unten findet sich das Feld \u201eCodierung\u201c, dort dann in dem Fall \u201elatin1\u201c ausw\u00e4hlen<br>\n5. Datei hochladen und Daumen dr\u00fccken<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&#8230;und versuch&#8217;s mal generell mit UTF-8!<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Generell empfiehlt sich \u00fcbrigens UTF-8 zu nutzen. Und das einheitlich. Dann gibt es auch keine Probleme mehr &#8211; und internationale Besucher freuen sich auch, dass sie z.B. Kommentare mit internationalen Schriftzeichen hinterlassen k\u00f6nnen \ud83d\ude09<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Au\u00dferdem kann man sich, wie bei meinen Klienten schon oft geschehen, datenbanktechnisch ins Aus schie\u00dfen, wenn man irgendwann gezwungen wird, UTF-8 zu nutzen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00ef\u00bb\u00bf Na, sowas schon mal gesehen?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-9013","post","type-post","status-publish","format-standard","hentry","category-5-informatik"],"_links":{"self":[{"href":"https:\/\/www.wegneronline.com\/blog\/wp-json\/wp\/v2\/posts\/9013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wegneronline.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wegneronline.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wegneronline.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wegneronline.com\/blog\/wp-json\/wp\/v2\/comments?post=9013"}],"version-history":[{"count":2,"href":"https:\/\/www.wegneronline.com\/blog\/wp-json\/wp\/v2\/posts\/9013\/revisions"}],"predecessor-version":[{"id":9107,"href":"https:\/\/www.wegneronline.com\/blog\/wp-json\/wp\/v2\/posts\/9013\/revisions\/9107"}],"wp:attachment":[{"href":"https:\/\/www.wegneronline.com\/blog\/wp-json\/wp\/v2\/media?parent=9013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wegneronline.com\/blog\/wp-json\/wp\/v2\/categories?post=9013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wegneronline.com\/blog\/wp-json\/wp\/v2\/tags?post=9013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}