Programatically setting URL parameters to the form's action attribute in Javascript-CodePudding

I want to post some Form data to my Server. I'm setting this element programatically and setting it's URL parameters to the action attribute but it's not taking those attributes. What am I doing wrong? Below is my code:

for(let i = 0; i < itemsDatabase.length; i  ){

    document.getElementById("div-section-container").innerHTML  = `

    <div >
    
    <h2>${itemsDatabase[i].name}</h2>

    <img src = ${itemsDatabase[i].image} >

    <p>${itemsDatabase[i].desc}</p>  

    <form method= "POST" action= "/favorites/add/name/${itemsDatabase[i].name}/desc/${itemsDatabase[i].desc}/img/${itemsDatabase[i].image}/id/${itemsDatabase[i].id}">
    <button class = "btn-favourite" type="submit">Mark As Favourite</Button>
    
    </div>
    
    `; 
}

My server code is :

app.post("/favorites/add/name/:name/desc/:desc/img/:img/id/:id", (req, res)=>{
  console.log(`Post request received`);
  console.log(req.params);
})

Getting this on the Browser:

Cannot POST /favorites/add/name/blue nightshade/desc/A plant that grows in the quieter areas of Hyrule. At night, it gives off a soft glow. Cook with it to increase your stealth./img/https://botw-compendium.herokuapp.com/api/v2/entry/blue_nightshade/image/id/198

I'm getting a 404 not found

CodePudding user response：

The problem would appear to be that https://botw-compendium.herokuapp.com/api/v2/entry/blue_nightshade/image is not a valid value for the :img parameter, which must not contain slashes to be matched by the pattern /favorites/add/name/:name/desc/:desc/img/:img/id/:id.

You could circumvent that by url-encoding the values:

`<form method="POST" action="/favorites/add/name/${encodeURIComponent(itemsDatabase[i].name)}/desc/${encodeURIComponent(itemsDatabase[i].desc)}/img/${encodeURIComponent(itemsDatabase[i].image)}/id/${encodeURIComponent(itemsDatabase[i].id)}">
  <button type="submit" >Mark As Favourite</Button>
</form>`

However, as suggested by @Jae, it would be much better to simple send those parameters as POST parameters instead of putting them into the path, via hidden inputs:

`<form method="POST" action= "/favorites/add">
  <input type="hidden" name="name" value="${itemsDatabase[i].name}">
  <input type="hidden" name="desc" value="${itemsDatabase[i].desc}">
  <input type="hidden" name="img" value="${itemsDatabase[i].image}">
  <input type="hidden" name="id" value="${itemsDatabase[i].id}">
  <button type="submit" >Mark As Favourite</Button>
</form>`

Btw, to prevent XSS attacks, you should escape all interpolated values, regardless whether they are in src, action or value attributes, or whether they are element contents:

const containerContent = '';
for (let i = 0; i < itemsDatabase.length; i  ){
  containerContent  = `
    <div >
      <h2>${ escapeHtml(itemsDatabase[i].name) }</h2>
      <img src=${ escapeHtml(itemsDatabase[i].image) } >
      <p>${ escapeHtml(itemsDatabase[i].desc) }</p>  
      <form method="POST" action= "/favorites/add">
        <input type="hidden" name="name" value="${ escapeHtml(itemsDatabase[i].name) }">
        <input type="hidden" name="desc" value="${ escapeHtml(itemsDatabase[i].desc) }">
        <input type="hidden" name="img" value="${ escapeHtml(itemsDatabase[i].image) }">
        <input type="hidden" name="id" value="${ escapeHtml(itemsDatabase[i].id) }">
        <button type="submit" >Mark As Favourite</Button>
      </form>
    </div>`; 
}
document.getElementById("div-section-container").innerHTML  = containerConent;