Unable to load a local html file in Corodva iOS with inAppBrowser - cordova-plugins

I have recently upgraded to Cordova InAppBrowser plugin to 3.2.0 which uses wkwebview to render HTML content. I have always been able to load local HTML file by using the following the code:
cordova.InAppBrowser.open(
'cdvfile://localhost/bundle/www/assets/index.html',
'_blank',
);
However, wkwebview doesn't support 'cdvfile' so I tried using the relative file as below
cordova.InAppBrowser.open(
'assets/index.html',
'_blank',
);
This approach is not working either. The inAppBrowser opens and shows HTML Error 403: forbidden. After I close the browser, all the local files like IMG becomes unavailable and browser console [Error] Failed to load resource: the server responded with a status of 403 (Forbidden). I don't understand why closing browser cause other local files become accessible.

Related

Can I use the Google Picker API in an electron app?

I'm trying to use the Google Picker API to display a picker for the user to select a file. I have this working great in a web app (in a normal browser), but when I run the same code in an electron app, I see a 400 message in the popup iframe, and get the following console errors:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('file://').
Failed to load resource: the server responded with a status of 400 ()
The core problem seems to be that the electron browser window has an origin of file://. This seems to cause two problems:
The (chromium) browser security blocks the cross-origin iframe communication
Google rejects the request as not coming from a valid origin (and you can't add file:// as an origin in the developer console)
I can't think of any way to overcome these problems, but I'm hoping that someone has an idea.
You could create an app and host it in something like following, and then point the electron BrowserWindow to the url.
https://app.yourdomain.name/gdrive/picker?token=access_token
That should work I believe.

Amazon S3 images not loading in chrome

I have a rails application that uploads and displays images from Amazon S3.
I also have an issue displaying some of these images in Chrome!
Take, for example, the following link:
http://s3.amazonaws.com/lafamos-dpk/system/images/2144/thumb/photo_2144.png?1333998967
This just doesn't load in Chrome, but loads just fine in Firefox and Safari.
In a truly mysterious fashion, this image, which was uploaded through the same system, to the same Amazon S3 bucket, loads just fine [granted, it's a different format, but I'm not sure that matters].
Here's a link to the page I'm trying to solve these problems on -- the photos under the Press Photos section all the way down at the bottom are just not showing up at all in Chrome.
Any ideas what's going on here?
Thanks!
Yuval
When you view the site in chrome you're getting a few error's
Failed to load resource: the server responded with a status of 404 (Not Found) https://lafamos-dpk.s3.amazonaws.com/system/main_photos/58/small/artist_58.jpg?1291229622
.
<Error>
<Code>NoSuchKey</Code>
<Message>The specified key does not exist.</Message>
<Key>system/main_photos/58/small/artist_58.jpg</Key>
<RequestId>1F57BF9D9034CB18</RequestId>
<HostId>
U9HkrMYA6nISFRCt2cQ0Xy89uxkzBnJ2pDmlPz/yiCL4Wb74h9hlIg8eVU46+R7y
</HostId>
</Error>
Does the image exist?
Direct links of the images work fine on both Chrome and Firefox, but your img src links seem to be broken. I'm getting this in the DevTools console:
Failed to load resource: the server responded with a status of 404 (NOT FOUND) http://flipsidetomusic.com/wp-content/uploads/2011/02/album_63.jpg
Port: Could not establish connection. Receiving end does not exist. lastError:29
set lastError:29
Port: Could not establish connection. Receiving end does not exist. lastError:29
set lastError:29
I'd look into resolving that 404 Error. Also, I came across a HackerNews' discussion today that may point to the problem's source: https://news.ycombinator.com/item?id=5514344
Apparently Firefox doesn't block non-SSL content on SSL pages by default, but Chrome does. I'd check your S3 bucket permissions, granted, I'm not very familiar with AWS.

HTTP Status 403 when loading a CSS file from a secure domain (Rails 2)

I'm having an issue in Google Chrome regarding SSL. Basically my app is using a CSS file that is hosted on an SSL domain and served by a Rails 2 app. When I look into the Network tab, it shows a 403 status when loading the file. However, the file is loaded successfully when I open it in a new tab.
Does anyone know why this happens and how to get around it?

Hitting Web Service from JQuery Mobile app in PhoneGap

I have a JQuery Mobile app. This app needs to hit a remote web service. When I run the app from my local file system, the app loads fine. But then, when I click a button, I try to interact with the web service. When I attempt to hit the web service, I see an error in the console that says:
XMLHttpRequest cannot load https://www.mydomain.com/myService/myAction. Origin null is not allowed by Access-Control-Allow-Origin
I try to hit the service with the following code:
var vm = getParameters();
$.ajax({
url: https://www.mydomain.com/myService/myAction,
type: "POST",
data: JSON.stringify(vm),
contentType: "application/json",
success: action_Succeeded,
error: action_Failed
});
What am I doing wrong? I tried everything in this post without any luck: XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin.
My app works when I run it via Visual Studio. My hunch is that its running with in a context of a web server at that point. However, I want to deploy this via PhoneGap. Because of that, running within the context of a web server is out of the question. That's why I figured if I ran it via my local file system and everything worked, I should be good. What am I doing wrong?
Thank you so much!
Check your config.xml file (if you're using the Phonegap Build service - otherwise check the .plist file for iOS, AndroidManifest.xml for Android..), and add this line:
<access origin="*" />
If this works, then you can try to set a more restrictive access rule like:
<access origin="https://mydomain.com" subdomains="true" />
And on your server side, you'll need to return this http header:
Access-Control-Allow-Origin: *

Application Cache manifest could not be fetched, because a redirection was attempted

I'm writing an html application for the iPad, and my cache.manifest file lists all my assets. I've verified that everything is cached by looking in the console of Google Chrome.
But when I go to Safari on the iPad, it says:
Application Cache manifest could not be fetched, because a redirection
was attempted.
I'm even loading jQuery and jQuery mobile locally to make sure that loading them remotely is not causing this issue.
If you link to the page with http://www.yourname.com/ instead of using a relative link, that will do it.

Resources