Unable to use postMessage within cordova - javascript

In our cordova/phonegap-app we're using an iFrame to load external websites. To communicate with the iFrame-content I've created a script for both sites (App and Website) which uses iFrame.contentWindow.postMessage()-method. The reason is to open external links within the iframe in the system-browser of the smartphone. This solution worked fine on cordova 2.3.0.
Today I've updated the cordova version of the app to 3.1.0 and deleted some permissions from android-manifest. But the communication with the iFrame-content doesn't work. Following error error-message is shown:
"Unable to post message to https://[domain]. Recipient has origin file://"
To post a message to the IFrame I use following code:
$('#webViewIFrame').get(0).contentWindow.postMessage('message', host);
Has anybody an idea why my communication-solution doesn't work with cordova 3.1.0?

Normally this should be because of cross domain problem. Try using this:
$('#webViewIFrame').get(0).contentWindow.postMessage('message', '*');

You will need to use:
$('#webViewIFrame').get(0).contentWindow.postMessage('message',"*");
Since phonegap/cordova pages are served at "file://" and according to https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
"...posting a message to a page at a file: URL currently requires that the targetOrigin argument be "*". file:// cannot be used as a security restriction; this restriction may be modified in the future."

Related

a website that is blocked from being embedded in an iFrame. I need a legal workaround that allows me to post my store on my website [duplicate]

I am developing a web page that needs to display, in an iframe, a report served by another company's SharePoint server. They are fine with this.
The page we're trying to render in the iframe is giving us X-Frame-Options: SAMEORIGIN which causes the browser (at least IE8) to refuse to render the content in a frame.
First, is this something they can control or is it something SharePoint just does by default? If I ask them to turn this off, could they even do it?
Second, can I do something to tell the browser to ignore this http header and just render the frame?
If the 2nd company is happy for you to access their content in an IFrame then they need to take the restriction off - they can do this fairly easily in the IIS config.
There's nothing you can do to circumvent it and anything that does work should get patched quickly in a security hotfix. You can't tell the browser to just render the frame if the source content header says not allowed in frames. That would make it easier for session hijacking.
If the content is GET only you don't post data back then you could get the page server side and proxy the content without the header, but then any post back should get invalidated.
UPDATE: 2019-12-30
It seem that this tool is no longer working! [Request for update!]
UPDATE 2019-01-06: You can bypass X-Frame-Options in an <iframe> using my X-Frame-Bypass Web Component. It extends the IFrame element by using multiple CORS proxies and it was tested in the latest Firefox and Chrome.
You can use it as follows:
(Optional) Include the Custom Elements with Built-in Extends polyfill for Safari:
<script src="https://unpkg.com/#ungap/custom-elements-builtin"></script>
Include the X-Frame-Bypass JS module:
<script type="module" src="x-frame-bypass.js"></script>
Insert the X-Frame-Bypass Custom Element:
<iframe is="x-frame-bypass" src="https://example.org/"></iframe>
The X-Frame-Options header is a security feature enforced at the browser level.
If you have control over your user base (IT dept for corp app), you could try something like a greasemonkey script (if you can a) deploy greasemonkey across everyone and b) deploy your script in a shared way)...
Alternatively, you can proxy their result. Create an endpoint on your server, and have that endpoint open a connection to the target endpoint, and simply funnel traffic backwards.
Yes Fiddler is an option for me:
Open Fiddler menu > Rules > Customize Rules (this effectively edits CustomRules.js).
Find the function OnBeforeResponse
Add the following lines:
oSession.oResponse.headers.Remove("X-Frame-Options");
oSession.oResponse.headers.Add("Access-Control-Allow-Origin", "*");
Remember to save the script!
As for second question - you can use Fiddler filters to set response X-Frame-Options header manually to something like ALLOW-FROM *. But, of course, this trick will work only for you - other users still won't be able to see iframe content(if they not do the same).

Google Login For Phonegap

