IE 8 iFrame causes JavaScript errors on first load only - javascript

I use an iframe on my page, which consists of a form with input elements.
Every input element has an onblur() event, which validates the input.
When I open the page in IE 8 with a freshly cleared cache it produces a javascript error like this.
document.getElementById(...)' is Null or not an Object
However, when I inspect the form it is loaded completely and the I'm trying to access is rendered.
Furthermore when i reload the whole page I don't get any errors anymore.
Also when I load the content of the iframe on its own I also don't get errors.
Firefox and Chrome dont throw errors at all.
In short, the Javascript errors I get only occur in IE and only when I use an iframe to display the form (which is mandatory) and only when the page is loaded for the first time.
Any ideas on how I can fix this?
I hope its not too confusing to read.
Edit:
document.getElementById("vHint_"+fieldName).innerHTML=data;
FieldName is the id of the input field. Data is the return value of the validation.
In this case data is an image tag.
After every input field is a span Tag with the id "vHint_"+fieldName.
The event is attached like this:
<input id="Jahr" class="input" type="text" onblur="validDate(this,'Jahr','_beginn')" maxlength="4" style="width:32px" value="" name="Jahr">

First of all thank you for your effort.
The example user13500 provided worked like a charm.
And it made me dig deeper.
And i found the solution.
All input fields are created with a self made ASP Framework, which puts them all in the Session.
The onblur() event of the input field within the iframe triggers an AJAX Request to an ASP file passing the name of the input field as a request parameter. The ASP file now tries to find the field in the Session and retrieve its value to validate the input.
After that the result is posted back to the javascript file, which then uses document.getElementById("vHint_"+fieldName).innerHTML=data; to post the result back in the page.
This normally works without erros.
But, since the application is run in an iframe and the domains of the surrounding page and the application in the iframe are different, IE rejects the Session of the iframe. Thus the result of the ASP validation is empty, because it couldn't find the field in the Session.
Having figured that out the only thing that has to be done is to add this line of code in the application:
Response.AddHeader "P3P", "CP=""CAO PSA OUR"""
This way IE doesn't reject the Session of the application anymore.
Maybe this can be useful for others too.

Related

Filling out a form contained in an iframe using Javascript

I need to make a chrome extension that fills out a form on a specific website automatically with some data a user has provided.
I've tried selecting the form elements by ID, class names and such but I'm always getting a null result (even though I can successfully select them from the browser console after the page has loaded). To what I've read online it seems I can't access those elements with my content script because of security reasons.
Does anyone have an idea for how I can bypass this problem?

Browser back & forward and form autocomplete mess

On our webapp the page contains a filter form with some field, a SEARCH button, which calls a jQuery AJAX, loads the items according to the filter form data. From javascript we pushes the form filter values to the url to maintain the browser history.
When we press the BACK button, the page "reloads", but we see that the form values do not refresh to the current values. Examining the page source, we see that the html contains the textbox element with the proper value attribute (from the url values), but the textbox still displays the last value of the form. Sometimes. Sometimes it works.
We added the autocomplete="off" to the form values, which helps a little, "sometimes" went to "usually", the displayed values usually matches the html sources. But not always. We think that the browser cache is the bad guy - when we press the back or forward button sometimes the page does not refresh, but comes from "somewhere".
We added a web config cache setting:
<caching>
<outputCacheSettings>
<outputCacheProfiles>
<add name="CacheProfileNone" noStore="true" varyByParam="*" duration="0" />
</outputCacheProfiles>
</outputCacheSettings>
</caching>
and added the attribute to the controller action
[OutputCache(CacheProfile = "CacheProfileNone")]
public ActionResult Index(QueryViewModel model)
{...}
but it didn't help. :( Sometimes when we press the back button wrong form values are displayed, not matching with the html values. The form values are not manipulated with custom javascript functions. We added onchange event with console.log output, and sees no log messages, so we think the form element display value does not depend on our decisions or code, but (we think) it depends on the browser things.
We are open new suggestions what to do next, to get the browser to always load the page and displays the current value as it is defined in the html source.
Any suggestions are welcome! Thanks!
I'm guessing (because you provided no code), but this doesn't work the way you think:
From javascript we pushes the form filter values to the url to
maintain the browser history.
You need to investigate the History API replaceState() method.
Reference here:
https://developer.mozilla.org/en-US/docs/Web/API/History_API

