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.
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.
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...
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,
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.
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...
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.