cross-scripting issue: use javascript/DOM on iframe loaded from differentdomain, how?

[Mike S]

I have a page that contains an iframe which loads a page from a
different domain that I do not control. The iframe includes the
following select:

<select name="promo">
<OPTION value="NONE" selected>NONE</OPTION>
<OPTION value="AAA">AAA</OPTION>
</select>

I would like to be able to select AAA using javascript on the parent
page. I can work with the people who maintain the site that hosts the
page loaded into the iframe, so I'm wondering if there is some way that
they cold modify their page that would allow me to execute javascript on
it from my parent page? Would including window.domain="mydomain.ext" in
the iframe page, where mydomain.ext is the domain hosting the parent
page, allow me to access the iframe DOM with javascript?

TIA,
Mike

 

[Evertjan.]

Mike S wrote on 20 dec 2011 in comp.lang.javascript:

I have a page that contains an iframe which loads a page from a
different domain that I do not control. The iframe includes the
following select:

<select name="promo">
<OPTION value="NONE" selected>NONE</OPTION>
<OPTION value="AAA">AAA</OPTION>
</select>

I would like to be able to select AAA using javascript on the parent
page. I can work with the people who maintain the site that hosts the
page loaded into the iframe, so I'm wondering if there is some way that
they cold modify their page that would allow me to execute javascript on
it from my parent page? Would including window.domain="mydomain.ext" in
the iframe page, where mydomain.ext is the domain hosting the parent
page, allow me to access the iframe DOM with javascript?

Cross domain access is disallowed in modern browsers.

Use serverside scripting to access such page's html-source.

 

[Arno Welzel]

Mike S, 2011-12-20 02:44:

I have a page that contains an iframe which loads a page from a
different domain that I do not control. The iframe includes the
following select:

<select name="promo">
<OPTION value="NONE" selected>NONE</OPTION>
<OPTION value="AAA">AAA</OPTION>
</select>

I would like to be able to select AAA using javascript on the parent
page. I can work with the people who maintain the site that hosts the
page loaded into the iframe, so I'm wondering if there is some way that
they cold modify their page that would allow me to execute javascript on
it from my parent page? Would including window.domain="mydomain.ext" in
the iframe page, where mydomain.ext is the domain hosting the parent
page, allow me to access the iframe DOM with javascript?

No - because the same origin policy will always apply and forbid cross
domain script access (and if not, this would be a security flaw!).

One solution: Do not load the page directly from the remote server but
with a script within your own domain (e.g. using PHP with cUrl).

 

[Bart Van der Donck]

I have a page that contains an iframe which loads a page from a
different domain that I do not control. The iframe includes the
following select:

<select name="promo">
   <OPTION value="NONE" selected>NONE</OPTION>
   <OPTION value="AAA">AAA</OPTION>
</select>

I would like to be able to select AAA using javascript on the parent
page. I can work with the people who maintain the site that hosts the
page loaded into the iframe, so I'm wondering if there is some way that
they cold modify their page that would allow me to execute javascript on
it from my parent page? Would including window.domain="mydomain.ext" in
the iframe page, where mydomain.ext is the domain hosting the parent
page, allow me to access the iframe DOM with javascript?

One possible approach is to request the iframe with a parameter, like
e.g.

<iframe src="http://domain.com/page.html?E58J"></iframe>

Then page.html reads out the parameter, and selects the desired
option:

<form name="selectform" method="get" action="#">
<select size="1" name="promo">
<option value="NONE" selected>NONE</OPTION>
<option value="AAA">AAA</OPTION>
</select>
</form>
<script type="text/javascript">
if (location.search.substring(1) == 'E58J')
document.selectform.promo.selectedIndex = 1;
</script>

Hope this helps,

 

[Thomas 'PointedEars' Lahn]

I have a page that contains an iframe which loads a page from a
different domain that I do not control. The iframe includes the
following select:

<select name="promo">
<OPTION value="NONE" selected>NONE</OPTION>
<OPTION value="AAA">AAA</OPTION>
</select>

I would like to be able to select AAA using javascript on the parent
page. I can work with the people who maintain the site that hosts the
page loaded into the iframe, so I'm wondering if there is some way that
they cold modify their page that would allow me to execute javascript on
it from my parent page?

There is no "javascript" [1]. STFW for "Same Origin Policy".

Would including window.domain="mydomain.ext" in
the iframe page, where mydomain.ext is the domain hosting the parent
page, allow me to access the iframe DOM with javascript?

