A simple module to escape/unescape common problematic entities.\hypertarget{md_sfcode_node_modules_html_escaper_README_autotoc_md11672}{}\doxysubsection{How}\label{md_sfcode_node_modules_html_escaper_README_autotoc_md11672}
This package is available in npm so {\ttfamily npm install html-\/escaper} is all you need to do, using eventually the global flag too.

Once the module is present 
\begin{DoxyCode}{0}
\DoxyCodeLine{var html = require('html-\/escaper');}
\DoxyCodeLine{}
\DoxyCodeLine{// two basic methods}
\DoxyCodeLine{html.escape('string');}
\DoxyCodeLine{html.unescape('escaped string'); }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_html_escaper_README_autotoc_md11673}{}\doxysubsection{Why}\label{md_sfcode_node_modules_html_escaper_README_autotoc_md11673}
there is basically one rule only\+: do not {\bfseries{ever}} replace one char after another if you are transforming a string into another.


\begin{DoxyCode}{0}
\DoxyCodeLine{// WARNING: THIS IS WRONG}
\DoxyCodeLine{// if you are that kind of dev that does this}
\DoxyCodeLine{function escape(s) \{}
\DoxyCodeLine{  return s.replace(/\&/g, "{}\&amp;"{})}
\DoxyCodeLine{          .replace(/</g, "{}\&lt;"{})}
\DoxyCodeLine{          .replace(/>/g, "{}\&gt;"{})}
\DoxyCodeLine{          .replace(/'/g, "{}\&\#39;"{})}
\DoxyCodeLine{          .replace(/"{}/g, "{}\&quot;"{});}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{// you might be the same dev that does this too}
\DoxyCodeLine{function unescape(s) \{}
\DoxyCodeLine{  return s.replace(/\&amp;/g, "{}\&"{})}
\DoxyCodeLine{          .replace(/\&lt;/g, "{}<"{})}
\DoxyCodeLine{          .replace(/\&gt;/g, "{}>"{})}
\DoxyCodeLine{          .replace(/\&\#39;/g, "{}'"{})}
\DoxyCodeLine{          .replace(/\&quot;/g, '"{}');}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{// guess what we have here ?}
\DoxyCodeLine{unescape('\&amp;lt;');}
\DoxyCodeLine{}
\DoxyCodeLine{// now guess this XSS too ...}
\DoxyCodeLine{unescape('\&amp;lt;script\&amp;gt;alert("{}yo"{})\&amp;lt;/script\&amp;gt;');}

\end{DoxyCode}


The last example will produce {\ttfamily $<$script$>$alert(\char`\"{}yo\char`\"{})$<$/script$>$} instead of the expected {\ttfamily $<$script$>$alert(\char`\"{}yo\char`\"{})$<$/script$>$}.

Nothing like this could possibly happen if we grab all chars at once and either ways. It\textquotesingle{}s just a fortunate case that after swapping {\ttfamily \&} with {\ttfamily \&} no other replace will be affected, but it\textquotesingle{}s not portable and universally a bad practice.

Grab all chars at once, no excuses!

{\bfseries{more details}} As somebody might think it\textquotesingle{}s an {\ttfamily unescape} issue only, it\textquotesingle{}s not. Being an anti-\/pattern with side effects works both ways.

As example, changing the order of the replacement in escaping would produce the unexpected\+: 
\begin{DoxyCode}{0}
\DoxyCodeLine{function escape(s) \{}
\DoxyCodeLine{  return s.replace(/</g, "{}\&lt;"{})}
\DoxyCodeLine{          .replace(/>/g, "{}\&gt;"{})}
\DoxyCodeLine{          .replace(/'/g, "{}\&\#39;"{})}
\DoxyCodeLine{          .replace(/"{}/g, "{}\&quot;"{})}
\DoxyCodeLine{          .replace(/\&/g, "{}\&amp;"{});}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{escape('<'); // \&amp;lt; instead of \&lt; }

\end{DoxyCode}
 If we do not want to code with the fear that the order wasn\textquotesingle{}t perfect or that our order in either escaping or unescaping is different from the order another method or function used, if we understand the issue and we agree it\textquotesingle{}s potentially a disaster prone approach, if we add the fact in this case creating 4 Reg\+Exp objects each time and invoking 4 times {\ttfamily .replace} trough the {\ttfamily String.\+prototype} is also potentially slower than creating one function only holding one object, or holding the function too, we should agree there is not absolutely any valid reason to keep proposing a char-\/by-\/char implementation.

We have proofs this approach can fail already so ... why should we risk? Just avoid and grab all chars at once or simply use this tiny utility.\hypertarget{md_sfcode_node_modules_html_escaper_README_autotoc_md11674}{}\doxysubsection{Backtick}\label{md_sfcode_node_modules_html_escaper_README_autotoc_md11674}
Internt explorer $<$ 9 has \href{https://html5sec.org/\#102}{\texttt{ some backtick issue}}

For compatibility sake with common server-\/side HTML entities encoders and decoders, and in order to have the most reliable I/O, this little utility will NOT fix this IE $<$ 9 problem.

It is also important to note that if we create valid HTML and we set attributes at runtime through this utility, backticks in strings cannot possibly affect attribute behaviors.


\begin{DoxyCode}{0}
\DoxyCodeLine{var img = new Image();}
\DoxyCodeLine{img.src = html.escape(}
\DoxyCodeLine{  'x` `<script>alert(1)</script>"{}` `'}
\DoxyCodeLine{);}
\DoxyCodeLine{// it won't cause problems even in IE < 9 }

\end{DoxyCode}


{\bfseries{However}}, if you use {\ttfamily inner\+HTML} and you target IE $<$ 9 then \href{https://github.com/nette/nette/issues/1496}{\texttt{ this {\bfseries{might}} be a problem}}.

Accordingly, if you need more chars and/or backticks to be escaped and unescaped, feel free to use alternatives like \href{https://github.com/lodash/lodash}{\texttt{ lodash}} or \href{https://www.npmjs.com/package/he}{\texttt{ he}}

Here a bit more of \href{https://github.com/WebReflection/html-escaper/commit/52d554fc6e8583b6ffdd357967cf71962fc07cf6\#commitcomment-10625122}{\texttt{ my POV}} and why I haven\textquotesingle{}t implemented same thing alternatives did. Good news\+: those are alternatives ;-\/) 