Comment puis-je créer une zone de texte qui insère html dans la page Web en utilisant uniquement JavaScript

Question

Je crée un site Web vulnérable XSS pour un de mes amis afin qu'il puisse déranger avec elle. Cependant, j'ai essayé d'en créer un au cours des derniers jours, mais cela n'a pas fonctionné. Ce que j'ai maintenant juste pour simplifier est:

<input type="text" id="YourText"> 
<button onclick="myFunction()">Button</button> 

JavaScript:

function myFunction() { 
    var btn = document.createElement("button"); 
    btn.appendChild(document.createTextNode(document.getElementById("YourText").value); 
    document.body.appendChild(btn); 
} 

donc ce qu'il est censé faire est si vous appuyez sur le bouton appelé bouton, il crée un bouton avec le texte que vous avez saisi dans la zone de texte qui a l'ID de votre créer. Cependant, quand je cours cela, rien ne se passe. Je ne comprends pas pourquoi. J'ai utilisé des balises de paragraphe et même des balises de script, mais rien ne fonctionne. Cependant, si je fais de sorte qu'il ne crée que l'élément, mais ne prend pas l'entrée de l'utilisateur, comme ceci:

function myFunction() { 
    var btn = document.createElement("button"); 
    btn.appendChild(document.createTextNode("Hi")); 
    document.body.appendChild(btn); 
} 

Il fonctionne très bien. J'ai essayé d'enlever le .value mais cela ne fonctionne toujours pas. Je ne peux pas comprendre ce que je fais mal, s'il vous plaît aider.

Le code source est ici: https://github.com/ninja25538/SuperCoolImageSiteThat-sNotAtAllVulnerable/blob/master/index.html

Answer 1

essayer

<script> 
function myFunction() { 
var val = document.getElementById("YourText").value; 
var x = "<input type=submit value="+val+"></input>"; 
document.getElementById("someDiv").innerHTML += x; 
} 
</script> 

Answer 2

Au lieu de

btn.appendChild(document.createTextNode(document.getElementById("YourText").value); 

essayer

btn.appendChild(document.createTextNode(document.getElementById("YourText").innerHTML);