Keskustelu: Nettisivujen teko: HTML: Heittomerkki attribuutin arvossa

Tarkoituksenani olisi luoda Rubikin kuution ratkaisuun, erityisesti algorithmeihin ("siirtosarjat") keskittyvä sivusto/avoin tietokanta. Lisätietoa: https://en.wikipedia.org/wiki/Rubik's_Cube­#Algorithms. Oma ennätykseni on 19,97 sek.

Koodaus sujuu mallikkaasti, mutta törmäsin heittopilkun aiheuttamaan ongelmaan tagissa. Animoidut ratkaisut teen käyttäen tätä widgettiä: https://github.com/larspetrus/Roofpig.

Eräs esimerkki (suora kopio dokumentaatiosta):

<div class=roofpig style="width:140px; height:160px;"
  data-config="alg=L' U2 L U2 R U' L' U L+R'|solved=U-/ce|colors=F:b B:g U:r D:o R:w L:y">
</div>

Koska sivujen kääntö vastapäivään ilmoitetaan heittomerkillä (esim yläsivu vastapäivään U'), katkaisee tuo ikävästi tagin kun PHP:lla koko touhu tulostetaan kutakuinkin näin (monia eri tapoja koetettu):

echo "<div class='roofpig' style='width:240px; height:240px;' data-config=alg=".$alg."|flags=showalg|colored=*|setupmoves= data-speed='500'></div>";

Ja sama kuvana: https://gyazo.com/6b2359abcba88047f8bc5f660cc503ab

En aivan äkkiseltään löytänyt toimivaa ratkaisua.

Tämä kuuluu kyllä HTML:n ja PHP:n alkeisiin: Jos attribuutin arvossa on välejä, arvo täytyy kirjoittaa lainausmerkkeihin tai heittomerkkeihin. Attribuutin arvona olevasta tekstistä tietyt merkit ("'<>&) kuuluu muuttaa vastaaviksi HTML-entiteeteiksi (&quot;&#39;&lt;&gt;&amp;). Rivinvaihtomerkit myös kannattaa muuttaa, jos niitä on. Heittomerkin voi jättää muuttamatta, jos attribuutin arvo on lainausmerkeissä, ja lainausmerkin voi jättää muuttamatta, jos attribuutin arvo on heittomerkeissä.

Hyviä ja selviä tapoja:

<div data-config="alg=<?php echo htmlspecialchars($alg); ?>|flags=showalg|colored=*|setupmoves="></div>

<div data-config="alg=<?= htmlspecialchars($alg); ?>|flags=showalg|colored=*|setupmoves="></div>

<div data-config='alg=<?= htmlspecialchars($alg, ENT_QUOTES); ?>|flags=showalg|colored=*|setupmoves='></div>

Muita tapoja:

$html_alg = htmlspecialchars($alg);
echo "<div data-config=\"alg={$html_alg}|flags=showalg|colored=*|setupmoves=\"></div>";

$html_alg = htmlspecialchars($alg);
echo '<div data-config="alg='.$html_alg.'|flags=showalg|colored=*|setupmoves="></div>';

$html_alg = htmlspecialchars($alg, ENT_QUOTES);
echo "<div data-config='alg={$html_alg}|flags=showalg|colored=*|setupmoves='></div>";

P.S. Oletko kuullut XSS-hyökkäyksistä? Käytätkö ylipäänsä htmlspecialchars-funktiota?

Metabolixin esimerkeistä kolme ensimmäistä olivat siis oikein ja kolme viimeistä väärin. Tekstiä ei pidä huvin vuoksi tunkea tulostuskomennon sisään, koska se on väärin.

The Alchemist kirjoitti:

kolme viimeistä väärin.

Vääryys on täysin tilanteesta kiinni. Jos vaikka tehtävänä on tulostaa tagi echolla, kolme viimeistä ovat nimenomaan oikein.

Muokkasin nyt viestiin maininnan, että ensimmäiset tavat ovat selvempiä ja jälkimmäiset epäselvempiä. PHP-taitojen parantamiseksi voi silti lukea ja ymmärtää myös jälkimmäiset tavat: niitäkin käytetään, joten ne kannattaa tuntea. Tietyn tavan osaaminen ei onneksi tarkoita, että sitä olisi pakko itse käyttää.

No mielestänihän jo koetin noitakin tapoja, mutta liekö ollut silti jokin heittopilkku väärässä paikassa. Sain toimimaan.