After the authentication page does not return the redirect url and showing 404 error. I need the run project in mobile . I am building with phonegap but mobile does not have localhost. how to define local file to redirect_uri ?
Returns This url after
http:// localhost /cevap/redirect.html?state=%7B%22client_id%22:%2275055614045-a999nkehht0jk3i46548qg32imu0toqg.apps.googleusercontent.com%22,%22network%22:%22google%22,%22display%22:%22popup%22,%22callback%22:%22_hellojs_8ws7jbej%22,%22state%22:%22%22,%22oauth_proxy%22:%22https://auth-server.herokuapp.com/proxy%22,%22scope%22:%22friends,basic%22,%22oauth%22:%7B%22version%22:2,%22auth%22:%22https://accounts.google.com/o/oauth2/auth%22,%22grant%22:%22https://accounts.google.com/o/oauth2/token%22%7D%7D&code=4/x9MedwZ8NJN6qUgq2rXAVaBtFuOk.QpP5N0crfbAbYFZr95uygvVVqe1rjwI&authuser=0&num_sessions=1&hd=veriyazilim.com.tr&session_state=f715c83530f60300552e4920948401332014eeea..224b&prompt=none
hello.init({
google : '75055614045-a999nkehht0jk3i46548qg32imu0toqg.apps.googleusercontent.com'
}, {
redirect_uri : 'http://localhost/cevap/redirect.html',
response_type:'code',
scope:'friends'
});
I created Client ID for web application in google .
This is my folder directionary :
For developing in a desktop browser:
A dev domain is required which matches the domain you defined as a callback url when registering your app - define this callback url in redirect_uri, and ensure it points a document containing ./hello.js.
in your case this file would be located at http:// localhost /cevap/redirect.html
For phonegap this isn't the case as apps are run as "file://path/to/installed/apps/myproject" or something. But phonegap apps can watch the URL of popup windows it intitiates, and thats exactly how hello.js works to extract the access_token from the popup windows querystring. in this case there is no need for the redirect_uri to be a valid path, but for a better user experience i would have it point to a web resource which can display something like a spinning wheel.
Problem does not in url.
inappbrowser doesnt load to project. I changed config.xml plugin to this and inappbrowser loaded and problem fixed.
<gap:plugin name="org.apache.cordova.inappbrowser" />

addthis: JS security error for addthis utility frame

I'm trying to use addthis on my page. When using Chrome, I receive a JavaScript security error.
Unsafe JavaScript attempt to access frame with URL <AddThis url> from frame with URL <local url>. Domains, protocols and ports must match.
The only frame I've got in this page is an AddThis-generated one, with the title "AddThis utility frame".
Is there any way to get over this?
I've seen this in addthis's implementation of nucaptcha for their version 250. Try upgrading to their 300 version, they went back to recaptcha.

accessing func in iframe. local to online

HI, i got a simple html page, localy with an iframe. the iframe includes a generated page which got a javascript function. i know want to call that function. of course, im getting "permission denied". so since im new to js and all that stuff i dont know if it's actually possible to do that. give me some hints for searching or a nice solution.
i do cal lthe func like: parent.myiframe.myfunc();
I guess the page in the iframe resides on another server / domain. Modern browser do not allow "cross site scripting", see: http://de.wikipedia.org/wiki/Cross-Site_Scripting
If possible, move the site in the iframe to the same server. An alternative (workaround) would be to proxy the page on the local server, so that that for the client it seems to be loaded from the same domain.
Edit: This is also called a "Same Origin Policy". You can only call java script functions in a document that is:
from the same domain (www.mydomain.com)
from the same subdomain (mail.mydomain.com <- no go!)
both use the same port (p.Ex.
accessing a http://... document from
a http*s*:// document won't work).
There might be another workaround if you have access to the iframe's source:
Change the iframe domain to the same as the outer frame's, by applying:
document.domain = "domain.com";
in the iframe source (see http://ajaxian.com/archives/how-to-make-xmlhttprequest-calls-to-another-server-in-your-domain for more information).
Also there is a Draft for "Cross-Origin Resource Sharing" (http://www.w3.org/TR/cors/) that is already partially implemented in several browser, see: http://www.webdavsystem.com/ajax/programming/cross_origin_requests

Crossdomain TinyMCE

folling this discussion and this link, I learnt that by adding document.domain = 'mydomain.com'; to the tinyMCE initializer file and tiny_mce_popup.js i can overcome the cross domain problem.
I haven't tested it on a proper production server, but in my dev environment the base domain is localhost:8000 and my static files (also tinyMCE ones) are on localhost:88.
Adding document.domain = 'localhost:8000'; or document.domain = 'localhost:88'; doesn't solve the problem as I get the following error:
Uncaught Error: SECURITY_ERR: DOM Exception 18
Any help?
Thanks
The document.domain setting only works if your using subdomains, not completely different domains (different ports count as different domains). So you can have server1.mydomain.com and server2.mydomain.com, in which case you set domain to mydomain.com in both the main page and tiny_mce_popup.js. You can't however use mydomain.com and otherdomain.com. For more information on these restrictions see https://developer.mozilla.org/en/DOM/document.domain or http://msdn.microsoft.com/en-us/library/cc196989(VS.85).aspx
I believe there are plans to adjust the way TinyMCE works so that it can have a CDN version which is usable from any domain, but that doesn't currently exist.
Regards,
Adrian Sutton
http://tinymce.ephox.com
Are you using Django ? I've answered this question below pertaining specifically to tinymce in django.
Tiny MCE popups blank in Django admin

Categories