Nativescript: Is there a way to still load http content on iOS?

[dajk]

Hi guys,

I am wondering about that since I am working on project where I've scraped data from web and create custom API. So, I am able to load data if I create https server, but not sure how to make some sources/links available.

I found many similar question and I tried to put additional code just for development:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
      <true/>
</dict>

into App_Resources/iOS/Info.plist, but still doesn't work and have this error when I run the App:

App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.

For example if we have http://example.org and inside some object structure like this:

{
  id: 1337,
  name: 'Random name',
  image: 'http://static.example.org/img.png
}

How to make this image available?

Thanks

[NickIliev]

By default iOS is not allowing requests via HTTP but only via HTTPS.
However the code you have referred (_NSAppTransportSecurity_) is one way to make http requests working.
I am not sure how you are coresponding with your server so here is a link to a simple working example showing image upload via http in iOS with httpBin test server.
https://github.com/NativeScript/sample-ImageUpload

After adding NSAppTransportSecurity to your info.plist you might want to rebuild your nativescript app as well.

[dajk]

Hi NickIliev, thank you for fast response.

I didn't mention that everything works if I put https image.

This is my App_Resources/iOS/Info.plist:

And yes, every time I change Info.plist I rebuild the App. You can see platforms/ios/project-name/project-name-Info.plist:

[NickIliev]

Based on the example code I have send you I will post some additional chages to illustrate how to download an image and load it to your page.
Please let me know if that worked out for you and if you need more assistance do not hesitate to contact me and post some more code from your app.

So first you may need the following modules

var imageCacheModule = require("ui/image-cache"); var imageSource = require("image-source"); var fs = require("file-system");
then in you execution function (for simplicity I am using this in pageLoaded in the example)

`
var imageToLoadInPage = page.getViewById("loadedImage");

var cache = new imageCacheModule.Cache();
cache.placeholder = imageSource.fromFile(fs.path.join(__dirname, "res/no-image.png"));
cache.maxRequests = 5;
// Enable download while not scrolling
cache.enableDownload();
var imgSource;
var url = "http://i.imgur.com/sQSbV8o.jpg";
// Try to read the image from the cache
var image = cache.get(url);
if (image) {
    // If present -- use it.
    imgSource = imageSource.fromNativeSource(image);

    imageToLoadInPage.imageSource = imgSource;
}
else {
    // If not present -- request its download.
    cache.push({
        key: url,
        url: url,
        completed: function (image, key) {
            if (url === key) {
                imgSource = imageSource.fromNativeSource(image);
                console.log(imgSource.height);
                console.log(imgSource.width);

                imageToLoadInPage.imageSource = imgSource;
            }
        }
    });
}
// Disable download while scrolling
cache.disableDownload();

`

and in your main-page.xml file you ahve the element with the "loadedImage" id
<Image src="~/logo.png" row="0" id="loadedImage" />

[dajk]

Hi NickIliev,

thanks for the code example, I tried a bit to integrate but didn't succeed. At the moment I've just experimented with this, if I could load my API from NativeScript and to see how it works and stuff...

By the way, I've also tried with _React Native_ and _Fuse tools_ and images loaded without any custom settings. In my opinion it should be an option by default for development purposes or maybe there is a bug?!

Best

[NickIliev]

Hi @dajk

Please do not hesitate to post some more code / debug information in order to help you out with this issue. I think this issue is not a bug but a strict interpretation of the native behaviour in iOS which is the fundamental of NativeScript - to provide trully native apps.
Meanwhile you can try the extended variant in your info.plist where you can specify which domains you want to add to the excepition list (that will allow them to use HTTP)

<key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> <key>www.yourwebservicedomain.com</key> <dict> <key>NSExceptionAllowsInsecureHTTPLoads</key> <true/> <key>NSExceptionMinimumTLSVersion</key> <string>TLSv1.1</string> <key>NSIncludesSubdomains</key> <true/> </dict> </dict> </dict>

[eesdil]

Hi,
I am trying to disable ATS also and having the same issue. I would like to allow it for localhost, but even I am putting the exception in the plist file I am getting the same message...

If it is matter I am getting the localhost request in WebView and as a callback.

[NickIliev]

@eesdil
You can use IPs in the exception list so for localhost have you tried to add
<key>127.0.0.1</key>
also alternativly you can use
<key>localhost</key>

[eesdil]

ip 127 would be ok. But it doesn't seem to work. I am using it with angular so that can cause the issue...
Once looked it allowed, but after I couldn't reproduce... So I will try to test it later again.

thanks

[eesdil]

In the apple documentation they say for NSExceptionDomains:
Must not be a numerical IP address (but rather a string)

I am getting this:

Apr 5 18:04:59 magnetite testnativeangular[18673]: App Transport Security has blocked a cleartext HTTP ( http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.p list file.

And in the info file (tried the Arbitrary and separate also):

<key>NSAppTransportSecurity</key> <dict> <!-- <key>NSAllowsArbitraryLoads</key> --> <!-- <true/> --> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict>

in the view:
<WebView id="myWebView" src="http://localhost:3000/auth/google" (finishedLoading)="loaded($event)"></WebView>

the same code is working in android emulator...

[eesdil]

@NickIliev I think you should leave this for now (my issue). I think the webview is not working somehow. I ill try to do it without angular, to test whether it is working or not.

[dajk]

Hi @NickIliev

I don't have almost nothing to show you inside code.

My JSON looks like something I've already posted above:

{
  id: 1337,
  name: 'Random name',
  image: 'http://static.example.org/img.png
}

I put simple function to get JSON into main-view-model.js:

function getResults() {
    // if I secure my localhost, request works
    // but as you see there is an object with image property
    // if image is http it doesn't work but if I put https image, it works
    return http.getJSON('https://localhost:1111/results');
}

function createViewModel() {
    var viewModel = new Observable();
    viewModel.getResultsApi = getResults();
    return viewModel;
}

Also same error if I try load http link inside <webview>, but it works with https... And I tried it with different code inside Info.plist, nothing helped.

[eesdil]

So it is working fine... I just didn't deploy the code, I was always using build and livesync so the changed info file was not deployed to the device... thanks and sorry for the false alarm.

Maybe in the documentation can be mentioned next to build also deploy if the plist file is changed.

[dajk]

Exactly, there was the problem. It doesn't work on livesync even if I rebuild, but it works when I just emulate/deploy on device. I am sure that I tried it before, but probably before I put NSAppTransportSecurity or something else missed.

Thanks for coming back and share this information with us @eesdil 👍

Best Regards

[NickIliev]

Thank you @dajk , @eesdil for your cooperation and shared knowledge about this issue.
Rеdirected to #1666

[actsasflinn]

I recently found this with a similar problem. To be maybe more explicit, my project is based on the Groceries example so it's creatively named "Groceries". When I changed the file Groceries/platforms/ios/Groceries/Groceries-Info.plist and added an NSAppTransportSecurity exception

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>192.168.1.172</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
                <key>NSIncludesSubdomains</key>
                <true/>
            </dict>
        </dict>
    </dict>
    ...
</dict>
</plist>

After adding this and running

tns run ios

I was still getting the error when running in Simulator

App Transport Security has blocked a cleartext HTTP ( http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.

It turned out I needed to build

tns build iOS

Then future runs were fine with the simulator

tns run ios

Then all seemed to work fine.

[Wowgreat]

@actsasflinn thank you,It works for my project.
https://www.codemanclub.cn/index.php/article/getArticleById/100

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.