A comment box that can't be hijacked
Make the comment form work safely (Topic 15.4). On submit, without reloading the page:
1. Read the name (#name), the comment (#text) and the optional website (#site), trimmed. If the name or the comment is empty, add nothing.
2. Add an <li> to #comments with the name in a <strong> and the comment after it. Whatever the user types must appear as text: typing <b>Bot</b> must show those characters, not bold text.
3. If the website is a valid http: or https: URL, add a link <a> to it with the text website and rel="noopener noreferrer nofollow ugc". Any other URL (for example javascript:void(0)) or an invalid one gets no link.
4. Clear the comment field after posting.
What Check tests
- Posting adds a comment with the name in
<strong> - The comment field is cleared after posting
- Empty name or comment adds nothing
- Typed markup shows as text, not as elements
- An https website becomes a safe link
- A javascript: or invalid URL gets no link
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.