IE 8 Support Seems to cause Security Exceptions

[neosavvy]

Hey there, I have had some great luck with this directive and want to try to work through an IE8 issue I am noticing. Maybe you already have dealt with this.

I am trying to use it in this form:

                        <form action="{{ '/1.0/on_boarding/company/' + organization.company_id}}" ng-upload="completed(content)">
                            <div class="upload-input">
                              <input type="file" name="company_logo" onchange="angular.element(this).scope().fileNameChanged()"></input>
                              <input type="text" name="input" value="logo"></input>
                            </div>
                            <div class="upload-button">
                              <a id="uploadButton" upload-submit class="button" ng-class="$isUploading ? 'disabled' : ''">Upload</a>
                            </div>
                        </form>

This appears to work in Chrome and Firefox. However the following code in ng-upload is having a bit of trouble getting the inner contents of the iframe:

function uploadEnd() {
          // unbind load after uploadEnd to prevent another load triggering uploadEnd
          iframe.unbind('load');
          if (!scope.$$phase) {
            scope.$apply(function() {
              setLoadingState(false);
            });
          } else {
            setLoadingState(false);
          }
          // Get iframe body contents
          var bodyContent = (iframe[0].contentDocument ||
            iframe[0].contentWindow.document).body;
          var content;
          try {
            content = angular.fromJson(bodyContent.innerText || bodyContent.textContent);
          } catch (e) {
            // Fall back to html if json parse failed
            content = bodyContent.innerHTML;
            $log.warn('Response is not valid JSON');
          }
          // if outside a digest cycle, execute the upload response function in the active scope
          // else execute the upload response function in the current digest
          if (!scope.$$phase) {
             scope.$apply(function () {
                 fn(scope, { content: content});
             });
          } else {
            fn(scope, { content: content});
          }
        }

Specifically the

 var bodyContent = (iframe[0].contentDocument ||
            iframe[0].contentWindow.document).body;

Seems as though contentDocument and contentWindow.document are denying access for security reasons in IE8. I wish simply saying IE8 can die would be valid, but in this case I need to make it work. If you guys know of any work around I appreciate it.

I am happy to help dig in here too to fix it as this seems to be a great plugin for uploading.

[neosavvy]

So I had some luck today but still haven't nailed down a solution.

This code:

var iframe = angular.element(
          '<iframe name="upload-iframe-' + iframeID + '" ' +
          'border="0" width="0" height="0" ' +
          'style="width:0px;height:0px;border:none;display:none">'
        );

Appears to cause an IE8 Security violation so I attempted to set the src attribute of the iframe to an empty html file and then perform my upload.

Code looks like this

var iframe = angular.element(
          '<iframe name="upload-iframe-' + iframeID + '" ' +
          'border="0" width="0" height="0" ' +
          'src="/path/to/empty.html" ' +
          'style="width:0px;height:0px;border:none;display:none">'
        );

This seemed to work on one IE8 browser in a VM however after updating IE it broke. I am going to try with some of the IE browser vm's from moder.ie and report back.

I plan to add a new options variable if this works to externalize the src variable in case someone else wants to override it.

[twilson63]

Hey Adam,

Sounds Good, I will try to help out this weekend.

Thanks

Tom

On Thu, Feb 20, 2014 at 3:25 PM, Adam Parrish notifications@github.comwrote:

So I had some luck today but still haven't nailed down a solution.

This code:

var iframe = angular.element(
'<iframe name="upload-iframe-' + iframeID + '" ' +
'border="0" width="0" height="0" ' +
'style="width:0px;height:0px;border:none;display:none">'
);

Appears to cause an IE8 Security violation so I attempted to set the src
attribute of the iframe to an empty html file and then perform my upload.

Code looks like this

var iframe = angular.element(
'<iframe name="upload-iframe-' + iframeID + '" ' +
'border="0" width="0" height="0" ' +
'src="/path/to/empty.html" ' +
'style="width:0px;height:0px;border:none;display:none">'
);

This seemed to work on one IE8 browser in a VM however after updating IE
it broke. I am going to try with some of the IE browser vm's from moder.ieand report back.

I plan to add a new options variable if this works to externalize the src
variable in case someone else wants to override it.

Reply to this email directly or view it on GitHubhttps://github.com//issues/101#issuecomment-35664874
.

Tom Wilson
Jack Russell Software Company Division of CareKinesis
494 Wando Park Blvd
Mount Pleasant, SC 29464
Phone: 843-606-6484
Mobile: 843-469-5856
Email: tom@jackhq.com
Web: http://www.jackhq.com
Calendar:
http://www.google.com/calendar/embed?src=tom%40jackrussellsoftware.com&ctz=America/New_Yorkhttp://www.jackhq.com/calendar

This e-mail may contain information that is confidential, privileged or
otherwise protected from disclosure by the Health Insurance Portability and
Accountability Act (HIPAA) and other state and federal laws. This
information is intended only for the individual names above. Any review,
use disclosure or dissemination of this material is strictly prohibited.
If you receive this information in error, please notify CareKinesis
immediately at 888-974-2763 and delete the original at once.

[neosavvy]

Thanks man - I am going to keep hacking on it a bit to see if I can recommend something that works reliably.

[SpoBo]

any updates on this? does it work properly on IE8?

[jmwolfe]

Very interested in this issue.. we are experiencing the same issue with IE9 and it is a severe pain point. Enough that its tempting to use an entirely different module to handle file uploads. Looking forward to a fix!

[twilson63]

@jmwolfe any ideas on how to reproduce would be helpful, I have tested all the scenarios on examples/nodejs using SauceLabs w/ ie 8 and each Example works fine. Not sure how to reproduce :(

[alonsodiaz82]

I have a similar problem with the upload but related to Chrome. Some files seem to (above 10 Kb) timeout the script and hang the Chrome (v.35) tab. Chrome complains but succeds in the long run (worst almost 2 min. before answer).

Its not the Back-End that returns regular JSON because I've tested that extensivly. I came to the same conclusion that it is:

var bodyContent = (iframe[0].contentDocument ||
            iframe[0].contentWindow.document).body;

If anyone has an answer or another IE8 friendly Angular solution for uploading file/files, would be appriciated.

[apturtia]

Hi,
We did face this kind of behavior with IE9, when the server returned error after failed file transfer. The file upload method would read the file, import the content and then return either HTTP response 200 or 500 if the content was not valid.

The problem occurred only with IE9 and only when uploading an invalid file. Currently we use workaround to send response 200 also for the error messages.

It seems to be linked to this issue: http://stackoverflow.com/questions/151362/access-is-denied-error-on-accessing-iframe-document-object

"So it turns out, that if a response is sent with an error code, IE replaces the content of the iframe with an error message loaded from the disk (res://ieframe.dll/http_500.htm), and that causes the cross-domain access denied error."

[rovangju]

Experienced this in IE11 as well - forcing a 200 response code as sufficient to remedy the situation.

[tpoisson]

Hi there,

Try instructions from here : http://stackoverflow.com/questions/11544048/how-do-i-suppress-friendly-error-messages-in-internet-explorer

That did the trick for me.
IE actually prevents error HTTP responses with small content from being displayed, by replacing them with an internal dll "friendly" page.
The content length must be greater than 512 bytes

Enjoy !