Escape-tecken: HTML

HTML är språket som används på alla webbsidor. Det används för att representera hela dokument, och innehåller därför ofta url:er, Javascript och CSS, vilket ofta kan leda till att dubbel escapning krävs.

HTML fungerar likt XML, men är mer flexibelt. En enkel regel är att alltid escapa &, <, >, ", ', precis som i XML. Detta bör du göra! Men i praktiken kommer man undan med mindre escapning...

<!-- Här escapas inte & och <. -->
<a href="/search?query=xml&sort=relevance">tagg & attribut</a>
<p>Formel: x < 10</p>

<!-- Skriv hellre: -->
<a href="/search?query=xml&amp;sort=relevance">tagg &amp; attribut</a>
<p>Formel: x &lt; 10</p>

Webbkodinjektion (XSS)

Om du visar information som en användare matat in, så måste du escapa innehållet. Annars utsätter du dig för webbkodinjektion.

För att undvika allt krångel, använd ett ramverk med templatesyntax som låter dig slippa tänka på allt det här. Exempelvis React, Angular, Vue och ASP.NETs Razor-syntax skyddar mot denna kategori attacker som standard. Detsamma gäller dom flesta andra moderna webbramverk.

Skript

När man bäddar in Javascript i HTML så måste man hålla tungan rätt i mun. Exempelvis måste skriptkoden escapas när den står i ett event-attribut som onclick. Detta är en anledning att i möjligaste mån undvika event-attribut (bland många andra anledningar).

<!--
  Både klick, dubbelklick och hovring ger:
    She said: "Please don't"
-->
<button
  type="button"
  onclick="console.log('She said: &quot;Please don't&quot;')"
  ondblclick='console.log("She said: \"Please don&apos;t\"")'
  onmouseover="console.log(&quot;She said: \&quot;Please don't\&quot;&quot;)"
>
  Kör
</button>

När man bäddar in Javascript i en <script>-tagg, måste man se till att strängen </script> inte förekommer i skriptet. Detta måste man i så fall escapa.

<script>
  console.log("Taggen avslutas med <\/script>");
</script>

Utan semikolon

I HTML kommer man dessutom undan med att glömma bort semikolonet i escape-sekvenser - ibland.

&amp;    <!-- & -->
&amp     <!-- & -->
&amp.    <!-- & -->
&ampere  <!-- &ere -->

<!-- problem: -->
<a href="/search?volt=230&ampere=2">el</a>