Javascript variable assignment for popup results in "Permission denied" error in IE8
I've researched this problem exhaustively on stackoverflow as well as other sites. There are several posts regarding "permission denied" errors in Javascript and IE but none have proven to shed light on my particular problem.
I developed a site using PHP in 2009 for a client that helps them keep track of product inventory. One feature provided is the ability to create a new product and assign an image, which requires them to upload an image file. The ability for them to edit an existing product's image in the same manner also exists. This is done with a popup window opening whenever the user clicks on the "upload" button for the product's image. The parent window's code looks like this:
function openPopUp( thisForm )
{
var ProductId = thisForm.product_id.value;
var ProductName = thisForm.product_name.value;
var URL = "../imageupload/index.php?product_id=" + ProductId + "&product_name=" + ProductName;
var win = window.open ( URL, "imageUploadWindow", "location=0,status=1,scrollbars=1,width=700,height=600,resizeable=1,directories=0,toolbar=0");
win.targetField = thisForm.image;
win.focus();
}
Here is the openPopUp() function being called:
<form class="productForm" name="form" action="<?php $_SERVER['PHP_SELF'] ?>" method="POST">
...
<td class="maintable"><input type="text" name="image" readonly="readonly" size="20" />
<td class="maintable"><input type="button" value="Upload" name="imageButton" onclick="openPopUp(this.form)" />
...
</form>
The idea behind this was to have a readonly input of type text on the parent window that would take the value of a filename for an image. This filename would be passed back to the parent window by the popup window after the user successfully uploaded an image. The user would close the popup window and then press the "update" button in the parent window to submit the product's updates (including the image filename) to the database. For reference, this is the function in the popup window that passes the filename back to the parent:
function setImageFileName ( fileName )
{
var opener = window.opener;
if ( opener && !opener.closed && opener.setTargetField )
{
var fileNameShort = /([^\\]+)$/.exec(fileName)[1];
opener.setTargetField ( targetField, fileNameShort );
}
}
Here is the HTML in the popup window to handle selection of the filename and upload:
<form action="upload.php" method="post" enctype="multipart/form-data">
<p>
<label for="file">Select a new image file:</label> <input type="file" name="imagefile" id="file"> <br />
<button onClick="setImageFileName(this.form.imagefile.value)">Upload File</button>
</p>
</form>
This code functions perfectly in any browser aside from IE8. In fact, it previously worked in IE7 when I originally developed back in 2009. Now, only creating a new product actually works, although the HTML that gets echoed out by the PHP script called when the upload is performed does not appear in IE (more on that later). The main problem arises in IE when the user presses the "upload" button in the parent window when editing an existing product. IE's script console reflects a "Permission denied" error on the following line:
win.targetField = thisForm.image;
I've tried a bunch of things, including ensuring crossdomain problems are not a factor. The URLs being opened in the popup are obviously on the same domain. I've changed the security settings in IE to "allow cross domain access". Curiously, the "permission denied" problem only occurs when editing an existing product's image, although editing existing and creating a new product share the same Javascript despite being different PHP files.
Secondary to the "permission denied" problem is the fact that HTML echoed by the PHP performing the actual file upload does not appear in the popup. Here is that PHP for reference:
if ( move_uploaded_file ( $_FILES['imagefile']['tmp_name'], $realpath . $filename ) )
{
chmod ( $realpath . $filename, 0755 );
echo "Your file upload was successful. New product image:<br /><br />";
echo "<img src=\"" . $imagePath . $filename . "\" alt=\"New image file\" title=\"New image file\" border=\"0\" />";
echo "<p>Remember to click the Update button for this product on the main page to finish your changes.</p>";
echo "<a href=\"javascript: self.close()\">Close</a>";
}
Again, this functions properly in other browsers. When the user presses the "upload file" button in the popup, the above PHP gets executed on the popup window and appears as desired, but not in IE! The original HTML for the popup remains, giving the impression that no upload occurred, but it actually did. All of this originally worked in IE when it was first developed.
I know this is a long post and I'm probably overcomplicating things, but it's a befuddling problem for me. Hopefully it's something small that I just don't see. I appreciate any sugge开发者_开发技巧stions the community might have. Thanks in advance.
In IE8 Microsoft made many security changes, 1 of which you have encountered.
You are trying to get the field value of an <input type="file"/>
field and pass it to something else (in this case the opening window).
To help prevent XSS attacks and the exposure of private information changes were made to reflect the security measures that other browsers had. As a result you may find the following items are no longer allowed or severely restricted.
- Copying the filename value from the field is NOT allowed (comparing against an empty string should still work for validation purposes)
- Typing in the filename is no longer allowed, you'll need select a file from the file chooser (stops keyboard sniffing)
- On the server side, you may very likely only get the file name, not the full path (stops the exposure of semi-private info from getting into hackers hands (not sure what they would do with it, but alas, this is the new norm))
As a result, I think you are hitting item #1 above, and thus IE is essentially quitting out of your script.
精彩评论