Solved but the answer that contained a key debugging suggestion was deleted by author. Consider case closed.
This should be really simple, but for some reason I just cannot figure it out. I need to get the value of a div's title attribute, and the jQuery code I have is:
var name = $('#stg'+this.id).attr('title');
and the div in the relevant HTML source code is:
<div class="stage" id="stg32432432" title="Name - desc">...</div>
For some odd reason, request for attr("title") keeps returning undefined, even though attr("id") and attr("class") all return expected values with no issues. What am I missing?
Edit: I tried debugging it with a trick suggested in a (now deleted) reply:
var name = $('#stg'+this.id)[0].outerHTML;
and lo and behold, it shows:
<div class="stage" id="stg32432432">...</div>
Something ate my title! Everything else is exactly as I expected, but the title is missing. Too bad I cannot mark that reply as correct, as I think from here on I can trace where the attributes gets annihilated.
Update: it turned out that a third party library used for displaying titles as fancy tooltips was stripping the titles as it processed them. Mystery resolved.
Thanks to all.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[class=stage][id^=stg]').live('mouseover', function () {
var name = $(this).attr('title');
$('#result').html('<h1>This ddiv title is: ' + name + '</h1>');
});
});
</script>
</head>
<body>
<span id="result"></span>
<div class="stage" id="stg32432432" title="Name - desc1">
1...
</div>
<br />
<div class="stage" id="stg32432433" title="Name - desc2">
2...
</div>
<br />
<div class="stage" id="stg32432434" title="Name - desc3">
3...
</div>
<br />
<div class="stage" id="stg32432435" title="Name - desc4">
4...
</div>
</body>
</html>
Related
I want to create a simple site that can be broken with a Cross-Site Scripting vulnerability. The problem lies in the third and "hard" challenge which filters input with regex and removes everything that starts and ends with angle brackets. So, for example, <img> would be removed, but <img would not. That is also the key to solving the challenge - an unclosed void tag with malicious event attributes. The problem is that the <img tag (or any other unclosed tag) breaks the site but is not added to the DOM.
Everything is done by JavaScript. Clicking a button takes the value of the text box and assigns it to a paragraph's innerHTML. I have already tried other methods like outerHTML, or insertAdjacentHTML() but it all has the same result.
This is the HTML:
<head>
<title>Search</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet/stylesheet.css">
<script src="script/xss_hard.js"></script>
</head>
<body>
<div id="top">
<div id="Logo">
<img src="images/logo.png" style="margin-top: 0px; width:150px;display:block" />
<h2><span id="title">Search</span></h2>
</div>
</div>
<div id="logic">
<input type="text" onclick="javascript:clearBox()" value="Search" id="box">
<input type="submit" value="Check" onclick="javascript:submit()" id="butt">
</div>
<p id="searchReflect"></p>
</body>
And this is the corresponding JavaScript:
function submit(){
var reflect = document.getElementById('searchReflect');
var boxText = document.getElementById('box').value;
var blacklist = /<.*>/;
boxText = boxText.replace(blacklist, '');
reflect.HTML = "Your search for \"" + boxText + "\" returned nothing!";
}
The expectation is, is that it is possible to inject e.g. <img src="" onerror="alert(1)" and get an alert popup (XSS). What actually happens is this (taken from Firefox inspector with "Edit as HTML"):
<p id="searchReflect">Your search for "</p>
The strange thing is, is that it breaks the output, but is still not run. Same thing with svg, iframe, or other tags. It SHOULD be, when filtered or properly embedded (innerText, for example):
<p id="searchReflect">Your search for "foo" returned nothing!</p>
You need to improve your code.
<head>
<title>Search</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet/stylesheet.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
<script src="script/xss_hard.js"></script>
</head>
<body>
<div id="top">
<div id="Logo">
<img src="images/logo.png" style="margin-top: 0px;width:150px;display:block" />
<h2><span id="title">Search</span></h2>
</div>
</div>
<div id="logic">
<input type="text" value="" id="box" placeholder="Search" />
<input type="submit" value="Check" onclick="submit()" id="butt" />
</div>
<p id="searchReflect"></p>
</body>
And corresponding Javascript. I added jQuery in <Head> tag to make code simpler :) Javascript is too long to write so use jQuery instead of Javascript.
function submit(){
var reflect = $('#searchReflect');
var boxText = document.getElementById('box').value;
var blacklist = /<.*>/;
boxText = boxText.replace(blacklist, '');
reflect.html('Your search for \'' + boxText + '\' returned nothing!');
$('#box').val('');
}
I need to dynamically add and remove HTML elements to my product form (attribute addition purpose) and was searching stack overflow.
I found this solution to be very close (except it does not has a remove option plus I sincerely do not know how to retrieve the data of each textbox, but all this later).
https://jsfiddle.net/nzYAW/
The code in the fiddle works fine. But as I tried it on my local machine it fails to produce any result.
Here is what I did
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.extraPersonTemplate {display:none;}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('<div/>', {
'class': 'extraPerson',
html: GetHtml()
}).appendTo('#container');
$('#addRow').click(function () {
$('<div/>', {
'class': 'extraPerson',
html: GetHtml()
}).hide().appendTo('#container').slideDown('slow');
});
})
function GetHtml() {
var len = $('.extraPerson').length;
var $html = $('.extraPersonTemplate').clone();
$html.find('[name=firstname]')[0].name = "firstname" + len;
$html.find('[name=lastname]')[0].name = "lastname" + len;
$html.find('[name=gender]')[0].name = "gender" + len;
return $html.html();
}
</script>
</head>
<body>
<div class="extraPersonTemplate">
<div class="controls controls-row">
<input class="span3" placeholder="First Name" type="text" name="firstname">
<input class="span3" placeholder="Last Name" type="text" name="lastname">
<select class="span2" name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div id="container"></div>
<i class="icon-plus-sign icon-white"></i> Add another family member</p>
</body>
</html>
and this is the result
Where did I go wrong at copy paste?
You need to load jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You need to include jQuery. If you check your javascript console (which you definetly should) you will probably find this error:
$ is not defined
That is because jQuery wasn't loaded before you try to use it. Add this to your page before your javascript code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can see in the JSFiddle that you include these libraries, but you don't include them when you just copy paste this.
Include these javascripts
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
Move the JavaScript to be right above the </body> tag.
I think if you're trying to access elements before the page has loaded them, then it won't work.
Also as other answers have pointed out, be sure you've included jQuery in the <head></head> section of your page.
I am new to php and hoping someone can help.
I have been able to get an RSS feed up and running by pulling different code from over the internet.
What I am trying to achieve is, if the RSS feed is empty, I would like it to display a message "There are no current warnings"
If there are items in the RSS feed, I would like it to display the Item, along with a div below that is set to hidden.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en">
<head>
<title>Weather Warnings for Queensland - Issued by the Bureau of Meteorology</title></head>
<link type="text/css" href="rss-style.css" rel="stylesheet">
</head>
<script type="text/javascript">
window.setInterval (BlinkIt, 500);
var color = "#0000FF";
function BlinkIt () {
var blink = document.getElementById ("blink");
color = (color == "#FA000C")? "#0000FF" : "#FA000C";
blink.style.color = color;
}
</script>
<body bgcolor="#999">
<h1>Weather Warnings for Queensland - Issued by the Bureau of Meteorology</h1>
<hr>
<br>
<!-- display current weather warnings -->
<fieldset class="rsslib">
<?php
require_once("rsslib.php");
$url = "http://www.bom.gov.au/fwo/IDZ00056.warnings_qld.xml";
echo RSS_Display($url, 3, false, true)
//if there is no warning, i would like to display text saying "There are no current warnings"
// if there are warnings, I would like it to display the RSS, and also display the below wrapper blinking text.
?>
</fieldset>
<!---------------------------- echo "There are no current weather warnings" ---------------------------------->
<!-- this is where I put my blinking text, this is not currently set to only display when there is a warning-->
<div id='wrapper' style="display: none">
<div id="blink">
Current Weather Warning!
</div>
<div id="direction">
Please go to www.bom.gov.au for more details.
</div>
</div>
</body>
</html>
Any help would be much appreciated, I can copy in the rsslib.php if need be??
When you call RSS_Display, instead of displaying it immediately, store its return value in a variable. Then you can test whether it's an empty string (nothing to display) or not, and act accordingly:
$rss = RSS_Display($url, 3, false, true);
if ($rss == '')
{
// nothing shown, do whatever you want
}
else
{
// something to display
echo $rss;
// you can add other stuff here
}
console.log(value); does not log anything but the number on the left is incrimented everyime i click and it indicates that the console.log() call is made, just not showing what I put into it.
Also, a side question is how could I do this if the javascript is in a different file? Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Star Delete</title>
<!--<script type="text/javascript" src="StarDelete.js"></script>-->
</head>
<body>OKAY DELETE STAR YES ;D!
<form>
<input type="text" id="formValueId" name="valueId"/>
<input type="button" id="theButton"/>
</form>
<script type ="text/javascript">
var button = document.getElementById("theButton"),
value = button.form.valueId.value;
//value = document.getElementById("formValueId").value;
button.onclick = function() {
console.log(value);
}
</script>
</body>
</html>
http://jsfiddle.net/3wjRJ/1/
var button = document.getElementById("theButton"),
value = button.form.valueId.value;
Here you go, the issue was that you were declaring the value variable when the javascript was first loaded, therefore it was always blank.
I am trying to get the user to put something into the text area and the output should be what he wrote repeapiting x amount of times, but I get an error "document.forme is undefined".
Can you please help me understand why it is undefined?
My code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>input home work</title>
<script type="text/javascript">
var help= document.forme.tryout.value;
for (x=1; x<=10;x++){
function numberCheak (){
document.write("this is"+" "+help++);
}
}
</script>
</head>
<body>
<form name="forme">
<input name="tryout" type="text" />
<input type="button" value="click me" onClick="numberCheak();"/>
</form>
</body>
</html>
Ok, you have a few problems. The first is that you are trying to access a form element that doesn't exist yet: the script is above the form element, so the form doesn't exist when you try to get it. If you move the script to the bottom of the page it will work better.
Second, the loop should be inside the function, not wrapped around the function.
Third, document.write has weird side effects and causes the document to be rewritten and will stop the script from continuing correctly.
Here's my revised script
function numberCheak() {
var help = document.forme.tryout.value;
for (var x = 1; x <= 10; x++) {
document.getElementById("output").innerHTML += help;
}
}
and the HTML form that goes with it
<form name="forme" id="forme">
<input name="tryout" type="text" />
<input type="button" value="click me" onclick="numberCheak();" />
<span id="output"></span>
</form>
You can see it in action on jsFiddle.
Forms are stored in collection and can be accessed like this:
var form = document.forms[i];
or
var form = document.forms[name];
In your case, i is 0 and name is forme.