I have some confusion. I need to sure that is jQuery's append method` create the DOM-based XSS attack. I am providing my code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<select class="form-control" id="cmbEnrollProcess" name="cmbEnrollProcess"></select>
<button type="button" id="btn" onclick="xssecho();">Add</button>
<script type="text/javascript">
function xssecho(){
var options = "<option value=''>Select Enrollment Process</option>";
console.log('option',options);
$('#cmbEnrollProcess').html("");
$('#cmbEnrollProcess').append(options);
}
</script>
</body>
</html>
Here I am adding the option value dynamically using jQuery's append method. I need to find out whether this method create the DOM based XSS attack or not ?
Not sure what you are asking... but adding element with strings can open up for attacks... Example:
var value = "'><script>console.log(`dang`)</sc"+"ript><option>"
var options = "<option value='"+value+"'>Select Enrollment Process</option>";
$('select').append(options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>
one way to be safe is creating the value like this with jQuery:
var options = $('<option>', {
text: 'Select Enrollment Process',
value: 'few'
})
$('select').append(options)
Related
I wanted to modify something in my code and don't really know how to make this work... my code is kinda huge so I am going to explain what I want with an exemple :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<div id="button">OK</div>
<div id="nfa"></div>
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
</body>
</html>
So this is my HTML code, so what I want to do is NOT execute these 3 scripts until the user enters a value in the text input and clicks on OK. That value will be used in the js files, so i have to get the value after I click OK.
Can someone explain how this has to work ?
EDIT : problem was with jQuery that was not executing on Electron, solution : http://ourcodeworld.com/articles/read/202/how-to-include-and-use-jquery-in-electron-framework
For starters I would suggest changing; <div id="button">OK</div> to <button id="button">OK</button>.
I would then suggest to put each of those scripts into functions instead, then you can use the 'onClick' event from the button attribute as follows;
<button id="button" onClick="s1Func();s2Func();s3Func();">OK</button>
A better way would be to have one function call 'init' or something appropriate that then calls the 3 scripts/functions and have your buttons onClick even call that one initialization function.
JSFiddle Example:
https://jsfiddle.net/JokerDan/h7htk9Lp/
I would recommend you to load the scripts dynamically after you click on the button. This can be done via jQuery: https://api.jquery.com/jquery.getscript/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
<title>NFA2DFA</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<div id="button" onclick="loadScripts();">OK</div>
<div id="nfa"></div>
<script>
function loadScripts() {
// Is the input empty?
var value = $("#reg_expr").val();
if (value.length != 0) {
// Loads and executes the scripts
console.log(value); // Displays the value of the input field
$.getScript("script1.js");
$.getScript("script2.js");
$.getScript("script3.js");
}
}
</script>
</body>
</html>
You can use a button tag instead of input tag. I suggest you to use onClick event like this:
<button type="button" onclick="yourFunction()">Click me</button>
When the users click the button yourFunction() is call.
The result is this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheets/application.css">
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
</head>
<body>
<label>Enter value : </label><input type="text" maxlength="512" id="reg_expr"/>
<button type="button" onclick="yourFunction()">Click me</button>
</body>
</html>
I want to dynamically change the language of the DateTimePicker jQuery Plug-in (http://xdsoft.net/jqplugins/datetimepicker/) and I'm getting an "undefined" error for the lang1 inside the last plug-in call:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Datatimepicker</title>
<link rel="stylesheet" href="css/jquery.datetimepicker.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
</head>
<body>
<input id="datetimepicker" type="text" placeholder="Datetimerpicker">
<input id="lang" type="text" placeholder="language" value="en"><div class="select">select language</div>
<script>
var lang1;
$(".select").click(function(){
lang = $('#lang').val();
lang1 = '"'+lang+'"';
return lang1
});
$(".select").click(function(){
console.log(lang1);
$('#datetimepicker').datetimepicker({
lang: lang1
})
});
</script>
</body>
</html>
Shouldn't this work?
You defined two click handlers which you expect to somewhat magically exchange the lang1 variable.
Probably you intended this:
$(".select").click(function(){
var lang = $('#lang').val(); // 1
console.log(lang); // 2
$('#datetimepicker').datetimepicker({ lang: lang }); // 3
});
Get the current lang value from input field #lang
Log it to the console
Initialize the datepicker to use the language lang.
I try to get the value in JQTE Text Editor . I want to get only values without any HTML element or design.
I tried this bus this is giving me styles also in the values when I do some styling on UI . But I want only value without style. Any help would be great for me .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Crea Application</title>
<link href="css/jquery-te-1.4.0.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../js/thirdparty/jquery-1.11.2.js"></script><![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" charset="utf-8"></script>
<!--<![endif]-->
<script src="js/thirdparty/jquery-te-1.4.0.min.js"></script>
<!-- <script src="js/thirdparty/jquery.cookie.js"></script>
<script src="js/thirdparty/jquery.loadmask.min.js"></script>
<script src="js/thirdparty/jquery.maskinput.js"></script>
<script src="js/thirdparty/jquery.bpopup.js"></script>
<script src="js/thirdparty/jquery-date-time.js"></script>
<script src="js/thirdparty/jquery.datetimepicker.js"></script>
<script src="js/thirdparty/jquery-timepicker.js"></script>
<script src="js/thirdparty/jquery-center.js"></script>
<script src="js/thirdparty/jquery.jqdock.js"></script>
<script src='js/thirdparty/jquery.scrollto.js'></script>
<script src='js/thirdparty/moment.js'></script>
<script src='js/thirdparty/bowsy.js'></script> -->
</head>
<body>
<textarea cols="2" rows="3" name="textarea" class="jqte-test" id="mytextarea"></textarea>
<button class="status">Toggle jQTE</button>
<script type="text/javascript">
$(".status").click(function()
{
// alert($("textarea#mytextarea").html());
jqteStatus = jqteStatus ? false : true;
$('.jqte-test:first').jqte({"status" : jqteStatus});
console.log($("#mytextarea").html());
jqteStatus = jqteStatus ? false : true;
$('.jqte-test:first').jqte({"status" : jqteStatus});
});
</script>
</body>
</html>
Since the field is nested inside of the jqte block you can go up the DOM to get to a level that allows just getting the text:
For example if your field was "emailsubject":
$("#emailsubject").closest(".jqte").find(".jqte_editor").eq(0).text();
So going up the DOM we find the closest element with the style ".jqte", then we go down the DOM to find the next style of ".jqte_editor". Since this will be a jQuery object, we need to get the first occurance with .eq(0) and finally just get the text with .text()
You can simply remove the HTML formatting with:
var myContent = $('.jqte-test').val();
var final = $(myContent).text();
I'm trying to create a range of numbers in a dropdown form using JavaScript.
However, it looks like
…and it does not show any options and clicking on the arrow does not pop up more options. I already checked that my path is correct.
I tried it in JSFiddle and it works but not when I put it in my HTML.
I'm going crazy on why this is not working.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../stylesheets/main.css">
<script type="text/javascript" src="../assets/main.js"></script>
</head>
<body id="gradient">
<div id="down" class="center">
<p >Word Size</p>
<select id="length">
</select>
</div>
</body>
</html>
main.js
var select = document.getElementById('length');
for (var i = 0; i<= 24; i++){
var option = document.createElement('option');
option.value = i;
option.innerHTML = i;
select.options.add(option);
}
The problem is that when main.js script is parsed and executed, there is no element with id length yet in DOM. The simplest solution is to move your script to the very end of body tag:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../stylesheets/main.css">
</head>
<body id="gradient">
<div id="down" class="center">
<p >Word Size</p>
<select id="length"></select>
</div>
<script type="text/javascript" src="../assets/main.js"></script>
</body>
</html>
The reason why it works in jsFiddle, is because it's configured so that script section is executed on window.onload event (in the right side-panel, dropdown "onLoad"). Of course, you could do the same, e.g. in main.js:
window.onload = function() { /* previous main.js code */};
In this case you would not need to move script anywhere.
I've been attempting to put together a website that requires obtaining xml data from another website. So far, using only html and javascript (no twitter bootstrap), I can access the website XML and populate a select dropdown menu. Here is the non-bootstrap html code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/getXML.js"></script>
</head>
<body>
<h1>Test App</h1>
<button id="button1">submit</button>
<select id="selectState"></select>
</body>
</html>
and here is the bootstrap html code:
<!DOCTYPE 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">
<!-- Bootstrap CSS-->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- jQuery and JavaScript files -->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/getXML.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4 col-xs-3">
<form class = "well">
<h2 class="page-header">Inputs</h2>
<label class="control-label" for="selectState">Select State:</label>
<select id="selectState"></select>
<button type="submit" class="btn btn-default" id="button1" >submit</button>
</form>
</div>
</div>
</div>
</html>
and here is the getXML.js script:
var HttpClient = function() {
this.get = function(aUrl, aCallback) {
anHttpRequest = new XMLHttpRequest();
anHttpRequest.onreadystatechange = function() {
if (anHttpRequest.readyState == 4 && anHttpRequest.status == 200)
aCallback(anHttpRequest.responseText);
}
anHttpRequest.open( "GET", aUrl, true );
anHttpRequest.send( null );
}
}
$(document).ready(function(){
$( "#button1" ).click(function () {
aClient = new HttpClient();
aClient.get('http://www.waterqualitydata.us/Station/search?characteristicName=Caffeine&mimeType=xml&bBox=-92.8,44.2,-88.9,46', function(data) {
xmlDoc = $.parseXML( data ),
$xml = $( xmlDoc ),
$LocName = $xml.find( "MonitoringLocationName" );
var arr = [];
$.each($LocName,function() {
arr.push( $(this).text() );
});
for ( var i = 0; i < arr.length; i = i + 1 ) {
$('#selectState').append('<option>'+arr[i]+'</option>');
}
alert( "success" );
});
});
});
Now, when I try and using the Twitter bootstrap html, I am getting a Cross-Origin Request Block due to the Same Origin Policy.
Is there any reason why the scripts that don't use Twitter Bootstrap can get around the SOP, while the twitter bootstrap version can't?
Modify the Bootstrap script to include the 'type' attribute, like so:
<script src="js/bootstrap.min.js" type="text/javascript"></script>
The 'type' parameter here is key - it is what allows the remote request to happen. CSS and JS are allowed to do this kind of cross domain linking, as it is judged by the W3C gods to be a low security risk (at least last I checked).
Check these links out for more information on CORS:
IE's explanation: http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx
Mozilla's thoughts: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
OK, I think I found the problem. I was placing the <button> inside a <form> element. This apparently raises the SOP block. Without the <form> element, no SOP block was raised.
I haven't looked at the exact reason behind this, but maybe its related to a security feature baked into the <form> element, since <form> elements can be used to pass sensitive information (passwords, etc.)?