Unsecure content over https - javascript

I am getting the mixed content warning on a webapp I am working on when using the jsDatePick.
I have used fiddler and can confirm the problem is not caused by any image sources.
When a date is selected the following line is run:
window.location.href = "\something\something\day?=date" + this.getSelectedDateFormatted();
Would this be the cause of the problem?

The problem seems to be with a JsDatePick .js file. I have the same issue (mixed content). I'm unfortunately forced to use IE 8 for this project. The parent page is https, and I've minimalized the page to the following (this minimal page still gets the mixed content pop-up:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<script type="text/javascript" src="jsDatePick.min.1.3.js"></script>
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
window.onload = function()
{
new JsDatePick({
useMode:2,
target:"date_range1",
dateFormat:"%m/%d/%Y"
});
};
</script>
</head>
<body>
<h1> Hey</h1>
</body>
</html>

No, because the protocol is not specified it should inherit the protocol of the parent page. Look for anything calling "http://" instead of "https://" in your page source.

Related

DOM Based Cross-site Scripting example: Java Script does not get executed

I have recently read the following article about a DOM-based XSS:
https://www.netsparker.com/blog/web-security/dom-based-cross-site-scripting-vulnerability/
But the examples provided in the article are not working as described. I created the HTML example file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head></head>
<body>
<script>
document.write("<b>Current URL</b> : " + document.baseURI);
</script>
<h1> Welcome on my Example Page </h1>
</body>
</html>
I have put the above file in an application folder of a Web-Application deployed on the JBoss server and I have called the resource from my browser ( I have tried both IE 11 and Firefox). IE 11 shows the resulting HTML content like this:
Current URL : undefined
Welcome on my Example Page
while Firefox shows the resulting HTML content like this:
Current URL : https://localhost:8443/ukvlei/example.html
Welcome on my Example Page
In both cases, I can not force any of the browsers to execute the java script function after the # sign, as described in the article. When I type
https://localhost:8443/ukvlei/example.html#<script>alert(1)</script>
in the address bar of the browser, I get the following HTML content:
under IE 11:
Current URL : undefined
Welcome on my Example Page
under Firefox:
Current URL : https://localhost:8443/ukvlei/example.html#%3Cscript%3Ealert(1)%3C/script%3E
Welcome on my Example Page
What am I doing wrong, so that I cannot execute the java script in any of the browsers?
Thank you!
You haven't run the URI through decodeURIComponent so that the URI syntax is converted back to text.
I want to thank both #scagood and #Quentin, with whose help I got my question answered. So, the answer is:
1.) Apperantly the provided example in the article is out of date, as it is around three years old, so:
2.) Use window.location.href instead of document.baseURI;
3.) To make the example run both under IE and Firefox, decode the URL using decodeURIComponent.
So, the working example HTML file now looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head></head>
<body>
<script>
document.write("<b>Current URL</b> : " + decodeURIComponent(window.location.href));
</script>
<h1> Welcome on my Example Page </h1>
</body>
</html>

jquery script not working inside HTML

( Answered: dont use <script type="text/javascript" src="jquery-1.8.0.min.js"></script> in html)
I am learning Jquery from this tutorial :
http://www.littlewebhut.com/javascript/getting_started/
I created One Html , 1 js file . put them on same physical folder ,put "jquery-1.8.0.min.js" in same folder , put a link of js file in html page
But it is not working .
my 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" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Heading one</h1>
<p>This is just some text for heading 1</p>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>
</html>
My Jquery Page (my_code.js) :
$(document).ready(function(){
$("p").hide();
$("h1").click(function(){
$(this).next().slideToggle(300);
});
});
there is some minor mistake that is happening ,
I tried to search , but could not found relevant link .PLease suggest if I am missing something
Your code is working fine.There must be some problem with your jquery file path. Try including CDN hosted jquery library as follows or check your path:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
I have tried this on js fiddle and it's working fine I guess this is what you want ,right when on clicking the h1 tag you need that p to hide if I am not wrong ,
This is the js fiddle http://jsfiddle.net/Saranshshrma/7rzLW/1/
If this script is, small you can always put in, this
<script></script>
Tags before body content but remember put your Jquery before anything else any script or code you want to execute and you can post the chrome inspect element errors while executing this code
What error are you getting ? See the console/dev tools (f12) and notice you have to click the header text to trigger the effect:
http://jsfiddle.net/m5LL4/
$(document).ready(function(){
$("p").hide();
$("h1").click(function(){
$(this).next().slideToggle(300);
});
});
I did paste your code, just take a part of the html with the same jquery version and it works.
Is javascript enabled in your browser?
If you are using chrome Go Ctrl+H click on Setting in left side->show advanced Setting->Privacy->Content Settings->Allow all sites to run Javascript.
If already checked check for your jquery path file name.

