Explore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.

All subtopics
Posts under Safari & Web topic

Post

Replies

Boosts

Views

Activity

Apple Pay on Web in Cross-Origin iFrame: Merchant Validation Failure Due to Referrer Header Reliance (Custom API Integration)
Hi Apple Developer Community and Support, We are implementing Apple Pay on the Web and are encountering a persistent issue with merchant validation when the ApplePaySession is initiated from a JavaScript application running within a cross-origin iframe. Our Setup: Top-Level Domain: https://application.my.com/ (where the Apple Pay button is displayed, and the iframe is embedded) iFrame Content Origin: https://cashier.my.com/ (Our custom JavaScript application that handles the Apple Pay integration and directly calls our Payment Service Provider's (PSP) API for merchant validation). iFrame allow attribute: The iframe correctly includes allow="payment *". The Problem: When a user clicks the Apple Pay button, the ApplePaySession is successfully created and the Apple Pay sheet opens in Safari iOS. This suggests the browser recognizes the allow="payment *" attribute and allows the API calls. However, during the session.onvalidatemerchant callback, our JavaScript code makes a direct API call to our PSP (Nuvei)'s endpoint. This call consistently fails with an "Invalid domain name!" error, and the Apple Pay sheet then shows "Payment Not Completed." PSP's Diagnosis: Our PSP (Nuvei) has investigated and stated that for this specific endpoint (getAppleValidationApiFlow.do), "there is no explicit way to pass domain to the endpoint and domain for which session is issued is based on 'Referer' header." Our Question for Apple: Given that Safari 17+ now supports allow="payment" for cross-origin iframes to enable Apple Pay APIs, we have the following questions: What is Apple's official guidance or expectation regarding the Referer header for ApplePaySession.onvalidatemerchant calls when the ApplePaySession is instantiated from a cross-origin iframe? Is it expected that the Referer header for calls originating from the iFrame will always be the iFrame's origin? Does Apple's merchant validation process (when the PSP calls apple-pay-gateway.apple.com/paymentservices/startSession) itself rely on or interpret the Referer from the initial client-to-PSP call? Are there recommended best practices or standard approaches for PSP integrations in this cross-origin iFrame scenario to ensure the Referer validation (or equivalent domain validation) is correctly satisfied? We're trying to understand if our PSP's specific reliance on the Referer for this validation is a standard requirement implicitly set by Apple for this flow, or if there are other architectural approaches that should allow this scenario to work seamlessly. Thank you for any insights or guidance you can provide.
1
0
248
May ’25
HTML problem at Safari on iPadOS 18.2 or after version
We confirmed a problem at Safari on iPadOS 18.2 or after version. For confirmation, we made a HTML document (see below HTML1) what include ‘method="POST" target="_blank"’ and tested the form however server received GET method and there is no parameter, server did not receive “id” parameter. We confirmed that fact in captured packet and log file that on the server. HTML1: We also made another HTML document (see below HTML2) what include submit button, but the server received GET method as above. HTML2: And we also confirmed that it behaves differently depending on the network environment. If the form targets a name that does not exist (ex. target=” A12345”), behaves differently http or https. http: Safari opened new tag, but the server received GET method. Normally, Safari open new tag and the server receive POST method. https: Safari opened new tag, and the server received POST method. It is normally. If the form targets ‘_blank’, the server received GET method on http or https both. We think Safari change the method POST to GET and delete parameters. It is not conformed to the HTML specification if is that true. We confirmed it was not happened at Safari on iPadOS 17.4, and Windows PC (Edge, Chrome). The method what the server received is POST. We find same problem in Apple Support Community (see below URL). https://discussionsjapan.apple.com/thread/255987615 (Described in Japanese) Is it a bug in Safari on iPadOS 18.2 or after version? Do you have plan to fix? Or if fixed the bug, when do you release fixed version.
Topic: Safari & Web SubTopic: General
0
0
179
May ’25
React Native Deeplink Issue
I am working in React Native and trying to use Deeplink. When app is installed code is working fine but when app is not installed not redirecting to App Store in Safari instead of that in Chrome that is working fine in safari when i click i got this error message "safari cannot open the page because the address is invalid" this is my apple-app-site-association file code { "applinks": { "apps": [], "details": [ { "appID": "CS666P223.com.seecard", "paths": [ "", "/recover/", "/settings/*" ] } ] } , "webcredentials": { "apps": [ "CS666P223.com.seecard" ] } } and this is my code in next "use client" export default function Home() { // Helper function for device detection // const isiOS = () => /iPhone|iPad|iPod/i.test(navigator.userAgent); const isAndroid = () => /Android/i.test(navigator.userAgent); const isiOS = () => { const userAgent = navigator.userAgent || navigator.vendor; return ( /iPhone|iPad|iPod/.test(userAgent) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) ); }; const openAndSaveCard = () => { try { // let fallbackLink = ''; if (isiOS() || isAndroid()) { const card_id = "3434bee9675ee44b3dc65"; const card_owner_id = "34349675ee44b3dc43"; const card_for_saved = { "cardId": card_id, "ownerId": card_owner_id }; console.log("=-=-card_for_saved",card_for_saved) const encodedData = encodeURIComponent(JSON.stringify(card_for_saved)); window.location.href = `saveseecard://open?id=${encodedData}`; const androidAppStoreLink = 'https://play.google.com/store/apps/details?id=com.seecard'; const iosAppStoreLink = 'https://apps.apple.com/np/app/seecard/id6502513661'; fallbackLink = isAndroid() ? androidAppStoreLink : iosAppStoreLink; const timeout = setTimeout(function () { if (document.hasFocus()) { window.location.href = fallbackLink; } }, 2000); window.addEventListener('blur', () => { clearTimeout(timeout);; }); } else { alert("Your device doesn't support deep linking for this app."); } } catch (e) { console.log("Error:", e); } }; return ( <div className="cIcon ml-10 purpleBg" // onClick={() => { openAndSaveCard() }} onClick={openAndSaveCard} > <p className="container-text">Save Card</p> </div> </main> </div> ); }
Topic: Safari & Web SubTopic: General
3
0
402
Feb ’25
Do page img-src CSPs apply to Safari WebExtension content scripts injected HTML img tag?
I am currently developing a Chrome, Firefox and Safari web extension, and I am facing a CSP issue on the content script on Safari. The extension I develop has a content script that injects an img tag in the DOM of web pages the user is visiting. That img tag fetches its content at a specific URL. On Chrome and on Firefox, the img tag content fetches the content at the URL with no issue on every web pages, including those that set the CSP header img-src. On Safari, I'm getting the following error on web sites that set the img-src CSP header: Refused to load https://axxlfrmnpq.cloudimg.io/www.macifavantages.fr/wp-content/uploads/2021/06/Garmin-logo.png?func=bound&w=225&h=113 because it does not appear in the img-src directive of the Content Security Policy. Here is the actual CSP img-src header content of the web page where, on Safari, the injected img tag does not load the content at https://axxlfrmnpq.cloudimg.io/www.macifavantages.fr/wp-content/uploads/2021/06/Garmin-logo.png?func=bound&w=225&h=113: Content-Security-Policy: img-src https://secure.adnxs.com https://www.facebook.com https://.garmin.cn 'self' data: .garmin.com .trustarc.com .truste.com https://static.garmincdn.com https://www.google.com https://www.google.co.uk https://prefmgr-cookie.truste-svc.net https://res.cloudinary.com https://res.garmin.com https://.criteo.com https://.doubleclick.net https://www.googleadservices.com https://px.adentifi.com https://rtb.adentifi.com https://.teads.tv https://www.googletagmanager.com https://bat.bing.com https://.yahoo.com https://sync.outbrain.com https://*.google-analytics.com https://stats.g.doubleclick.net https://static.hotjar.com https://script.hotjar.com .akamaihd.net https://.tealiumiq.com https://deploytealium.com https://pixel.mediaiqdigital.com; My question is, is the page CSP blocking the img tag injected in the web page by the extension's content script? If so, is this behavior documented somewhere, or is it a Safari bug? I saw there is a similar post on the forum, but I couldn't find if the issue is a bug or if it's the expected behavior on Safari: https://developer.apple.com/forums/thread/651542?login=true. Thank you very much for your help.
0
0
586
Feb ’25
Problems with Safari autocomplete
Hello, following problems described here: https://developer.apple.com/forums/thread/765272 Last version of Safari apparently corrected previous bugs, however we encountered another problem. Right now Safari uses autocomplete feature of some kind (Siri suggested websites/Top hit) which triggers blocking while writing the name of the website. Probably somehow loads website in the background. Problem is, that this behavior is impossible to debug, because this autocomplete doesn't work, while the browser console is open. We are using content script for blocking. Please advise. Thanks very much
Topic: Safari & Web SubTopic: General
1
0
203
Feb ’25
iOS 18 upgrade: website map point text now missing after
My website ccflood.us is a simple map that uses a CSV file for the data that is displayed on the map. It uses the ESRI JS API. Recently the points on the map began missing the text in the boxes only on Apple devices that have been upgraded to iOS 18. Has anyone also had this happen to their site? If you have upgraded to iOS 18, try this site on your iPhone then look at it on an Android phone or your desktop browser. You should seet the values in the boxes and a "+" at points that have no value. If you've had this happen with your site or have heard of a fix, please reply to this post.
Topic: Safari & Web SubTopic: General
1
0
373
Mar ’25
When using ProxyConfiguration, use different proxy for HTTP and HTTPS with WKWebView
I am currently developing an app using WKWebView. In iOS 17, Apple introduced ProxyConfiguration, and I have two questions regarding its usage: Is there a way to use ProxyConfiguration to distinguish between HTTP and HTTPS traffic? I have reviewed the documentation but couldn’t find a clear method for this. As an alternative approach, I am attempting to determine the request scheme within WKWebView and switch proxyConfigurations just before loading the request. My current implementation sends requests to hoge_a by default and switches to hoge_b only for HTTP traffic.   if #available(iOS 17.0, *) { if URLString.contains("http:") { webView.configuration.websiteDataStore.proxyConfigurations = [hoge_b] } } webView.load(request) if #available(iOS 17.0, *) { if URLString.contains("http:") { webView.configuration.websiteDataStore.proxyConfigurations = [hoge_a] } }   2. Since I modify proxyConfigurations every time webView.load(request) is called, are there any potential issues or concerns with this approach? I would appreciate any insights you may have on either of these questions.
1
0
368
Feb ’25
Redirect link open 2 links not only 1 link in IOS 18
When i use adjust redirect: https://app.adjust.com/xxxxxx?label=xxxxxx&redirect=http%3A%2F%2Fwww.testingmcafeesites.com%2Ftestcat_bu.html It open 2 links: https://Fwww.testingmcafeesites.com then http://www.testingmcafeesites.com/testcat_bu.html And in my app use redirect link for open a web page. But content in domain url like https://www.testingmcafeesites.com/ not be set. So it talke long time often 1 minute for finish request in first link. It hapen only in ios 18 i tested in ios 17 and ios 16 it open one link only.
0
0
389
Mar ’25
Issue: Webview does not respond when the biometric component is presented
Hi, We have a native application with a webview part. When we open the app, we load webview resources in a false foreground. The webview communicates with the native part to query local variables, among other things. We have noticed that for the past few weeks, when the biometric component is presented to enter the fingerprint or faceId, while the component is displayed, the webview does not respond. We do not see the calls made by the webview, nor can we respond to them. Even if you open the Safari debugger, the webview does not respond UNTIL you close the biometric component in the native part. This has created a big problem in our app, and we wanted to know if it is an issue you had on your radar. Thank you very much.
Topic: Safari & Web SubTopic: General Tags:
0
0
244
Feb ’25
Add Authorization header to WKWebView.
How can i add Authorization header to a wkwebview. I checked https://developer.apple.com/documentation/foundation/nsurlrequest#1776617 which says Authorization header is a reserved http header and shouldn’t be set. I want to set it when requesting a url to the server which will be used for verification. How can i do that?
0
0
369
Feb ’25
Have control over show/hide the Smart Banner
Hello, We do not have explicitly set it our website, but still Smart Banner appears since we have universal link setup. (current URL matches the universal link patterns set in your apple-app-site-associations file ). Also, I understand it appears only for users having our app installed. We do not want to show this banner in any case. is there any way to choose not to show the app banner? either setting additional meta or any other way would work. regards, Hussain
1
0
779
Mar ’25
Inquiry Regarding Unsubscribe Flow for Recurring Payment Processing
We would like to confirm the unsubscribe flow related to recurring payment processing. When a user unsubscribes, does your system send any notification to us? If no notification is provided, we will not be able to detect the unsubscribe event and will continue to send recurring payment requests to the gateway periodically. Would this cause any issues? We would appreciate it if you could share the specific unsubscribe flow with us. Thank you in advance for your support.
0
0
59
Aug ’25
Push Notifications Not Working in iOS App or Safari Browser Created via PWA Builder
Push Notification Issue in iOS PWA App We’ve been trying to implement push notifications in our iOS app, which is a wrapper around a Vite PWA built using PWA Builder. Here's a detailed overview of the issues we’re facing: Problem Summary We originally had a working Vite PWA and used Firebase Cloud Messaging (FCM) for push notifications. When converting this PWA to an iOS app using PWA Builder: The notification permission prompt did not behave as expected in Safari. Even after requesting permission via a user gesture (e.g., button press), FCM token was not received. On Safari (both Mac and Windows), permission sometimes works, but the token isn’t saved until Safari is closed and reopened. In the iOS PWA app, the FCM token never gets retrieved. We tried the same process on Chrome, and everything works flawlessly there. What We’ve Tried Wrapped the permission request and FCM token logic in a user gesture (e.g., button click), as recommended. Confirmed our manifest includes all necessary fields (see below). Tested across macOS, Windows, Safari (desktop), and the iOS app. Manifest.json { "name": "Periscopio", "short_name": "Periscopio", "start_url": "/", "display": "standalone", "background_color": "#f2f2f2", "lang": "en", "scope": "/", "description": "Facilitates the collection of primary data for market research purposes.", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }, { "src": "/maskable_icon_x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { "src": "/maskable_icon_x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ], "edge_side_panel": { "preferred_width": 400 }, "display_override": [ "window-controls-overlay", "standalone" ], "theme_color": "#08244c", "orientation": "portrait" } Core Logic (Plain TypeScript) 1. Request Notification Permission + FCM Token async function handleRequestPermission(): Promise<string | null> { try { console.log("Requesting notification permission..."); const permission = await Notification.requestPermission(); console.log("Notification permission result:", permission); if (permission === "denied") { console.error("Notification permission was denied."); return null; } const token = await requestFCMToken(); console.log("FCM Token:", token); if (token) { console.log("Notification setup successful."); return token; } else { console.error("Failed to retrieve FCM token."); return null; } } catch (error) { console.error("Error requesting FCM token:", error); return null; } } 2. FCM Token Logic async function requestFCMToken(): Promise<string | undefined> { try { let permission = Notification.permission; if (permission === "default") { console.log("Requesting notification permission..."); permission = await Notification.requestPermission(); } if (permission === "granted") { console.log("Notification permission granted."); const isSupportedBrowser = await isSupported(); if (!isSupportedBrowser) { console.error("This browser does not support FCM."); return; } const registration = await navigator.serviceWorker.register("/firebase-messaging-sw.js"); console.log("Service Worker registered:", registration); const token = await getToken(cloudMessaging, { vapidKey: "YOUR_PUBLIC_VAPID_KEY_HERE", serviceWorkerRegistration: registration, }); if (token) { console.log("FCM Token:", token); localStorage.setItem("fcmToken", token); return token; } else { console.warn("No registration token available. Request permission to generate one."); return; } } else if (permission === "denied") { console.warn("Permission to notify was denied."); return; } else { console.warn("Notification permission not granted."); return; } } catch (error) { console.error("Error getting FCM token:", error); return; } } Request for Help We’d really appreciate support from anyone who’s successfully implemented FCM push notifications in a Vite PWA wrapped as an iOS app using PWA Builder. Is there something we’re missing about how iOS Safari handles push permissions in PWA mode? Could there be an issue with the service worker or the manifest setup that causes the token not to register? Any Safari-specific quirks to be aware of? Thanks in advance!
Topic: Safari & Web SubTopic: General
0
0
121
Apr ’25
Firebase Auth.onAuthStateChanged stopped working on latest version of Safari (18.3)
We have a Web Extension that uses firebase for auth. It was working fine until the latest version of Safari 18.3 got released few days ago on January 27, 2025. All of out extension versions stopped working on it; even the ones that are published on App Store. It uses FirebaseJS v9.23.0. Same version of the extension are working fine on other browsers. We use onAuthStateChanged to listen to auth related events; but it is never fired now.
1
0
360
Feb ’25
Service Worker Registration Requires WKAppBoundDomains – Any Workarounds?
"We have a multi-tenant EdTech platform serving over 1500 clients, each with a unique domain (e.g., client1.eduapp.com). We use WKWebView in a native shell. Due to WKAppBoundDomains restriction, we can't dynamically list all domains. How can we support dynamic tenants while maintaining cookie persistence" "Can Apple suggest a best practice or alternative approach for apps using WebView/PWA shell architecture across multiple client domains?" Problem: We cannot predefine all 1500 domains in WKAppBoundDomains due to limitations. As a result: Service workers fail to register, breaking PWA functionality Ex: Offline.
Topic: Safari & Web SubTopic: General
0
0
73
Apr ’25
Embed issue
When we embed some of the youtube videos are unable to load in the Mobile app but at the same time it works in Website. I need to allow it in both places. I have tried both embed and native sdk for youtube in iOS.
0
0
483
Jul ’25
Add Authorization header to WKWebView
How can i add Authorization header to a wkwebview. I checked https://developer.apple.com/documentation/foundation/nsurlrequest#1776617 which says Authorization header is a reserved http header and shouldn’t be set. I want to set it when requesting a url in wkwebview for authentication purpose?
Topic: Safari & Web SubTopic: General Tags:
2
0
385
Mar ’25