FHEM Forum

FHEM => Frontends => FHEMWEB => Thema gestartet von: xanker am 28 Juli 2019, 12:47:00

Titel: HTML Code in readings wird im Eventmonitor falsch dargestellt
Beitrag von: xanker am 28 Juli 2019, 12:47:00
Bin mal wieder auf etwas gestoßen. Bei ankommenden Events wird im Eventmonitor jedes Leerzeichen durch   ersetzt, ich weiß zwar warum, allerdings verursacht das Probleme wenn HTML Code in einem Reading steht (z.B. beim Weather Modul:)
apiMaintainer: Leon Gaultier (<a href=https://forum.fhem.de/index.php?action=profile;u=13684>CoolTux</a>)
Hier werden auch die Leerzeichen ersetzt, weswegen das den ganzen HTML-Code "zerstört":
Leon&nbsp;Gaultier&nbsp;(<a&nbsp;href=https://forum.fhem.de/index.php?action=profile;u=13684>CoolTux</a>)
Das kann der Browser dann natürlich nicht mehr interpretieren.

Man sollte in dem Fall HTML Tags von dem ersetzen ausschließen, oder (mMn besser) die HTML Tags escapen.
Titel: Antw:HTML Code in readings wird im Eventmonitor falsch dargestellt
Beitrag von: rudolfkoenig am 28 Juli 2019, 13:03:31
Meiner Meinung nach sollte ein Modul ueber Readings kein HTML einschmuggeln, es gibt ja schliesslich nicht nur WEB-basierte Frontends, und fuer FHEMWEB andere Wege sowas zu hinterlegen.
Weiterhin sehe ich auch nicht die Notwendigkeit einer vom Modul ausgeloesten HTML-Formatierung der Daten fuer den Eventmonitor.

Bin aber fuer Argumente offen.
Titel: Antw:HTML Code in readings wird im Eventmonitor falsch dargestellt
Beitrag von: xanker am 28 Juli 2019, 13:32:10
Zitat von: rudolfkoenig am 28 Juli 2019, 13:03:31
Meiner Meinung nach sollte ein Modul ueber Readings kein HTML einschmuggeln
Sehe ich auch so, dennoch steht nirgends geschrieben, dass es "verboten" ist. Man sollte also eine Lösung finden. Ich habe aber gerade mal in console.js rein geschaut. Eigentlich sollte das dort eh schon abgefangen werden:
  if(new_content.indexOf('<') != 0)
    new_content = new_content.replace(/ /g, "&nbsp;");

aber das scheint wohl nicht zu greifen.

Da &nbsp; aber ohnehin ein HTML Zeichen ist, wäre ich (wie schon geschrieben) dafür, "<" und ">" komplett zu escapen, da diese Zeichen ja durchaus in einem Reading vorkommen können und dann fälschlicherweise als HTML Tag interpretiert werden.
Titel: Antw:HTML Code in readings wird im Eventmonitor falsch dargestellt
Beitrag von: rudolfkoenig am 28 Juli 2019, 20:23:03
Zitatwäre ich (wie schon geschrieben) dafür, "<" und ">" komplett zu escapen
Habs gemacht, bin auf die Seiteneffekte gespannt.
Titel: Antw:HTML Code in readings wird im Eventmonitor falsch dargestellt
Beitrag von: xanker am 30 Juli 2019, 10:14:27
Zitat von: rudolfkoenig am 28 Juli 2019, 20:23:03
Habs gemacht, bin auf die Seiteneffekte gespannt.
Hallo Rudolf,

leider stimmt das noch nicht ganz. Wenn mehrere Readings als bulk gesendet werden, wird nur das letzte angezeigt.

  var ma = new_content.match(/(.*)<br>[\r\n]+$/); // matched nur auf die letzten Zeile!
  if(ma) {
    new_content = ma[1];
    if(new_content.indexOf('<') != 0) {
      var rTab = {'<':'&lt;', '>':'&gt;',' ':'&nbsp;'};
      new_content = new_content.replace(/[<> ]/g, function(a){return rTab[a]});
    }
    new_content += '<br>';
  }


Das funktioniert:
  var ma = new_content.split(/<br>[\r\n]+/); // split by lines
  if(ma) {
  new_content = '';
  for(var line=0;line<ma.length;line++) {
var new_line = ma[line];
if(new_line.indexOf('<') != 0) {
  var rTab = {'<':'&lt;', '>':'&gt;',' ':'&nbsp;'};
  new_line = new_line.replace(/[<> ]/g, function(a){return rTab[a]});
}
if(new_line) // exclude emtpy lines
new_content += new_line+'<br>';
  };
  }


Edit:
Geht auch noch "schöner". Das ersetzt komplett den bisherigen Code (Zeile 63 bis 71)
  var rTab = {'<':'&lt;', '>':'&gt;',' ':'&nbsp;'};
  new_content=new_content.replace(/[<> ]/g, function(a){return rTab[a]}).replace(/&lt;br&gt;/g,'<br>');

erst alles escapen und dann <br> Tag unescapen
Titel: Antw:HTML Code in readings wird im Eventmonitor falsch dargestellt
Beitrag von: rudolfkoenig am 30 Juli 2019, 16:17:08
Danke fuer den Hinweis.
Ich bin auf eine aehnliche Variante gekommen (bevor ich dein Edit gesehen habe), wenn es damit Probleme gibt, bitte melden.

ZitatBei ankommenden Events wird im Eventmonitor jedes Leerzeichen durch &nbsp; ersetzt, ich weiß zwar warum,
Kannst du das "Warum" bitte verraten?
Dann wuerde ich es dokumentieren.
Titel: Antw:HTML Code in readings wird im Eventmonitor falsch dargestellt
Beitrag von: xanker am 30 Juli 2019, 18:49:35
Zitat von: rudolfkoenig am 30 Juli 2019, 16:17:08
Danke fuer den Hinweis.
Ich bin auf eine aehnliche Variante gekommen (bevor ich dein Edit gesehen habe), wenn es damit Probleme gibt, bitte melden.
Kannst du das "Warum" bitte verraten?
Dann wuerde ich es dokumentieren.
Da die Events in einem <div> und nicht in einem <pre> landen. Wenn ein Readings (aus welchen Gründen auch immer) mehrere Leerzeichen hintereinander enthält, werden diese sonst nicht im HTML dargestellt
Titel: Antw:HTML Code in readings wird im Eventmonitor falsch dargestellt
Beitrag von: Ellert am 01 August 2019, 21:13:30
Zitat von: rudolfkoenig am 28 Juli 2019, 20:23:03
Habs gemacht, bin auf die Seiteneffekte gespannt.
DOIFtools lässt die console.js in eine Textarea ausgeben, um den Eventmonitor in der Detailansicht von DOIFtools und DOIF einbinden zu können.

Nach der Änderung funktioniert der Zeilenumbruch in der Textarea nicht mehr und ich habe keinen Ansatz wie ich das beheben könnte.

Das Verhalten wurde hier beschrieben: https://forum.fhem.de/index.php/topic,102696.0.html
Titel: Antw:HTML Code in readings wird im Eventmonitor falsch dargestellt
Beitrag von: xanker am 01 August 2019, 23:24:03
Zitat von: Ellert am 01 August 2019, 21:13:30
DOIFtools lässt die console.js in eine Textarea ausgeben, um den Eventmonitor in der Detailansicht von DOIFtools und DOIF einbinden zu können.

Nach der Änderung funktioniert der Zeilenumbruch in der Textarea nicht mehr und ich habe keinen Ansatz wie ich das beheben könnte.

Das Verhalten wurde hier beschrieben: https://forum.fhem.de/index.php/topic,102696.0.html
Fraglich ob das direkt Einfluss darauf hat, da die Zeilenumbrüche (<br> Tag) nach wie vor vorhanden sind, lediglich alle anderen HTML Tags werden escaped.

Eine alternative Lösung, statt escapen, wäre das div#console zu einem pre#console zu machen, so wie es bei den Logfiles auch der Fall ist. Dann müsste man die Leerzeichen nicht mehr escapen und hätte entsprechend auch keine Probleme mehr mit HTML Tags. Kann man natürlich auch per CSS "white-space" machen, aber eigentlich sind dafür <pre> Tags gedacht.
Titel: Antw:HTML Code in readings wird im Eventmonitor falsch dargestellt
Beitrag von: Ellert am 01 August 2019, 23:42:54
Zitat von: xanker am 01 August 2019, 23:24:03
Fraglich ob das direkt Einfluss darauf hat, da die Zeilenumbrüche (<br> Tag) nach wie vor vorhanden sind, lediglich alle anderen HTML Tags werden escaped.

Eine alternative Lösung, statt escapen, wäre das div#console zu einem pre#console zu machen, so wie es bei den Logfiles auch der Fall ist. Dann müsste man die Leerzeichen nicht mehr escapen und hätte entsprechend auch keine Probleme mehr mit HTML Tags. Kann man natürlich auch per CSS "white-space" machen, aber eigentlich sind dafür <pre> Tags gedacht.
Ich verwende textarea#console, weil sich dann leicht ein Fenster beschreiben lässt, wie in dieser Abbildung https://wiki.fhem.de/wiki/DOIFtools#Beispiel:_in_der_Detailansicht_ge.C3.B6ffneter_Event-Monitor
Titel: Antw:HTML Code in readings wird im Eventmonitor falsch dargestellt
Beitrag von: Ellert am 02 August 2019, 01:52:13
Es würde wieder funktionieren wenn br und \n gesendet werden. In der Textarea stört br nicht und in der Eventmonitorseite stört \n nicht.

Bitte daher Zeile 70 in der console.js mit \n ergänzen zu:
    new_content += '<br>\n';

Edit:
Besser wäre, es vom Tag abhängig zu machen:
    new_content += $("#console").is("textarea")?'\n':'<br>';

Edit: Explizit jetzt hier dargestellt: https://forum.fhem.de/index.php/topic,102773.0.html