I need to save a webpage to the filesystem using the Save Webpage function while keeping changes done with javascript. I have an input field where you can type in your name and save it, which is then displayed on the website. If i use Save As... in firefox my changes are saved in the resulting html file. When i use IE11 i get the original source code without my user input.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
<script>
function saveUser(form) {
var form = document.getElementById('saveUserForm');
form.previousElementSibling.innerHTML = form.previousElementSibling.innerHTML + "<br />Created by: " + form.name.value;
form.parentNode.removeChild(form);
}
</script>
</head>
<body>
<div>
<h1>Test Page</h1>
<p>Created at: Today
<form class="userForm" id="saveUserForm" action="" method="get">
<label for="name">Created by: </label>
<input id="name" name="name">
<input type="button" name="button" value="Save" onclick="saveUser(this.form)" />
</form>
</p>
</div>
</body>
</html>
Can anybody make any suggestions on how to keep dynamic changes when saving a web page in IE11?
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SwinTech</title>
</head>
<body>
<form action="apply.html" method="post">
<div class="consultantinformation">
<h2> Job reference number: </h2>
<br>
<h4 id="jobreference2"> 6LZ9W </h4>
</div>
<button id="submitbutton">Submit</button>
</form>
<script>
document.getElementById("submitbutton").addEventListener("click", setItem);
localStorage.setItem("jobreference1", "1FN43");
</script>
</body>
</html>
I'm trying to transfer "jobreference1" from the 1st snippet to the 2nd using local storage. As you can see, I've stored it in one external JavaScript file and sent it to another. But when I try to call it in the HTML code in the 2nd snippet, to which the value was transferred to, it simply doesn't work. I've decided to include all of my HTML and JavaScript code for my second snippet because I believe that's where the issue lies. Thank you.
Note: no Inline JavaScript or jQuery.
This is a working example. The index.html sets the reference on page load. The form submit redirects to apply.html and it reads the correct value at page load.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SwinTech</title>
</head>
<body>
<form action="apply.html" method="post">
<div class="consultantinformation">
<h2> Job reference number: </h2>
<br>
<h4 id="jobreference2"> 6LZ9W </h4>
</div>
<button>Submit</button>
</form>
<script>
localStorage.setItem("jobreference1", "1FN43");
</script>
</body>
</html>
apply.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>Job Reference Number: <span id="job1"></span></p>
<script>
document.getElementById("job1").innerHTML = localStorage.getItem("jobreference1");
</script>
</body>
</html>
Javascript beginner here - I looked up a bunch of answers on similar questions, but they all use PHP which I don't know anything about. I was hoping to do the following in pure Javascript:
I have a input field and a button:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<form>
<label for="someNum">Some number:</label>
<input type="number" id="someNum">
<input type="submit" id="button" value="Submit">
</form>
<script src="script.js"></script>
</body>
</html>
When I hit "Submit", I want to console.log the value of someNum:
const button = document.getElementById("button")
button.addEventListener("click", calculate)
function calculate () {
let someNum = document.getElementById("someNum").value
console.log(someNum)
}
However, upon clicking "Submit", the value entered by the user is no longer shown in the form. How do I prevent that?
I am trying to learn about XSS vulnerabilities and am having some issue grasping the concept. I have a test site http://mytestpage/index.html and am trying to launch an alert box via xss from a secondary page http://xsstest.html. I can not seem to get the alert to occur. I think my issue is that the code from my xsstest page is not injecting into my mytestpage/index.html page. I am trying to use innerhtml as the posts I read seemed to leverage this in XSS testing. I am fairly certain that I am not using the innerhtml correctly or pehaps it is not the right "tool for the job" and i am running down the wrong path. Any suggestions would be appreciated.
My code for the XSS test is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>XSS TEST PAGE</title>
</head>
<body>
<body onload="document.forms[0].submit()">
<form method="POST" id="test" onsubmit="test()" action="http://mytestpage/index.html" >
</form>
</body>
<script>
function test(){
alert("Hiya buddy!");
}
document.getElementById().innerHTML = test();
</script>
</html>
The test homepage code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Test Home Page</title>
</head>
<body>
<form method="post">
<label>Enter Your Name:</label>
<input type="text" name="myname">
<button class="btn" type="submit" name="action" value="submit">Submit</button>
</form>
</body>
</html>
This right here is no bueno:
<script>
function test( ){
alert("Hiya buddy!");
}
document.getElementById().innerHTML = test();
</script>
document.getElementById() requires you pass it the ID of an element. So, for example, if there's a div on the page with the ID of #alert, you'd do document.getElementById('alert').
You also can't assign a function to the inner HTML of an element. You need to create a script element and then append it to the document or another element. Instead, try:
<script>
let myTest = document.createElement('script')
myTest.text = `
function test() {
alert('Hiya buddy!')
};
test();
`
const body = document.querySelector('body')
body.appendChild(myTest)
</script>
You are not doing XSS. You are simply displaying alert upon form submission. That too has error that document.getElementById() requires a id to select the element.
XSS is done where you have some input to enter. SO you cannot do XSS in XSStest page but you can do it from test home page code by changing it as
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Test Home Page</title>
</head>
<body>
<form method="post" action="some page url">
<label>Enter Your Name:</label>
<input type="text" name="myname">
<button class="btn" type="submit" name="action" value="submit">Submit</button>
</form>
</body>
And Suppose the page whose url you have given in action attribute is like
<!DOCTYPE html>
<HTML>
<body>
Name is: <%=request.getParameter("myname")%>
</body>
</HTML>
I have assumed you are using jsp here.
Now when you enter XSS payload in inputbox in this page and submit it the page whose url you have given will open up and display the alert as you have not sanitized the input value before using it in second page.
So, I can send a Post to my PHP program and it can send a response to a div on my HTML page. However, what I want to do is have this response display in the TinyMCE editor and NOT in the div area. How do I adapt my code to do that?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>getdata</title>
<script type="text/javascript" src="tinymce/js/jquery.min.js"></script>
<script type="text/javascript" src="tinymce/plugin/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="tinymce/plugin/tinymce/init-tinymce.js"></script>
<script type="text/javascript">
function post()
{
tinyMCE.triggerSave();
var documentx= $('#texteditor').val();
$.post('validate.php',{postdocument:documentx},
function (data)
{
$('#data-container').html(data);
} );
}
</script>
</head>
<body>
<form id="get-data-form" method="post">
<textarea class="tinymce" id="texteditor"> </textarea>
<input type="button" value="submit" onclick="post();" />
</form>
<div id="data-container"> </div>
</body>
</html>
When the data is sent back via JavaScript just use the appropriate TinyMCE API to set the content:
https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#setcontent
...placing it back into the underlying textarea won't do anything unless you remove and re-init the editor.
EDIT: Please see this TinyMCE Fiddle for a fully working example: http://fiddle.tinymce.com/aPfaab
Here is my simple html file, I ran on firefox 47; the autocomplete attribute does not have any effect.
I'm expecting press "down" arrow will show my history. However, it does not work. Why?
Note1: I've checked Firefox | Options | Privacy | Firefox will: Remember History; I've also disabled all add-ins and restarted Firefox; still not work.
Note2: these code are just running on client browser, I don't need a form to submit to server. All I need is to click the button, then retrieve the text from input and do something in JavaScript.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript">
function runCommand(command_str) {
};
</script>
</head>
<body>
<input id="command_text" type="text" autocomplete="on" size="80" >
<button onclick="runCommand(document.getElementById('command_text').value)">Run Command</button>
</body>
</html>
This happens because you have not wrapped your inputs in a form.
Please wrap it in a form like below and autocomplete attribute to the form too. Also name your parameter.
<form autocomplete="on">
<input id="command_text" type="text" autocomplete="on" name="command_text" size="80" >
<button onclick="runCommand(document.getElementById('command_text').value)">Run Command</button>
</form>