Chrome cross domain issue with hidden iframes

[meindert]

SmartClient Version: v8.3p_2013-09-21/Pro Deployment (built 2013-09-21)

Chrome Version 30.0.1599.69 m

There is no stack trace in the developer console

I have a multi tab environment like the showcase and on one of the tabs I have a HTMLPane linked to a SSL site.

From yesterday (7 october 2013), I have been getting a silent error on another tab on which there is a file upload dynamic form.

I put a try/catch around the failing form.saveData call, and get the following error message:

form.saveData fail; (SecurityError) code: 18 stack: Error: 
Blocked a frame with origin "https://[application URL]" from accessing a frame with origin "https://[iframe URL]". Protocols, domains, and ports must match. 
at Object.isc.HiddenFrame.addMethods._draw (https://[application URL]/esosv2india/esos/sc/modules-debug/ISC_Core.js) at Object.isc.HiddenFrame.addMethods.draw (https://[application URL]/esosv2india/esos/sc/modules-debug/ISC_Core.js?build=20131008:23905:14) at Object.isc.RPCManager.addClassMethods._sendQueue (https://[application URL]/esosv2india/esos/sc/modules-debug/ISC_DataBinding.js?build=20131008:32287:23) at Object.isc.RPCManager.addClassMethods.sendQueue (https://[application URL]/esosv2india/esos/sc/modules-debug/ISC_DataBinding.js?build=20131008:32057:26) at Object.isc.RPCManager.addClassMethods.sendNoQueue (https://[application URL]/esosv2india/esos/sc/modules-debug/ISC_DataBinding.js?build=20131008:31231:31) at Object.isc.RPCManager.addClassMethods.sendRequest (https://[application URL]/esosv2india/esos/sc/modules-debug/ISC_DataBinding.js?build=20131008:31116:25) at Object.isc.DataSource.addMethods.performSCServerOperation (https://[application URL]/esosv2india/esos/sc/modules-debug/ISC_DataBinding.js?build=20131008:45258:35) at Object.isc.DataSource.addMethods.sendDSRequest (https://[application URL]/esosv2india/esos/sc/modules-debug/ISC_DataBinding.js?build=20131008:16485:29) at Object.isc.DataSource.addMethods.performDSOperation (https://[application URL]/esosv2india/esos/sc/modules-debug/ISC_DataBinding.js?build=20131008:16325:21) at Object.isc.EditorActionMethods.addInterfaceMethods.saveEditorValues (https://[application URL]/esosv2india/esos/sc/modules-debug/ISC_DataBinding.js?build=20131008:42408:27) INDEX_SIZE_ERR: 1 DOMSTRING_SIZE_ERR: 2 HIERARCHY_REQUEST_ERR: 3 WRONG_DOCUMENT_ERR: 4 INVALID_CHARACTER_ERR: 5 NO_DATA_ALLOWED_ERR: 6 NO_MODIFICATION_ALLOWED_ERR: 7 NOT_FOUND_ERR: 8 NOT_SUPPORTED_ERR: 9 INUSE_ATTRIBUTE_ERR: 10 INVALID_STATE_ERR: 11 SYNTAX_ERR: 12 INVALID_MODIFICATION_ERR: 13 NAMESPACE_ERR: 14 INVALID_ACCESS_ERR: 15 VALIDATION_ERR: 16 TYPE_MISMATCH_ERR: 17 SECURITY_ERR: 18 NETWORK_ERR: 19 ABORT_ERR: 20 URL_MISMATCH_ERR: 21 QUOTA_EXCEEDED_ERR: 22 TIMEOUT_ERR: 23 INVALID_NODE_TYPE_ERR: 24 DATA_CLONE_ERR: 25: Blocked a frame with origin "https://[application URL]" from accessing a frame with origin "https://[iframe URL]". Protocols, domains, and ports must match.

Why would the form try to access my iframe? Why would this only be a issue when the iframe is linked to a SSL site?
Why is this only a issue in chrome (and I think safari to)

The following code in ISC_Core.js is the cause of this issue:

if (this._windowHandle == null) {
    for (var i = 0; i < window.frames.length; i++) {
        var _wh = window.frames[i];
        if (_wh.name == this.getName()) {
            this._windowHandle = _wh;
            break;
        }
    }
}

the methode _wh.name is not allowed on a SSL frame, and returns:

SecurityError: Blocked a frame with origin "https://127.0.0.1:8888" from accessing a frame with origin "https://[the page on hte iframe]". Protocols, domains, and ports must match.

I've 'fixed' it by walking through the frames on the window in a reversed order, thereby finding the frame I'm looking for first time

if (this._windowHandle == null) {
    for (var i = window.frames.length-1; i >= 0; i--) {
        var _wh = window.frames[i];
        if (_wh.name == this.getName()) {
            this._windowHandle = _wh;
            break;
        }
    }
}

[Isomorphic]

We don't really have a speculation as to the cause here, and we've never seen something similar.

The obvious question is: what changed yesterday?

[angus]

How can we get paid telephonic support? This is a critical issue for us now.

The code base using SmartGWT has not changed but Chrome has updated.

[angus]

I have downloaded a previous version of google chrome (link below) and the upload works fine.

http://www.oldapps.com/google_chrome...d_chrome=13039

[meindert]

bug in smart client

Have posted the issue in the smart client forum

http://forums.smartclient.com/showth...934#post110934

[Isomorphic]

Hello,
We've fixed it - please pick up the next nightly, 3.1 or 4.0 build (dated Oct 17 or above) to get this fix.

Regards
Isomorphic Software

[paibanez]

Hi!

I am having the same issue since March 2014. It seems to be the bug again.

I am using:

Chrome 34.0.1847.116 m
Smartgwt Power 3.1p Nightly Build from 03/04/2014

On Firefox and Internet Explorer I have no problem.

I have the following scenario:

I have a Tabset with different tabs. On one tab I have a Dynamic Form with different fields and one of them is a FileItem field.

I have an IButton and when I click it I use the savedata method of the form to save the record. On Firefox and IE it works perfectly, and the record is saved, but in Chrome it hangs the browser and it shows the following exception:

"blocked a frame with origin from accessing a cross-origin frame"

I also have some htmlflows with social plugins widgets divs from facebook. Maybe this could cause the problem.

This problem started 3 weeks ago on Chrome and it has became a very big problem because the savedata method does not work and I can not save any record.

I have been trying to solve it with no success. It seems to be a Chrome update that is having the problem.

Thanks a lot and I am looking forward your news.

Best,

Pablo

[Isomorphic]

In order to look into this new issue, we would need a standalone test case replicating the problem.

[paibanez]

Hi Isomorphic,

Thanks for your answer.

I am trying to reproduce the problem on a standalone project but I can not reproduce it.

On the real project, I use HTMLPanels and HTMLFlows integrating Facebook, Twitter and youtube Widgets. I have tried different combinations but I can not reproduce the problem.

I have found this topic on Stack Overflow which shows the same problem:

http://stackoverflow.com/questions/21859455/posting-a-form-to-an-iframe-blocked-frame-with-origin-error-on-chrome-windows-8

It seems to be a problem with the iframe of the fileitem which does not have a src value (null) so it has problems with Chrome CORS Policy.

I hope you could help me!

Tell me if you need any other feeback.

Thanks a lot and I am looking forward your news.

Best,

Pablo

[Isomorphic]

Sorry, that doesn't really help. We have no idea whether the error message you're receiving is even related to HTML SmartGWT generates.

So we still need a test case that reproduces the issue.

[paibanez]

Hi Isomorphic,

I am trying to build a test case but it is very difficult because the real project is very big and there are lots of variables (Facebook, youtube, twitter widgets, tabsets,...)

I think I am narrowing the problem.

As I told you it just appears on new versions of chrome and it says it is a security error. I attach you a screenshot of the exception thrown by the form.saveData() method. I just can view this exception message on development mode but the problem appears on both development and compiled version.

As I have read on Internet, I think the Server framework uses an Iframe for the upload of the fileitem, and it seems that the target of the form is experiencing a cross domain problem. But just new versions of Chrome block it.

I don't know how the fileitem manage the ajax upload of the file but maybe you can tell me where is the problem or if you can bypass this new chrome policy.

Two months ago, this form worked perfectly.

I hope you could help me.

Thanks a lot!

Pablo