No. It would be `document.domain', and it would not work everywhere; in
particular in would not work if the second-level domain of your site was
completely different from the second-level domain of the target site [2].
It is also in another way unreliable: the `domain' attribute of the
HTMLDocument interface of W3C DOM Level 2 HTML that the object referred to
by `document' implements, is specified as read-only [3].


PointedEars
___________
[1] <http://PointedEars.de/es-matrix>
[2] <https://developer.mozilla.org/en/DOM/document.domain>
[3] <http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268>

 

[Martin Honnen]

I have a page that contains an iframe which loads a page from a
different domain that I do not control. The iframe includes the
following select:

<select name="promo">
<OPTION value="NONE" selected>NONE</OPTION>
<OPTION value="AAA">AAA</OPTION>
</select>

I would like to be able to select AAA using javascript on the parent
page. I can work with the people who maintain the site that hosts the
page loaded into the iframe, so I'm wondering if there is some way that
they cold modify their page that would allow me to execute javascript on
it from my parent page?

You can look into postMessage:
http://www.whatwg.org/specs/web-apps/current-work/multipage/web-messaging.html#web-messaging
https://developer.mozilla.org/en/DOM/window.postMessage

Drawback is that older IE versions (before IE 8 I think) do not support it.

 

[Thomas 'PointedEars' Lahn]

You can look into postMessage:
http://www.whatwg.org/specs/web-apps/current-work/multipage/web
messaging.html#web-messaging
https://developer.mozilla.org/en/DOM/window.postMessage

Drawback is that older IE versions (before IE 8 I think) do not support
it.

Not even IE 8 supports it completely:

<http://msdn.microsoft.com/en-us/library/cc197015(VS.85).aspx>


PointedEars

 

[Mike S]

Not even IE 8 supports it completely:
<http://msdn.microsoft.com/en-us/library/cc197015(VS.85).aspx>
PointedEars

Thanks very much to everyone who posted, I will ask the people who host
the page I'm loading into the Iframe to implement the code Bart
recommended.

 

[Thomas 'PointedEars' Lahn]

Thanks very much to everyone who posted, I will ask the people who host
the page I'm loading into the Iframe to implement the code Bart
recommended.

However, the proper code for that approach would be

<head>
…
<script type="text/javascript">// <![CDATA[ just in case it is XHTML
function selectItem(select)
{
if (/[?&]E58J([&#]|$)/.test(document.URL))
{
select.selectedIndex = 1;
}
}
// ]]></script>
</head>

<body onload="selectItem(document.forms['selectform'].elements['promo'])"
<form action="#" name="selectform">
<select size="1" name="promo">
<option value="" selected="selected">none/option>
<option value="AAA">AAA</option>
</select>
</form>
</body>

<http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html>

It would be even better if they did not use client-side scripting, but
server-side scripting to generate the form, and if they generated the
`selected' attribute specification on a different `option' element if the
parameter was detected in the document's URL.


PointedEars

 

[Mike S]

Thanks very much to everyone who posted, I will ask the people who host
the page I'm loading into the Iframe to implement the code Bart
recommended.

However, the proper code for that approach would be
<head>
<script type="text/javascript">//<![CDATA[ just in case it is XHTML
function selectItem(select) {
if (/[?&]E58J([&#]|$)/.test(document.URL)) {
select.selectedIndex = 1;
}
}
// ]]></script>
</head>
<body onload="selectItem(document.forms['selectform'].elements['promo'])"
<form action="#" name="selectform">
<select size="1" name="promo">
<option value="" selected="selected">none</option>
<option value="AAA">AAA</option>
</select>
</form>
</body>
<http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html>
It would be even better if they did not use client-side scripting, but
server-side scripting to generate the form, and if they generated the
`selected' attribute specification on a different `option' element if the
parameter was detected in the document's URL.
PointedEars

Nice approach, Thank you.

 

[Bart Van der Donck]

Mike S wrote:

However, the proper code for that approach would be

Perhaps not so proper, as...

function selectItem(select)

It is unwise to use 'select' as a variable name.

<body onload="selectItem(document.forms['selectform'].elements['promo'])"

Syntax error.

    <form action="#" name="selectform">
      <select size="1" name="promo">
        <option value="" selected="selected">none/option>

Syntax error.

        <option value="AAA">AAA</option>
      </select>

<option value="" selected> is more reliable than <option value=""
selected="selected"> inside a <select>.