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.
Related
Project workspace
Mobile Project: ReactNative 0.64.3 / Expo with Managed Workflow / IOS 14.6 / NPM
Sharing Library: ReactNative's default Share library.
Website/Domain: Statically hosted via S3, single page app built with TS/Gatsby. Caching handled with CloudFront.
Synopsis: I'm using universal links and query params to allow my users to share tickets. The Universal links are being stripped of all route params and query strings when the link is shared by the native sharing dialog. Using the COPY/PASTE function in the native sharing dialog always copies a complete link, which can be pasted anywhere and used successfully to open the app. The EMAIL option also works, opening Mail with the correct url string and autofilled as expected. The problem arrises when I try to share the link via iMessage. I'm running the project on an iPhone as a fully deployed Apple Testflight standalone app.
The app does download the AASA file on app install, which is statically hosted via an S3 bucket. I have verified its availability via postman and the online AASA validator here https://branch.io/resources/aasa-validator/
The app always opens when opening a valid universal link, such as when I manually type it into iMessage or other sharing medium -- email, etc. Because of this, I'm inclined to believe I have a problem with where the link string is being generated rather than the AASA system.
const ticketShare = (ticket: Ticket) => {
const link = Linking.createURL("www.sample.com/share_ticket", { //Expo Linking library
scheme: "https",
queryParams: {
...ticket
}
}).replaceAll("%25", "%"); //double encoding problem I have yet to properly fix.
console.log("link: ", link); //always the correct url here.
Share.share({ url: link }); // request to open the native sharing dialog activity. ('url' for ios)
};
Correct url is something like:
https://www.sample.com/share_ticket?my=query¶ms=here
Stripped url is something like:
https://www.sample.com/
sharing dialog image.
https://www.sketchappsources.com/resources/source-image/simple-share-actionsheet-ios-13-hugo.png
"COPY" actions always copy the correct url, "MAIL" works as well.
Using "MESSAGE" or any of the "recent" actions in the top row fails, sharing the base url only.
The title and website abbreviation at the top of the action sheet do render properly, pulling metadata/images from the website.
To make it more complicated, the share function does yield the correct url directly after a fresh install, but then never again. Console.logs always log the correct url.
I have tried react-native-share's library with the same results. (Wraps the same native bridge code?)
I have checked the react-native github page for issues related to this with no result. I have combed StackOverflow for a few days without results. Usually that means its something simple.. here's to hoping.
Anyone out there run into this issue? Thanks!
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 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.
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.
I'm playing around with iOS' webapps.
I'd like to configure the webapp to save to the user's home screen with a different url from the original web page.
On Android, you can change "start_url" in the manifest.json to achieve this.
The various customisation options on iOS seem to be less well documented. But I'm hoping there's a meta tag I can use, similar to this one that changes the web app title:
<meta name="apple-mobile-web-app-title" content="[your title]" />
which is documented in this question.
As of iOS 11.3, Safari now supports web app manifests, making it possible to specify the start URL. Learn more here.