I have a cordova app (cordova 5, ios 4) which uses Angular in the background.
I need to display an image (jpg) which I am downloading from my remote server via https.
However the image is always displayed as broken by the webview.
The image is included like this:
<img ng-src="{{picture}}">
I have tried 2 variants to include the picture:
displaying the image directly via the https url. I can open the url in both a desktop browser and the iPhone Safari browser and they display it correctly. In cordova it is shown as broken
downloading the image via File Transfer and then including the local image via a file:// link. Same problem.
What I have verified:
the image itself is correct as I can show it in a browser
the download itself works, the file transfer is correct
cordova has been set to allow all resources so it does not seem to be a problem of whitelisting
angulars sanitizing has also been adjusted so the links in the html are actually correct i.e. not modified
the server is sending the correct content-type which I have verified via wget
I am running out of ideas here.
It seems the browser view of Cordova on iOS (UIWebview) is more strict than a standalone browser. I tried to download the image via wget and then had a look at the content. It did not show any jpg header but was identified as text by the unix file command.
The http headers also showed no Content-Length.
Solution
The server side logic (spring) returned a byte[] but I did not include any transformation to it. So I changed by rest configuration on the web app to include a ByteArrayHttpMessageConverter:
<mvc:annotation-driven>
<mvc:message-converters>
<bean class="org.springframework.http.converter.ByteArrayHttpMessageConverter">
</bean>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
Then it worked. The browser seems to fix the missing file header and/or encoding (not sure what the exact error is) whereas the UIWebview doesn't do this.
Related
We have a React PWA where we initially download RTF-Documents and save them to an indexDB. We use createObjectURL and an a with a.click() to simulate a download when the file is requested by the User.
The mimetype is set to application/rtf in the createObjectURL call.
However, on iOS (with Safari) the default "view" operation shows the following:
This file cannot be previewed
It might be corrupted or of an unknown file format.
The same file works from our "normal" webapp (i.e. file is served from a backend server). I tried to set the headers exactly like our backend server does, but it either doesn't show the "view" Button at all or it shows the error.
Any ideas how to set up the calls, so iOS will show the RTF correctly?
I have a React Native snippet like this to show images in a flatlist card.
<Image
style={subheader.image}
source = {{uri : image_url}}
/>
image_url has value somthing like this:
https://mc-staging-1.s3.ap-southeast-1.amazonaws.com/uploads/stock/image/e9e5b888-a7f3-491b-b729-311d2e87279a/fed-bank--big.svg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4SDSGDOCH6EQY3V6%2F20220115%2Fap-southeast-1%2Fs3%2Faws4_request&X-Amz-Date=20220115T084616Z&X-Amz-Expires=900&X-Amz-SignedHeaders=host&X-Amz-Signature=44463cf9da7aec37b094d987fdb3571b6df6e12bd2c420bd1ebe4667362465b9
The image gets displayed in the browser but not on react native app. when I hardcode the URL as something that is publicly available (without any signature), it works fine.
I had a similar issue where the image was working on web and android but not working on ios. I found this on the RN docs:
"It's highly recommended that you use https as well in order to satisfy App Transport Security requirements on iOS."
https://reactnative.dev/docs/images#network-images
Once I changed "http" to "https" the image now works on ios.
I'm building a mobile app using WKWebView. I register custom url schemes image:// and thumb:// to serve assets from the native part to the web part of the app.
webViewConfiguration.setURLSchemeHandler(handler, forURLScheme: "image")
webViewConfiguration.setURLSchemeHandler(handler, forURLScheme: "thumb")
This approach works well if urls with a custom scheme are used in HTML. For example, <img src="thumb://watermarkly.com/1.jpg" /> works properly - WKWebView invokes my handler and displays the result. However, WKWebView blocks requests if I try to fetch these urls using XMLHttpRequest:
[Warning] The page at https://watermarkly.com/app/watermark/ was allowed to display insecure content from thumb://watermarkly.com/1.jpg.
[Warning] [blocked] The page at https://watermarkly.com/app/watermark/ was not allowed to display insecure content from image://watermarkly.com/1.jpg.
[Error] Not allowed to request resource
[Error] XMLHttpRequest cannot load image://watermarkly.com/1.jpg due to access control checks.
The only difference here is that "thumb:" url was assigned to an img tag, while "image:" url were fetched via XMLHttpRequest. Unfortunately, no other info provided in Safari Developer Tools.
The problem appears on a real devices only - everything works properly in iOS Simulator.
Is there something I need to configure to make it work for XMLHttpRequests as well?
Update
We switched from HTTPS to HTTP to make XHR to solve the problem.
Unfortunately, custom url schemes seems not to work on some iPhones. We have 5 customers with iPhones where nor switching to HTTP, nor sending Access-Control-Allow-Origin header help. We weren't able to identify which setting causes the issue - the problem cannot be reproduced on any of devices we have. Apple reviewer didn't have any complaints as well. Nor XHR, not getting images through urls work on these phones. One of the customers has two phones. Custom url schemes work on one of them and they don't work on the second one at all. He says they are identical and there is no Safari extensions installed. Unfortunately, we weren't able to identify what causes the problem. Beware custom url schemes may not work on some phones.
I have an embedded twitter video in a webview in a mobile app (Titanium, but this doesn't really matter). When I click play on the video I see this error:
Refused to display '[the url]' in a frame because an ancestor violates
the following Content Security Policy directive: "frame-ancestors *".
What is causing this issue is the fact that the webview content is being populated via a Hogan template that is loaded in from a local file path. I get the same error if I just copy the embed code into a file on my desktop and open the file in Chrome. It works fine in a webview in iOS and the local file works okay in Firefox, so this seems to be Chrome related.
Why is this failing with a wildcard for frame-ancestors?
Is there a way around this in my current setup?
I have an ionic 4 app deployed to IOS.
It is using images from facebook in the format
http://graph.facebook.com/1015/picture
these images get translated to a CDN url like
https://scontent.xx.fbcdn.net/v/t1.0-1/c196.66.412.412/s50x50/155657_780082286681_4945783_n.jpg?oh=d0d22f7fd9ed5e60410dd7d05ae161b0&oe=5B0D1AA8
The app is able to display the user image in browser and android devices fine.
However when testing on IOS device, the image is not loaded. IOS is displaying other images fine and if I change the url to the CDN url, it works too.
However, is there a method to do this dynamically by letting ios know that it can use the redirected image.
Alternatively im looking forward to a suggestion if I can first find the redirect url in angular and then put that cdn url value in the src. Just can't seem to find a good way of doing this translation.