How to prevent script injection that was pasted to input

Recently I've met the XSS problem. I've searched and read a lot of related questions and articles. I've noticed that all answers are focused on how to prevent untrusted data to be passed to server. And in front-end, escape special codes seems the only way to prevent scripts execute.
But what if a user just input a piece of code(such as <script>alert("hi");</script>) to an input, when will this code executes? And is there a way to prevent it?
I've listened the keydown keyup event, but this can only prevent normal input, it has no effort when user copy and paste directly into input, it'll show my warning message when user input a piece of script, but the script still executed!
$("input").on("keyup", function (e) {
var value = $(this).val() || "";
var regex = /<(\/?\w+[^\n>]*\/?)>/ig;
if(regex.test(value)){
layer.msg("Invalid characters!");
$(this).val(value.replace(regex, "<$1>"));
e.preventDefault();
return false;
}
});
I don't understand why the script in an input's value is executed by browser, and when it is executed ? Is there any articles that can explain this mechanism or is related ? Did I have something unnoticed ?
If there any articles that you think will help, please let me know.
Thanks.
Thanks for all the answers and comments. Maybe I didn't describe it clear. I've test that when I copied <script>alert("hi");</script> and paste it into an input, the browser did prompt an alert window and showed the "hi".
I've also just use $("input").val('<script>alert("hi");</script>'), it won't prompt alert window, but if I trigger the input's focus and blur event, it will prompt the alert window too.
So, why the codes are executed ?
Say my user name was <script>alert('You got pranked!')</script> and your app isn't protected against XSS.
When registering, the app will save my user name as is, and there's nothing wrong with that.
But, when I go to my profile page (or any page that will display my name), the HTML rendered by the server will look like that
<h1>Profile page</h1>
<p>User name: <script>alert('You got pranked!')</script></p>
The client browser will see a <script> tag and will execute what is inside.
The easiest solution to counter that is to escape any HTML-special characters. No matter what tech stack you have, there are lots of tools that will do that for you.
But the way all these tools work, is that when displaying my user name, it will be shown as <script>alert('You got pranked!')</script>, thus preventing the browser from seeing a <script> tag when displaying my user name.
The value or contents of form fields are not executed by browsers, nor are they parsed as HTML unless you treat them as HTML.
You can paste anything you like into an input field, and submit it to a server. Pasting <script>alert("hi");</script> into an input is fine, and that text will be used as the value of the input field when the form data is submitted to the server.
The problem of XSS comes when a site uses previously submitted data and squirts it into the HTML of a response (as described in RichouHunter's answer)
An example of treating the input field as HTML without going to the server:
// Assuming jQuery:
$('div').html($('input').val());

Fields not clear after initial post to page

I am using a template site from Webmatrix 3.0 that includes a sign in page (among other pages) working primarily with c#, razor, html, and jquery. I have created a new page where users can register that includes a password field, as well as other text fields. My issue is, even when I simply have two fields on the cshtml page and nothing else, these fields are filled with data during an initial page request. This data is old "remember me" data from a previous sign in.
I can either do a get request from another page's form to land on this page, or navigate here from a href link, and the result is the same. To try to find the issue, I even cut almost all the code from the page leaving simply this:
<input type="text" />
<input type="password" />
And both fields are populated when I make an initial page request. I have tried to use things like
value = " something like blank or a single space in here "
etc in the html, as well as trying to clear out the fields to no avail with javascript (which I prefer not to since I have had very spotty success with things like onload). Is there a fairly sure fire way to clear text and password fields for initial page requests? Edit - I have tried autocomplete=off to no avail as well.

javascript form submitting to wrong target second time

I have a form I am submitting with form.submit() to a hidden iframe. I then take the result and process the data.
If the result fails (validation errors) then I display an error in a div tag.
The problem I have is that if you press the submit button again the form submits to a new tab.
I tried form.reset(); // just resets the form.
I have tried resetting the target of the form to the hidden iframe again but that doesn't seem to work either.
I tried this a long time back.
The trick was to set the target of the form to hidden iframe using html and not JS. What I mean is, you should do:
formContainer.html("<form target='iframe_name' .... />");
However,
get_form_by_id.setAttribute("target","iframe_name")
didn't provide the desired result.
(There shouldn't be a reason for it, however speaking from experience, I faced this issue when designing an IE compatible website and this was the solution that worked).

Categories

Resources