I have 2 applications both hosted individually. Lets name them App A and App B.
In App A's iframe I am loading the url of App B to perform an action.(It is actually a form submit which contains file upload, but to not reload the page, I'm using an iframe to do that)
While the url is called and the action is performed in App B correctly, I'm unable to read the response in App A.
I'm getting the below JS Exception while reading the response.
Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "App A URL" from accessing a cross-origin frame.
When the URL is loaded in App A, it is received by a Servlet in App B. The action is performed in App B and response is returned. In App B, I have set the following -
response.setContentType("application/json");
response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Methods","POST,GET,OPTIONS,DELETE");
Even by setting Access-Control-Allow-Orgin to *, I'm unable to read the response.
How do I get the response in my iframe?
PS: I don't want to use any third party API.
Related
If I have an iFrame that's trying to launch a custom URL scheme (e.g. twitter://user?data=value), Chrome will throw an error in the console:
Failed to launch 'twitter://user?data=value' because the scheme does not have a registered handler
I need to access that URL, without taking any actions (like launching Twitter, for example). If the console is displaying this error information, that must mean the client has access to the URL and data.
Is there a way to intercept these errors and deal with the URL myself?
Is it possible to replace the origin of the URL without reloading the page? Say I am at www.example.com, how can I change the URL to be www.foo.com or whatever without reloading the page? I tried using pushState() and replaceState() to no avail. I get an error saying: Failed to execute 'pushState' on 'History': A history state object with URL 'foo.com:4041' cannot be created in a document with origin 'http://example.com:4041' and URL 'http://foo.com:4041/'.
For your information. the two URLS are ones which I generated with my /etc/hosts file, they simply pass to an express server at localhost:4041.
Thanks
I have an HTML and an iframe inside it. when I try to access iframe contents it shows error like this.
" Uncaught DOMException: Blocked a frame with origin "http://parattapayyan.surge.sh" from accessing a cross-origin frame.
at http://parattapayyan.surge.sh/test.html:14:24
(anonymous) # test.html:14 "
how some chat companies like "intercom" and etc, accessing iframe from external server and components inside iframe..?
When Site A tries to fetch content from Site B in a frame, by default, Site B's pages are not accessible due to security reasons(Read this :: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy); But using the Access-Control-Allow-Origin header site B can give cross-origin access to specific requesting origins.
Site B can serve its pages to Site A with the following response header:
Access-Control-Allow-Origin: http://www.siteA.com
Without site B doing this, you won’t be able to access site A in a frame.
I have a upload script in another host and after remote file upload with Ajax I call a function like this :
echo '<script language="javascript" type="text/javascript">window.top.window.stopUpload('.$result.' , \'res2\' , uploaded , dkey);</script>';
the stopUpload function in the main page should run and do some thing (show pictures and ...)
but I get Permission denied error
Error: Permission denied to access property "stopUpload"
tip : Imagine I have stopUpload function in pageA and I call send file with ajax to upload in my another Host page called pageB I have a stopUpload function in pageB which should run on pageA after upload complete but face to above error ...
Can I call javascript function in another page remotely?
Thanks.
You are probably violating Same Origin Policy.
An Iframe can access parent window content only if they both belong to same origin.
An origin consists of Protocol (http/https), domain name(example.com and port(default 80). If any of these are different then sites are considered from different origins. If you are able to modify content of both the sites then you can manually set the document.domain=domain.com. After that you won't get the error.
#Edit
Both the sites should at least have super domain in common for manual domain setting to work.
For example, facebook.com and google.com can never be compatible since their super domains are different.
However docs.google.com and developer.google.com can be compatible as they have super domain google.com in common.
They both would have to declare document.domain=google.com in a script tag.
I am using an iframe for a pseudo-ajax file upload. The iframe is in the same view as the upload javascript:
<iframe id="upload_iframe" name="upload_iframe" style="position: absolute; left: -999em; top: -999em;"></iframe>
his works 'nicely' on my local machine, but when I deploy to an Azure web site, I get the following error in Chrome's debug console:
Uncaught SecurityError: Failed to read the 'contentDocument' property
from 'HTMLIFrameElement': Blocked a frame with origin
"https://acme.azurewebsites.net" from accessing a frame with origin
"null". The frame requesting access has a protocol of "https", the
frame being accessed has a protocol of "data". Protocols must match.
I understand this iframe to be same-origin, as it is strictly local, but how do I convince the browser that it is local? That is, is there something I should be doing to the origin and protocol of my iframe to avoid this error?
This is my code, in a nutshell:
dataAccess.submitAjaxPostFileRequest = function (completeFunction) {
$("#userProfileForm").get(0).setAttribute("action", $.acme.resource.links.editProfilePictureUrl);
var hasUploaded = false;
function uploadImageComplete() {
if (hasUploaded === true) {
return;
}
var responseObject = JSON.parse($("#upload_iframe").contents().find("pre")[0].innerText);
completeFunction(responseObject);
hasUploaded = true;
}
$("#upload_iframe").load(function() {
uploadImageComplete();
});
$("#userProfileForm")[0].submit();
};
The form userProfileForm has its target property set to the iframe. This upload arrangement seems to work for most requests, and I don't know if the 'uncaught exception' message is just an observation on Chrome's part, or a potential show stopper. Is there not perhaps a way I can 'catch and ignore' such an exception, and just display a generic message if this happens?
This may depend on your browser, but the IFRAME element is generally not supported for the data protocol, see Wikipedia entry:
http://en.wikipedia.org/wiki/Data_URI_scheme
It may have worked on localhost because localhost can use different authentication & authorization methods (for example on Windows it may run as a trusted site, and may pass your windows user credentials to server automatically, etc.). Same origin I believe means protocol, host, and port must all match. Since data protocol is different than https this is not same origin, hence the security error.
Usually the data protocol is only supported by these elements:
object (images only) (ie: not activeX controls)
img
input type=image
link
CSS declarations that accept a URL
Can you post more of your code and problem statement? There are multiple other ways to accomplish file uploads. For example, traditional POST method (single file), HTML5 method (multi files), or even using javascript to send a stream of bytes to a web service (I did this once in an ActiveX control that used TWAIN to scan documents on user's computer and then upload the scanned image to the website).