IE post to iframe in HTA opens a new window

There are a lot of posts about this topic but most of them are because IE doesn't set the attribute name dynamically.
I'm having a different trouble: I post a form (created dynamically) with an iframe as target. The first time it works great. Then I do it for a second time and IE opens a new window with the result of form's submission. I'm pretty sure it has to do with security issues because: if I create a simple HTML file (instead of a HTA) it works great. Also, if I run the same file that doesn't work locally (http://local.host/test.hta) it works great.
Any clue of whats going on or how can I fix it? Sadly its legacy code and I can't avoid using HTA or iframes and form submiting.
Here its the simple code:
<!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>
<HTA:APPLICATION
ID="oHTAGeneral_v5"
APPLICATIONNAME="TEST"
ICON='Img/icono.ico'
SCROLL="no"
SINGLEINSTANCE="yes"
SELECTION='yes'
NAVIGABLE='yes'
SHOWINTASKBAR='Yes'
WINDOWSTATE='normal' />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function() {
var url = "http://www.some-url.com/",
first = true;
$("#frame").unbind("load");
$("#frame").load(function(){
if (first) {
first = false;
$("#frame")[0].contentWindow.document.cookie = "testCookie=dummyValue";
$("<form></form>")
.attr("target", "frame").attr("method", "POST").attr("action", url)
.css("display", "none")
.appendTo($(document.body))
.append('<input type="hidden" name="dummy" value="dummy" />')
.submit();
return;
}
// Other stuff
});
$("<form></form>")
.attr("target", "frame").attr("method", "POST").attr("action", url)
.css("display", "none")
.appendTo($(document.body))
.append('<input type="hidden" name="dummy" value="dummy" />')
.submit();
});
</script>
</head>
<body>
<iframe id="frame" name="frame" width="200" height="50"></iframe>
</body>
</html>
You can try to use application="yes" attribute within iframe tag. Iframes without the said attribute are considered as unsafe in HTA, and all interaction between iframe and main window is blocked.

Is it possible to retrieve the *full* HTML page source of an iframe with Javascript?

I am trying to figure out how to retrieve the full (that means all data) HTML page source from an <iframe> whose src is from the same originating domain as the page that it is embedded on. I want the exact source code at any given time, which could be dynamic due to Javascript or php generating the <iframe> html output. This means AJAX calls like $.get() will not work for me as the page could have been modified via Javascript or generated uniquely based on the request time or mt_rand() in php. I have not been able to retrieve the exact <!DOCTYPE> declaration from my <iframe>.
I have been experimenting around and searching through Stack Overflow and have not found a solution that retrieves all of the page source including the <!DOCTYPE> declaration.
One of the answers in How do I get the entire page's HTML with jQuery? suggests that in order to retrieve the <!DOCTYPE> information, you need to construct this declaration manually, by retrieving the <iframe>'s document.doctype property and then adding all of the attributes to the <!DOCTYPE> declaration yourself. Is this really the only way to retrieve this information from the <iframe>'s HTML page source?
Here are some notable Stack Overflow posts that I have looked through and that this is not a duplicate of:
Javascript: Get current page CURRENT source
Get selected element's outer HTML
https://stackoverflow.com/questions/4612143/how-to-get-page-source-using-jquery
How do I get the entire page's HTML with jQuery?
Jquery: get all html source of a page but excluding some #ids
jQuery: Get HTML including the selector?
Here is some of my local test code that illustrates my best attempt so far, which only retrieves the data within and including the <iframe>'s <html> tag:
main.html
<html>
<head>
<title>Testing with iframe</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function test() {
var doc = document.getElementById('iframe-source').contentWindow.document;
var html = $('html', doc).clone().wrap('<p>').parent().html();
$('#output').val(html);
}
</script>
</head>
<body>
<textarea id="output"></textarea>
<iframe id="iframe-source" src="iframe.html" onload="javascript:test()"></iframe>
</body>
</html>
iframe.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html class="html-tag-class">
<head class="head-tag-class">
<title>iframe Testing</title>
</head>
<body class="body-tag-class">
<h2>Testing header tag</h2>
<p>This is <strong>very</strong> exciting</p>
</body>
</html>
And here is a screenshot of these files run together in Google Chrome version 27.0.1453.110 m:
Summary
As you can see, Google Chrome's Inspect element shows that within the <iframe> the <!DOCTYPE> declaration is present, so how can I retrieve this data with the page source? This question also applies to any other declarations or other tags that are not contained within the <html> tags.
Any help or advice on retrieving this full page source code via Javascript would be greatly appreciated.
Here is a way to build it from the doctype, seems to work for html 4 and 5, I didn't test for stuff like svg.
<html>
<head>
<title>Testing with iframe</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function test() {
var d = document.getElementById('iframe-source').contentWindow.document;
var t = d.docType;
$('#output').val(
"<!DOCTYPE "+t.name+
(t.publicId? (" PUBLIC "+JSON.stringify(t.publicId)+" ") : "")+
(t.systemId? JSON.stringify(t.systemId) :"")+
">\n" + d.documentElement.outerHTML );
}
</script>
</head>
<body>
<textarea id="output"></textarea>
<iframe id="iframe-source" src="iframe.html" onload="test()"></iframe>
</body>
</html>
this also uses HTML.outerHTML to make sure you get any attribs on the documentElement.

