6 Replies Latest reply on Feb 12, 2017 11:23 PM by alond83602031

    Whitelist problem

    alond83602031 Level 1

      Hi,

      I am using phonegap build for Android and IOS.

      I do use the Whitelist plugin, but I still can't display an image from

      'https://graph.facebook.com/'+ id +'/picture?type=large';

      The id from facebook is recieved from Facebook API and so are all the other API data, but I can't display the image in that URL. When I run the code as a website in a browser without phonegap Build, then it all work.

      I guess it is because of a Whitelist issue.

       

      This is how I declare the Whitelist in config.xml:

      <plugin name="cordova-plugin-whitelist" spec="1.3.1"/>

        <access origin="*" />

        <allow-intent href="*" />

        <allow-navigation href="*" />

       

      And I use for Android:

      <preference name="phonegap-version" value="cli-5.2.0" />

        <preference name="android-minSdkVersion" value="22" />

       

      and for IOS:

      <preference name="phonegap-version" value="cli-5.4.1" />

       

      Both don't work.

      Can you tell me what is the problem?

      **************

      Edit:

      I tried to replace the URL with a different site' (not local) .jpeg image and it works. So my guess is that the problem is not with the Whitelist, but rather with the picture.data.url that facebook returns (It doesn't have .jpeg , png etc in the end).

      Any help?

       

      Thanks,

      Alon

        • 1. Re: Whitelist problem
          kerrishotts Adobe Community Professional

          It might not be the whitelist but the Content Security Policy meta tag getting in the way. If you have one in your index.html file, please post it.

          • 2. Re: Whitelist problem
            alond83602031 Level 1

            Thanks @kerrishotts for trying to help. I do have the Content Security Policy meta tag as follows:

            <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:">

             

            However, as I wrote in my edit I don't think it's the whitelist or CSP that causing the problem because the app displays an image when replacing the url line with a standard url that leads to a .jpeg image. However the Facebook picture url directs to a specif type of picture property: https://graph.facebook.com/'+ id +'/picture?type=large (with no .jpeg in the end) that the app doesn't display. However the same JS line displays the picture when the code is run in a website (even in Android), but with no Phonegap build app that wraps it.

             

            Any suggestions?

            Thanks!

            • 3. Re: Whitelist problem
              alond83602031 Level 1

              Hi,
              Any leads?
              I put an .onerror event on that facebook picture element that gets the URL of the facebook picture, and it does triggers an error. Although only this kind of url triggers this error. In addition, rarely (say, 1 out of 10 times) the image loads successfully.

              I tried changing phonegap version, and Whitelist plugin version, and nothing changes.

              Driving me insane.

              Will appreciate any help...

              Thanks,

              Alon

              • 4. Re: Whitelist problem
                alond83602031 Level 1

                Another update:

                The image sometimes (say 1 out of 10 times) does display on the app, but most of the time I get a blank placeholder. What can be the problem?

                 

                Thanks for your help,

                Alon

                • 5. Re: Whitelist problem
                  kerrishotts Adobe Community Professional

                  Is the 1 out of 10 times for the same image tried repeatedly, or just random IDs (where some work and some don't).

                   

                  Note that if I try to go to a profile image, I'm getting redirected to https://scontent.xx.fbcdn.net/ . Not sure that it matters, but just putting it out there. You might double check that the same is occurring on your end (or not). It might also be worth adding a software proxy to capture all the requests to see if anything looks awry.

                   

                  When you've tested on Android (without PGB), how are you testing? Are you loading a remote website into Chrome? I'm wondering of the origin of the request isn't coming to play here a bit -- file origins are not always treated the same as http(s) origins.

                  • 6. Re: Whitelist problem
                    alond83602031 Level 1

                    Thanks for reaching out kerrishotts

                    Yes - the 1 out of 10 times, is with the same image when I add the Facebook link of my profile picture manually to the code.

                    I noticed the redirect that facebook makes on the original profile picture url. I also tried to add the redirected url (i.e. https://scontent.xx.fbcdn.net/...) to the code manually, but the problem sill exists (but with better success percentages. say 3 out of 10).

                     

                    What do you mean by adding a proxy software? can you reference me to one.

                     

                    On Android without PGB I've tested by loading a remote website into chrome (app.dev.mingle-app.com/app/desktop.html).

                     

                    Any suggestions how to solve this? Driving me insane...

                    Is there a tool to see what happens to the image element in the javascript of the app, and understand what prevents it from displaying?

                     

                    Few remarks that might give more leads:

                    - The pattern of the times the image loads or not is that it changes only when uninstalling and re-installing the app. That is, If I try to install the app and the image loads, than it will keep loading when closing and opening the app again and again. And when I install the app and the image doesn't load than it won't load when closing and openng the app again again (and in 1 out of 10 installs the picture loads). However, cleaning Cach doesn't affect the loading/not loading.

                    - Using other external url picure (say https://i1.wp.com/www.talkinghightech.com/wp-content/uploads/2017/01/Optimized-StockSnap_ G443L74KXK.jpg?resize=800%2C445  ) loads the image all the time.

                    - The facebook picture is not big (8k).

                    - I tried adding the facebook picture link in other display elements in the app and the symptom is the same as in the original placement.

                    - I tried with different phonegap versions and it's the same as well.

                     

                    Will be thankful  for any help.