Constructing a web page, now using encoding to prevent (some) injection problems
This web page contains JavaScript code that mimics the
behaviour of a web server that generates a web page using the
template below. The template applies some encodings (aka
sanitisations) to
limit the possibility for (malicious or accidental) weird input
causing problems, such as XSS, corrupting links, or simply
breaking stuff.
<![CDATA[ <h4> ${htmlEncode(name)}'s Blog! </h4>
${htmlEncode(description)}
<img align="right" src="${photo_url}">
<p><a href="https://ourdomain.nl/contact?user=${encodeURIComponent(name)}">User info for $htmlEscaped(name)} </a></p>
<p><b onmousedown="alert('Welcome to the blog by ${jsEscape(htmlEncode(name))}!');">Click here for a silly pop-up</b></p>`);
<p>If you want to go to ${name}'s name homepage, <a href="${homepage_url}">click here</a>. ]]>
The encodings used in this template are
- htmlEncode() for HTML encoding,
- JsEncode() for JavaScript-string-literal encoding,
- encodeURIComponent() for URL encoding;
more specifically, encoding components inside the query string
of a URL
The first two operations are defined inside this web
page. The last function is provided by the built-in API of
any browser; for a description, see Mozilla's Web API docs about encodeURIComponent().
Note that first HTML-encoding and then JS-string-literal encoding the
name in the onmousedown tag is probably not be the best solution. Also, as we found out in class, the template forgets to encode
name in the last line of the template.
Supplying the parameters
Generating the web page
Hitting the buttons below executes a JavaScript function
generateWebPage that uses the values above to generate
an HTML web page. The buttons use two different techniques
provided by the DOM API to get your browser to render the generated HTML:
innerHTML and document.write().
Below the generated webpage will appear
Here the generated webpage will appear