Why does appending a <script> to a dynamically created <iframe> seem to run the script in the parent page?

I'm attempting to create an <iframe> using JavaScript, then append a <script> element to that <iframe>, which I want to run in the context of the <iframe>d document.
Unfortunately, it seems I'm doing something wrong - my JavaScript appears to execute successfully, but the context of the <script> is the parent page, not the <iframe>d document. I also get a 301 Error in Firebug's "Net" tab when the browser requests iframe_test.js, though it then requests it again (not sure why?) successfully.
This is the code I'm using (live demo at http://onespot.wsj.com/static/iframe_test.html):
iframe_test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title><iframe> test</title>
</head>
<body>
<div id="bucket"></div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#bucket').append('<iframe id="test"></iframe>');
setTimeout(function() {
var iframe_body = $('#test').contents().find('body');
iframe_body.append('<scr' + 'ipt type="text/javascript" src="http://onespot.wsj.com/static/iframe_test.js"></scr' + 'ipt>');
}, 100);
});
</script>
</body>
</html>
iframe_test.js
$(function() {
var test = '<p>Shouldn\'t this be inside the <iframe>?</p>';
$('body').append(test);
});
One thing that seems unusual is that the the code in iframe_test.js even works; I haven't loaded jQuery in the <iframe> itself, only in the parent document. That seems like a clue to me, but I can't figure out what it means.
Any ideas, suggestions, etc. would be much appreciated!
Had the same problem, took me hours to find the solution.
You just need to create the script's object using the iframe's document.
var myIframe = document.getElementById("myIframeId");
var script = myIframe.contentWindow.document.createElement("script");
script.type = "text/javascript";
script.src = src;
myIframe.contentWindow.document.body.appendChild(script);
Works like a charm!
I didn't find an answer to my original question, but I did find another approach that works even better (at least for my purposes).
This doesn't use jQuery on the parent page (which is actually a good thing, as I'd prefer not to load it there), but it does load jQuery in the <iframe> in an apparently completely valid and usable way. All I'm doing is writing over the <iframe>'s document object with a new one created from scratch. This allows me to simply include a <script> element in a string which I then write to the <iframe>'s document object.
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>frame</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript">
// create a new <iframe> element
var iframe = document.createElement('iframe');
// append the new element to the <div id="bucket"></div>
var bucket = document.getElementById('test');
bucket.appendChild(iframe);
// create a string to use as a new document object
var val = '<scr' + 'ipt type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></scr' + 'ipt>';
val += '<scr' + 'ipt type="text/javascript"> $(function() { $("body").append("<h1>It works!</h1>"); }); </scr' + 'ipt>';
// get a handle on the <iframe>d document (in a cross-browser way)
var doc = iframe.contentWindow || iframe.contentDocument;
if (doc.document) {
doc = doc.document;
}
// open, write content to, and close the document
doc.open();
doc.write(val);
doc.close();
</script>
</body>
</html>
I hope this helps someone down the road!
The answer to the original question is simple - the execution of the script is done by jquery, and since jquery is loaded in the top frame, this is where the script runs too, no matter where you are appending it. A smarter implementation of jquery can no doubt be made to use the correct window object, but for now things are how they are.
As to the workarounds, you already have two good answers (even if one is your own). What I might add is that you can use one of those workarounds to include jquery.js in the iframe, and then get that jquery object instead of the top one to insert your additional markup... but that may very well be overkill too.

Categories