iFrame is not displaying properly when updated by JS - javascript

For some weird reason, iFrame is not showing the right content when updated by JavaScript. It is the very same link, but with different results
https://jsfiddle.net/omarjuvera/qvbpcy9k/1/
HTML
Desired result
<br/>
<iframe src="//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=ow-20&marketplace=amazon&region=US&placement=B004BCXAM8&asins=B004BCXAM8&linkId=SK5UG2J5CK4WNOKE&show_border=true&link_opens_in_new_window=true"></iframe>
<br/><br/>
JavaScript update
<br/>
<iframe id=link src=""></iframe>
JS
document.getElementById("link").src = '//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=ow-20&marketplace=amazon&region=US&placement=B004BCXAM8&asins=B004BCXAM8&linkId=SK5UG2J5CK4WNOKE&show_border=true&link_opens_in_new_window=true';

For some reason your ampersands are & amp; just make them &. It seems like the static code fixed the problem for you internally but the javascript did not.
document.getElementById("link").src =
'//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=tf_til&ad_type=product_link&tracking_id=ow-20&marketplace=amazon&region=US&placement=B004BCXAM8&asins=B004BCXAM8&linkId=SK5UG2J5CK4WNOKE&show_border=true&link_opens_in_new_window=true'

Related

Creating HTML with intentional HTML Injection

I am a cybersecurity student trying to understand some basic HTML injections. I have been working on this code for a few days and can't understand what I am doing wrong. The code that I have currently does allow for injection, for example if I put <h1>test</h1> into the textbox, it will display test as a header. But if I try <script>alert(1)</script> it won't actually run the script. I have tried setting the value of the text box to "" or with the thought that I could close out that line by inputting the following into the textbox: "><script>alert(1)</script>
I've also tried to cancel out the remainder of the code by adding a comment to the end like this: <script>alert(1)</script><!--
I've tried a number of combinations of each with no luck. Now I actually need to be able to inject a script since I'm playing around with CSP and how that affects injection of scripts into the webpage. I currently DO NOT have a csp specified that would restrict the JavaScript from running. Some other things I've tried include using different browsers, changing browser security, and ensuring that JavaScript is enabled in the browser. Any help would be greatly appreciated!!
<html>
<script language='JavaScript'>
function getwords(){
textbox = document.getElementById('words');
label = document.getElementById('label');
label.innerHTML = textbox.value;
}
</script>
<body>
<input type="text" id="words">
<input type="button" onclick="getwords()" id="Button" value="Enter" />
<label id="label">
</label>
</body>
</html>
That's because <script>s run at page load, and, when the label's content change, the scripts have ran already.
However, if you inject <script> tags to a different page (through the backend (XSS means Cross-Site Scripting)), it does work.
Alternatively, to make it work in a scenario, where the content injected after page load (like your case), you can use JS events (like onclick) to run your code:
<div onclick="alert(1)">Click me!</div>
Or, to execute it without user interaction, you could use an <iframe>'s onload event:
<iframe onload="alert(1)" style="display:none"></iframe>
to execute javascript from your form, you can try:
<iframe src=javascript:alert(1)>
or
<img src=x onerror=alert(1)>
Also worth noting:
script elements inserted using innerHTML do not execute when they
are inserted.
To manually execute JavaScript, you may do the following
without editing your HTML file, add this to the Input field on your Browser.
<iframe onload="alert(1)" style="display:none"></iframe>
More information on why this works here
More on how you can perform actions like this here: developer.mozilla.org
<html>
<script language='JavaScript'>
function getwords(){
textbox = document.getElementById('words');
label = document.getElementById('label');
label.innerHTML = textbox.value;
}
</script>
<body>
<input type="text" id="words">
<input type="button" onclick="getwords()" id="Button" value="Enter" />
<label id="label">
</label>
</body>
</html>

Button onclick result: "'Function' is not defined" in HTML

I am using CodeSandbox to write up a localized access point for my social media (just to have fun with the Vanilla parcel pack they have). Now, I have my buttons calling separate functions, but when I select a button, the error "Function is not defined"
My functions for the buttons are stored in a separate file than the regular JavaScript.
I have looked on W3Schools to see how this is done. Several times I tried even putting the function within the HTML page itself to see if that helps; however, the error still appeared.
Below is an HTML example:
<button type="button" onclick="sShowFunction()">
Discord Status
</button>
<br />
<p id="dshow">Reveal Discord Status</p>
<script src="extras/buttons.js" type="text/javascript"></script>
This is the js function:
function sShowFunction() {
document.getElementById("dshow").innerHTML = `
<iframe src="https://discordapp.com/widget?id=<server id>&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
`;
}
I expect the output when I press the button to display the discord widget. Instead, I produce the aforementioned error. My best guess is that I am missing a piece of code to call the function.
In the console, I receive this error:
sShowFunction' is defined but never used. (no-unused-vars)
depend where you have declare the function .. could be is not accessible .. from the html level
be sure your js code is inside a valid scritpt tag
<script>
function sShowFunction() {
document.getElementById("dshow").innerHTML = '
<iframe src="https://discordapp.com/widget?id=<server id>&theme=dark"
width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
';
}
</script>
and don't use backtics for wrap string .. use quote
Why dont you put a class/id in the button and then use listener like this:
<button type="button" id="sShowFunction">
Discord Status
</button>
<br />
<p id="dshow">Reveal Discord Status</p>
<script>
document.getElementById("sShowFunction").onclick = function() {
document.getElementById("dshow").innerHTML = `
<iframe src="https://discordapp.com/widget?id=<server id>&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
`;
}
</script>
Also, you are maybe getting this error from inside the iframe.
Can't you post some photo of the error on developer console or provide more about your javascript?
See if chrome>console>network request for buttons.js is ok (not red) because code provided by you works in my local machine
So what we need to do is create a static template on codesandbox. For doing this, go to the settings option on the left sidebar and then click on create sandbox.config.json. Then on this, select under template -> static option as shown in the image below.
To save time, you can fork this one - https://codesandbox.io/s/static-vanilla-js-template-qzxfi
A detailed solution is mentioned on this Github issue - https://github.com/codesandbox/codesandbox-client/issues/1502#issuecomment-584886419

