Zusammenspiel php/JS bei Parameterübergabe von php zur JS Funktion

[Felix Riesterer]

Lieber Andreas,

dass mein javascript nicht wegen Sonderzeichen den "Scriptbetrieb" einstellt,

ist das ein Problem mit der Kodierung, also Sonderzeichen im Sinne von ÄÖÜß usw., oder von passenden Anführungszeichen (doppelte und einfache)?

echo ("
<INPUT TYPE=submit VALUE=\"test\" onclick=\"einsetzen(`".aus_php_escape($bemerkung)."`)\">
");

Das sieht einfach falsch aus, wie Dir meine Vorposter auch schon zu verstehen gegeben haben. Warum kannst Du den Wert nicht so notieren, dass er von JavaScript ohne zusätzliches Escaping verwendet werden kann? Ist das der Kern Deiner Frage?

Beim Programmieren müssen wir beachten, wenn es Kontextwechsel gibt. Dich interessiert vor allem der Zusammenhang Programmcode und Daten.

Dein Beispiel oben forme ich ein Bisschen um:

printf(
  '<button name="irgendwas" value="test" onclick="einsetzen(\'%s\')">',
  htmlspecialchars($bemerkung)
);

Der Inhalt von $bemerkung sollte nun für JavaScript direkt lesbar sein. Der Platzhalter %s wird mit dem Rückgabewert der Funktion htmlspecialchars() befüllt, die den Wert von $bemerkung entsprechend verarbeitet.

Wenn Du nur einen quick fix gesucht hast, dann so weit so schlecht. Besser wäre, was Dir meine Vorposter auch schon empfohlen haben, dass Du den Wert in ein passendes data-*-Attribut schreibst, weil dann die doppelte Maskierung mit den Anführungszeichen nicht sein muss:

printf('
  <input
    data-nimmdas="%s"
    name="irgendwas"
    value="test"
    onclick="einsetzen(this.dataset.nimmdas)"
  >
  ',
  htmlspecialchars($bemerkung)
);

Es stellt sich aber allen Ernstes die Frage, warum diese Sache mit JavaScript in dieser Form überhaupt sein muss. Das riecht sehr stark danach, dass man sich das wesentlich erleichtern kann, indem man das JavaScript allgemeiner baut und z.B. mit data-Attributen die Verarbeitung durch JavaScript steuert:

printf('
  <input
    data-nimmdas="%s"
    data-zielfeld="irgendwas-anderes"
    name="irgendwas"
    value="test"
  >
  ',
  htmlspecialchars($bemerkung)
);

const myForm = document.querySelector("form"); // eventuell eine ID verwenden?

form.addEventListener("click", event => {
  if (event.target.tagName
    && "BUTTON" == event.target.tagName
    && event.target.hasAttribute("data-nimmdas")
    && event.target.hasAttribute("data-zielfeld")
  ) {
    const button = event.target;
    const zielfeld = form.querySelector('[name="' + button.dataset.zielfeld + '"]');

    // input feld vorbelegen
    if (zielfeld) {
      zielfeld.value = button.dataset.nimmdas;
    }
  }
});

Aber dazu müsstest Du ein echtes Beispiel zeigen, gerne mit Fake-Daten, bei dem man die tatsächliche Mechanik verstehen kann.

Liebe Grüße

Felix Riesterer