Template literals

JavaScript
1

I was learning forms in HTML and had a set of javascript code that is needed(I think) to make the GET method work. I copied the javascript code and the error I got is the Template literal turns into string for some reason.

html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<form action="results.html" method="GET"></form>
    <div>
        <div>
            <label>name</label>
            <input name="name" >
        </div>
        <div>
            <label>password</label>
            <input type="name">
        </div>
        <button>Submit</button>
    </div>
    
</body>
</html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>results</title>
</head>
<body>

    <div id="results"></div>
    <a href="/">Back to form</a>
    <script>
     const resultsList = document.getElementById('results')
     new URLSearchParams(window.location.search).forEach((value, name) =>{
          resultsList.append('${name}: ${value}')
          resultsList.append(document.createElement('br'))    
     })
    </script>
</body>
</html>

image

2

To be honest I have no idea what you want to achieve with your code.
Can you give more details of what you expect as the output/result of your code?

3

For the input tags to be functional, I think. I’m not fully aware of the concept of that code because I had learned javascript for like a month then switched to HTML two weeks ago, so my knowledge is pretty vague. I copied it because the dude told me to.

skip to 4:20 to see what I want to achieve.

4

I know this is an example from some tutorial, but in the real world please don’t ever send passwords in a GET request. Intermediate proxies are allowed to cache GET requests, and you really don’t want that!

2 Likes
5

A real-world case about why maintaining security standards is vital, even when dealing with example code, is from recent zero-day attacks involving NGINX. They made the mistake of publishing a “LDAP Reference Implementation” that lacked suitable security precautions, and later on stated that you shouldn’t ever use that reference implementation in the real world when people were using that.

You can read more about that in the Show Notes for this weeks Security Now podcast.

Things like that help to reinforce for me that the “tyranny of the default” means that people use it as-is without much if any modification. Proper standards need to be maintained throughout to help deal with that.

2 Likes
6

I see, I will not do that.

Can you see why the template literals turn into a string? I copied his code, so I don’t understand half of the code.

image

7

Template Literals use back-ticks (`) rather than the quotes (') to define a string:

`Hello ${firstName}, ${lastName}!`
2 Likes
8

The markup for the form has a number of issues -

  1. The closing </form> tag is right after the <form ...>, so, none of the form fields, nor the submit button, are within the form.
  2. For a form field to include its data when the form is normally submitted, it must have a name='...' attribute. Only the ‘name’ field, has one. The ‘password’ field does not.
  3. Each field should have a valid type='...' attribute. The ‘name’ field does not have any, but the default is type=‘text’. The ‘password’ field has an invalid type attribute, so, its type is also text.
  4. The current default type=‘…’ attribute for a <button... > is type=‘submit’, but this has changed over time and some clients may not follow this standard. You should always specify type='submit' in the button tag when using it as the submit button for a form.
  5. <label>...</label> tags either need to be tied to the field through an id, or more simply just put the them around the field they belong with.

Unfortunately, these type (no programming pun intended) of mistakes occur when you are just repeating things you have seen, without actually learning the meaning/requirements of what you are doing. You are left without the necessary knowledge to find and fix problems when they don’t work, nor can you write original code based on what you have seen and cannot accurately recall. Writing code requires that you learn and internalize the meaning of the keywords and syntax, so that when you write or read it you can recognize when it is right or wrong, rather than relying on some past memory of what you think it should look like.

2 Likes
9

Yes ik

10

What do I use instead of GET?

11

You’d use POST

Although then you can’t read those values from the query parameters anymore. POST variables are to be interpreted by some sort of script.

So as far as this example goes, it will only work with GET, not POST

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.