Can't click on the anchor inside a frame with href value as javascript using selenium

Can't click on the anchor inside a frame with href value as javascript using selenium.
#Note: I could manually click/ call the javascript from IE developer console all looks good. The issue is only through selenium .
Here is the page source like
<html>
<body>
<p>
<iframe name="iframe1" width="100" height="218" src="about:blank" frameborder="0" marginwidth="0" "marginheight="0" scrolling="yes">
<html>
<body>
<div class="className" id="DivName"onmouseover="startLinkHover(0,70)" onmouseout="stopLinkHover()">
<a name="link0" href="javascript:function()" shape=""> This is link 1 </a>
</div>
</body>
</html>
</iframe>
</p>
</body>
</html>
I am working with c# ,IE and selenium
Selenium.WebDriver.IEDriver" version="2.53.1.1"
Selenium.WebDriver" version="3.0.0"
Selenium.Support" version="3.0.0"
IE 11 ( As my web application only support IE)
Here is what i have tried:
As it the page is consisting of iframe
1) I am switching to iframe and find the anchor using the name and click
driver.SwitchTo().Frame(driver.FindElement(By.Name("iframe1"));
driver.FindElement(By.XPath("//a[#name='link0']")).click();
2) I have also tried to extract the href property into a string variable and tried to execute the javascript using Javascript executor.
driver.SwitchTo().Frame(driver.FindElement(By.Name("iframe1"));
var js=driver.FindElement(By.XPath("//a[#name='link0']")).GetAttribute("href");
var jsDriver = (IJavaScriptExecutor)driver;
jsDriver.ExecuteScript(js);
Please excuse if any typos as i don't want to post the html source here i have explained my issue with a sample.
Thank you
Finally i managed to resolve this issue by reloading the project from source control after pointing the .net framework target version to 4.5 instead of 4.52 (not sure why would this be?).
after investigations , it was proved that issue was not with selenium clicking on the element but the execution of java script after that with page loads.

window.print not working tried all methods in all major browsers

I am trying to print a page with window.print but it ain't working in all the browsers.
This is the code that i am using:
<div class="user_buttons">
<!--Test 1-->
<IMG SRC="images/print.png" BORDER="0"
<!--Test 2-->
<FORM>
<INPUT TYPE="button" onClick="window.print()">
</FORM>
<!--Test 3-->
<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form><input type=button name=print value="Print" onClick="window.print()"></form>');
}
</script>
<!--Test 4-->
<img src="images/print.png" onclick="window.print()">
<div><img src="images/overzicht.png" title="Terug naar overzicht"></div>
</div>
As you can see i am trying multiple solutions given by the internet. What is frustrating is that those codes are working on the demo sites but they aren't on my page. I post my code in JSF. The JSF example will not be a working example but it will have the entire code in the javascript area. The link for the entire code is here: http://jsfiddle.net/7bRNu/
I finally got it. It was a very painfull process of searching errors in a huge mess of code. The next time you ask a question on stackoverflow, please make sure that you broke the problem down into smaller pieces and post only the code that you think is probably the cause of your problem.
In the very bottom of your entire code, there is a little script-section in which it says:
var print = document.getElementById("print").value;
You are in the global scope, meaning that every variable you declare will be a property of window. Therefore, by writing print = you actually redefine window.print. Change the name of this variable and you should be good. The following line is only an example. You can choose whatever variable name you like. Just don't use print.
var printValue = document.getElementById("print").value;
Here is one method isolated:
http://jsfiddle.net/5PumN/
<IMG SRC="images/print.png" BORDER="0"
It works just fine here.

Javascript lastChild call returns sibling, when using empty element tags

I have the following piece of Javascript:
//Clear out container
var container = document.getElementById("buy");
while (container.lastChild)
{
container.removeChild(container.lastChild);
}
and further down, the piece of HTML on which it operates:
<div id="buy" class="itemGroup" />
<canvas id="drawArea" width="200" height="200">
Your browser does not support HTML5 Canvas.
</canvas>
However, the Javascript code removes the canvas, unless the buy div uses start and end tags i.e.
<div id="buy" class="itemGroup">
</div>
Why is this? I thought the two, from an XML point of view, are equivalent? Using Chrome 29.0.1547.76 m on Windows 7.
Thanks in advance!
This is not a more complete answer than the comments already given per se, but I just can't add a comment to your post. Anyway, there are some tags which are not self closing and 'div' is one of them - which actually makes sense if you think about it. Semantically speaking, why are you making a 'division' if there's nothing in it?
Another tricky one is 'script'. Even if you are linking to an external script file in your page, you cannot use
<script type="text/javascript" src="example.js" />
this just doesn't work. Another one is 'textarea'. This renders any html after it useless!
<textarea cols="5" rows="5" />
Take a look at some other ones: http://xahlee.info/js/html5_non-closing_tag.html

Categories