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

Sign in with Apple JS inside an iframe
Hi everyone, My web application has two services: myapp.com and account.myapp.com. The first manages all app content, while the latter handles the authentication, with Sign In with Apple included. The tech stack is mainly composed of React, JS, and Express. We'd like to allow users to authenticate inside a dialog on some pages of myapp.com. To avoid replicating stuff from one service to another, we put an iframe inside the dialog to show the authentication standard page from account.myapp.com. Email and Facebook processes work fine, but we have the following issues with Sign in with Apple: On desktop, not Safari, a pop-up window opens when you click on the Apple button, and it works as expected. On desktop Safari, the pop-up window is blocked. We want the native Apple pop-up to show instead of a generic browser new window. On mobile, nothing happens on click Obviously, outside the iframe, everything works as expected. I can't seem to find anything related to an iframe constraint in the Sign in with Apple docs. Is this feasible?
1
0
102
May ’25
Safari web extension service worker not working after a minute
We are testing our safari web extension (https://apps.apple.com/us/app/whatfix-for-jnj-centris/id6723895659) on an iPad 7th Gen (iPadOS v - 17.4.1) I am sharing a video link where you can see the widget (named Self Help) appears on the application. However after a couple of refreshes, it vanishes. This widget is powered by the extension. We tried connecting the iPad to Mac and opened the webinspector. The extension content script sends a message to the service worker and it is expected to send back a response which it is not doing We believe it is related to an issue that has been highlighted multiple times in the developer forum - https://developer.apple.com/forums/thread/758346 We have tried using several workaorunds as suggested by peer developers in the thread but we are unable to revive the service worker once it is killed. We would like to understand from you, how to recover from this issue. Is there any workaround that we can apply to make sure that extension works fine? It would be immensely helpful if we can get on a call to explain the issue further Video Link: https://www.icloud.com/iclouddrive/0a7NR7BzDQHHU8zCHERuySBMw#RPReplay%5FFinal1740034010
1
0
372
Feb ’25
HTMLAudioElement on iOS is paused when video plays again
On iOS (iPhone or iPad) the following behaviour happens: when both an HTML video element and an HTML audio element are playing on a page, and the video source ends, and the video source is programmatically forced to play again then the system will automatically pause the audio. See following stackblitz project for a sample: https://stackblitz.com/edit/ios-audio-paused-on-video-playing?file=README.md Steps to reproduce Feel free to try with both another audio and video source, here limited by the available space in Stackblitz plan. On an iPhone/iPad device or simulator, in Safari: browse to index.html when on iPhone, press iPhone Load to force preloading video. Not needed on iPad press Play to start playing both audio and video wait until clip ends and then restarts from 0:00 Expected Audio should keep on playing and eventually loop. Actual When clip restarts from 0, audio is put to pause by the system. Further details This does not happen e.g. on Mac Safari nor on another device/browser. Also, some alternative scenarios: when HTML video element has the muted attribute, the issue disappears and audio is not paused when HTML audio element is replace with Web Audio API, the issue disappears and audio is not paused
Topic: Safari & Web SubTopic: General Tags:
0
0
327
Jan ’25
"excludeMatches" array in scripting.registerContentScripts() API is totally ignored in Safari web extensions
In a project to create a web extension for Safari, using scripting.registerContentScript() API to inject a bunch of scripts into web pages, I needed to manage a dynamic whitelist (i.e., web pages where the scripts should not be injected). Fortunately, scripting.registerContentScripts() gives you the option of defining a list of web pages to be considered as a whitelist, using the excludeMatches parameter in the directive, to represent an array of pages where the script should not be injected. Here just a sample of what I mean: const matches = ['*://*/*']; const excludeMatches = ['*://*.example.com/*']; const directive = { id: 'injected-jstest', js: ['injectedscript.js'], matches: matches, excludeMatches: excludeMatches, persistAcrossSessions: false, runAt: 'document_start' }; await browser.scripting.registerContentScripts([directive]) .catch(reason => { console.log("[SW] >>> inject script error:",reason); }); Of course, the whitelist (the excludeMatches array) is not static, but varies over time according to the needs of the moment. Everything works perfectly in Chromium browsers (Chrome, Edge, ...) and Firefox, but fails miserably in Safari. In fact, Safari seems to completely ignore the excludeMatches parameter and injects the script even where it should not. Has anyone had the same problem and solved it somehow? NOTE : To test the correctness and capabilities of the API in each browser, I created a simple repository on Github with the extension code for Chromium, Firefox and Safari (XCode project).
1
0
588
Feb ’25
Please Help: WKwebview not allowing background audio playback
I’ve been working on a personal iOS project for fun — essentially a YouTube music player, learning how background media playback works in native iOS apps. After seeing that Musi (a famous music streaming app) can play YouTube audio in the background with the screen off — I got really curious. I’ve been trying to replicate that basic background audio functionality for YouTube embeds using WKWebView. I've spent a crazy amount of time (probably 20 hours) trying to figure this out but have achieved no success. Here’s what I’ve tried so far: -Embedding a YouTube video in a WKWebView -Activating AVAudioSession with .playback and setting .setActive(true) -Adding the UIBackgroundModes key with audio in Info.plist -Adding the NSAppTransportSecurity key to allow arbitrary loads --Testing on a real device (iPhone 14, iOS 18.1 target)-- What happens: Audio plays fine in the foreground. If I exit the app and go to the lock screen quickly enough (less than 3 seconds) after pressing play, I can resume playback briefly from the lock screen — but it doesn’t automatically continue like in Musi and other apps like it. Most of the time, the audio stops when the app is backgrounded. I get this error consistently in the logs: Error acquiring assertion: <Error Domain=RBSServiceErrorDomain Code=1 "(originator doesn't have entitlement com.apple.runningboard.assertions.webkit AND originator doesn't have entitlement com.apple.multitasking.systemappassertions)" It seems like the app lacks some specific entitlements related to WebKit media playback. I don’t have AppDelegate/SceneDelegate (using SwiftUI), but can add if needed. I’m super curious how music streaming apps using youtube as a source get around this — are they doing something different under the hood? A custom player? A SafariViewController trick? Is there a specific way to configure WKWebView to keep playing in the background, or is this a known limitation? Would really appreciate any insight from folks who’ve explored this before or know how apps like Musi pulled it off. Thanks in advance!
0
0
125
Apr ’25
crossorigin="anonymous" Prevents Rendering and Canvas Access for Custom Scheme and HTTP Images on iOS 18
On iOS 18, when setting the src attribute of an tag to a custom scheme (e.g., myapp://image.png) or an HTTP URL (http://example.com/image.png), if crossorigin="anonymous" is applied, the image fails to load. Additionally, images affected by this issue cannot be drawn to a , as the browser treats them as tainted and blocks access to their pixel data. This issue did not occur in previous iOS versions and seems to be a regression in iOS 18. Steps to Reproduce: Open an HTTPS-hosted H5 page in Safari on iOS 18. Add an tag with crossorigin="anonymous" and set src to either: A custom scheme: <img src="myapp://image.png" crossorigin="anonymous"> An HTTP URL (even from the same origin): <img src="http://example.com/image.png" crossorigin="anonymous"> Observe that the image does not load. Attempt to draw the image onto a and retrieve its data: const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); const img = new Image(); img.crossOrigin = "anonymous"; img.src = "http://example.com/image.png"; // or "myapp://image.png" img.onload = () => { ctx.drawImage(img, 0, 0); try { console.log(canvas.toDataURL()); // Expect base64 image data } catch (error) { console.error("Canvas is tainted:", error); } }; Notice that the image is blocked, and any attempt to access pixel data results in a CORS error. Expected Behavior: * The image should be displayed if it is accessible under normal CORS rules. * The API should allow access to the image data unless explicitly blocked by the server’s CORS policy. Actual Behavior: The image fails to load when crossorigin="anonymous" is applied. The API does not allow access to the image data, treating it as tainted. Removing crossorigin="anonymous" allows the image to display in some cases, but this is not a viable workaround when CORS enforcement is required. Regression: Works correctly on: iOS 17 and earlier Broken on: iOS 18 Environment: Device: iPhone/iPad iOS Version: 18.0+ Browser: Safari Suggested Fix: Apple should investigate this regression and allow custom schemes and HTTP images to be correctly handled under CORS policies when crossorigin="anonymous" is set. If the source allows cross-origin requests, Safari should not block the image or its use in .
3
0
1.3k
Feb ’25
Safari no connection
Upon upgrading to 18.3 safari now says no connection cleared cookies and data. Disabled all extensions and all von and security anyone else having this issue
Topic: Safari & Web SubTopic: General
0
0
226
Jan ’25
Differences between Safari App extension and Safari Web extension.
I tried to create a content blocker for Safari and did it through Safari App Extension and Safari Web Extension. The XCode project for Safari Extension creates 2 applications: the “Main Application” (which is compiled into ".app") and the “Safari Extension” itself (which is compiled into ".appex"). If you want to create a content blocker, you must add “Content Blocker Extension” from the “File → New → Target” menu. This will be the third application in the group, which is also compiled into "*.appex". And now about differences... The first difference is that Web Extension does not have the right to work on any domains by default, unlike App Extension. For the App Extension, in the "info.plist" in the "SFSafariWebsiteAccess" section, we can remove "Allowed Domains" and in "Level" replace "Some" to "All". This is important because the content blocker should work on any domain, and not be turned on manually for each individual. This will not work in Web Extension and will have to be activated for each domain separately. The second significant difference between Web Extension and App Extension is that for security reasons it is more limited in page management. Web Extensions are supposedly focused on a common API for all browsers (Firefox, Chrome, Opera, Edge, Safari), but if I use Safari and want maximum integration with it, then I don't care about all those browsers. In this case, I don't need Web Extension. App Extension functions as a client-server even within the “Main Application”. This is quite expensive and can be fixed. You can remove the “webView” component from storyBoard and remove this files: “script.js”, “main.html”, “style.css”. After this you will get the pure storyBoard without any tinsel and communication between these layers. That’s will work perfectly because these are native Swift applications. p.s. To show the "Safari Extension" window after clicking on the icon on the toolbar, you need to change key from "Command" to "Popover" in the "info.plist" in the section "SFSafariToolbarItem" in the "Action". write your additions...
Topic: Safari & Web SubTopic: General
2
0
653
Feb ’25
IOS 18.1 wkwebview bug issue
The web page image is not fully displayed, only part of it is rendered. Switch the app to the background and then to the foreground, and the incomplete image will be rendered correctly again.
Topic: Safari & Web SubTopic: General
1
0
529
Dec ’24
Unclear interimResults Web Speech API implementation in Safari iOS (WebKit)
Hi all! I have been working on a web speech recognition service using the Web Speech API. This service is intended to work on smartphones, primarily Chrome on Android and Safari (or WebKit WebView) on iOS. In my specific use case, I need to set the properties continuous = true and interimResults = true. However, I have noticed that interimResults = true does not always work as expected in WebKit. I understand that this setting should provide fast, native, on-device speech recognition with isFinal = false. However, at times, the recognition becomes throttled and slow, yielding isFinal = true and switching to cloud-based recognition. To confirm whether the recognition is cloud-based, I tested it by disabling the internet connection before starting speech recognition. In some cases, recognition fails entirely, which suggests that requiresOnDeviceRecognition = false is being applied. (Reference: SFSpeechRecognitionRequest.requiresOnDeviceRecognition) I believe this is not the expected behavior when setting interimResults = true. I have researched the native services used by the Web Speech API on iOS devices, and the following links seem relevant: • SFSpeechRecognizer • SFSpeechRecognitionRequest.shouldReportPartialResults • SFSpeechRecognizer.supportsOnDeviceRecognition • Recognizing speech in live audio • Apple Developer Forums Discussion I found that setRequiresOnDeviceRecognition and setShouldReportPartialResults appear to be set correctly, but apparently, they do not work as expected: WebKit Source Code
0
0
364
Mar ’25
How to confidently select one type of camera on iOS
We have a web application that uses high resolution images to validate the authenticity of products. For this purpose we want to use the best camera to make the high resolution camera, on iPhone Pro devices this camera is the ultra-wide angle camera. The issue we have is how to confidently select that camera from the list returned by navigator.mediaDevices.enumerateDevices. We can't use the device ID as it change every time (and for every user), we could use the camera name but the string is translate to the device language which is very problematic. We could also just select a specific item in the list but we are not sure that the order is preserved and it makes it hard to deal with other iPhone models that don't have that ultra wide angle camera. Selecting a specific camera looks like an essential feature not only for us. What is the best option, we are looking for something that is future proof and easily scalable.
0
0
421
Dec ’24
Enable iCloud Keychain Autofill & Touch ID support for Chromium-based browsers on macOS
Hello Apple Developer Team, I would love to see iCloud Keychain Autofill and Touch ID support extended to Chromium-based browsers on macOS (such as Ecosia, Brave, or Vivaldi). Currently, Safari allows autofill of passwords using Touch ID, but when using other browsers, I have to manually copy-paste credentials from Keychain Access, which is time-consuming. Would it be possible for Apple to provide an API or framework that allows non-WebKit browsers to integrate iCloud Keychain autofill while keeping security intact? This feature would make macOS more convenient for users who prefer alternative browsers while keeping security standards high. Thanks in advance for considering this! Best regards, Kilian
0
0
328
Mar ’25
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
225
May ’25
iOS17 WebKit crash IPC::Connection::cancelReply<Messages::WebPage::PerformDragControllerAction
Who can help me, I am running into a WebKit crash on ios 17 and I cannot reproduce it in the debug environment. Crashes happen in these iOS version:17.6.1, 17.5.1, 17.7.5, 17.4, 17.7, 17.4.1, 17.7.3, 17.6 WebKit IPC::Connection::cancelReply<Messages::WebPage::PerformDragControllerAction, WebKit::WebPageProxy::performDragControllerAction(WebKit::DragControllerAction, WebCore::DragData&, std::__1::optional<WebCore::ProcessQualified<WTF::ObjectIdentifierGeneric<WebCore::FrameIdentifierType, WTF::ObjectIdentifierMainThreadAccessTraits> > > const&)::$_26>(WebKit::WebPageProxy::performDragControllerAction(WebKit::DragControllerAction, WebCore::DragData&, std::__1::optional<WebCore::ProcessQualified<WTF::ObjectIdentifierGeneric<WebCore::FrameIdentifierType, WTF::ObjectIdentifierMainThreadAccessTraits> > > const&)::$_26&&) (in WebKit) WebKit WTF::Detail::CallableWrapper<WebKit::AuxiliaryProcessProxy::sendMessage(WTF::UniqueRef<IPC::Encoder>&&, WTF::OptionSet<IPC::SendOption>, std::__1::optional<IPC::ConnectionAsyncReplyHandler>, WebKit::AuxiliaryProcessProxy::ShouldStartProcessThrottlerActivity)::$_1, void, IPC::Decoder*>::call(IPC::Decoder*) (in WebKit) WebKit IPC::Connection::cancelAsyncReplyHandlers() (in WebKit) WebKit IPC::Connection::invalidate() (in WebKit) WebKit WebKit::AuxiliaryProcessProxy::shutDownProcess() (in WebKit) WebKit WebKit::WebProcessProxy::shutDown() (in WebKit) WebKit WebKit::WebProcessProxy::processDidTerminateOrFailedToLaunch(WebKit::ProcessTerminationReason) (in WebKit) WebKit WebKit::WebProcessProxy::didClose(IPC::Connection&) (in WebKit) WebKit IPC::Connection::dispatchMessage(std::__1::unique_ptr<IPC::Decoder, std::__1::default_delete<IPC::Decoder> >) (in WebKit) WebKit IPC::Connection::SyncMessageState::ConnectionAndIncomingMessage::dispatch() (in WebKit) WebKit WTF::Detail::CallableWrapper<IPC::Connection::SyncMessageState::processIncomingMessage(IPC::Connection&, std::__1::unique_ptr<IPC::Decoder, std::__1::default_delete<IPC::Decoder> >&)::$_5, void, >::call() (in WebKit) JavaScriptCore WTF::RunLoop::performWork() (in JavaScriptCore) JavaScriptCore WTF::RunLoop::performWork(void*) (in JavaScriptCore) CoreFoundation ___CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ (in CoreFoundation) CoreFoundation ___CFRunLoopDoSource0 (in CoreFoundation) CoreFoundation ___CFRunLoopDoSources0 (in CoreFoundation) CoreFoundation ___CFRunLoopRun (in CoreFoundation) CoreFoundation _CFRunLoopRunSpecific (in CoreFoundation) GraphicsServices _GSEventRunModal (in GraphicsServices) UIKitCore -[UIApplication _run] (in UIKitCore) UIKitCore _UIApplicationMain (in UIKitCore) homework main (in homework:main.m:39) dyld start (in dyld)
0
0
496
Mar ’25
iOS alters the URL given to share extension
I'm building a share extension for my app when I noticed something weird. When I open a mobile URL (URLs with "m." like m.randomsite.org) on iOS using a browser (I'm using Safari & Chrome) and then try to share it, what will be share is the URL without the "m." (i.e. randomsite.org) This messes up with my app since I'm not getting the real URL that I'm viewing using the browser. I don't think it has something to do with my app since even selecting "Copy" when sharing will result in the altered URL too. So far this is happening on both iOS 17 and 18. Does someone know whether this is a bug from iOS or not? I don't think this is a Safari bug since I noticed the same thing on Chrome as well
3
0
447
Jan ’25
Unable to Launch Safari Driver
I am encountering an issue where we are unable to run or launch Safari Driver in our automation tests using macOS. When attempting to run safaridriver -p 8888 from the terminal, we receive the following error message: ERROR: safaridriver could not launch because it is not configured correctly or you need to authenticate. Re-run safaridriver(1) and pass the '--enable' flag to configure and/or authenticate. For more information, consult the safaridriver(1) man page. Despite running sudo safaridriver --enable as an administrator (even as root), the issue persists. I’ve searched through various online forums and GitHub repositories but couldn’t find a working solution. Some references are: Apple Developer Forum Thread: https://forums.developer.apple.com/forums/thread/762321 GitHub Issue: https://github.com/SeleniumHQ/selenium/issues/11381
Topic: Safari & Web SubTopic: General Tags:
3
0
524
Mar ’25
Public Contact Info
I wanted to create a public contact card so when my clients click a button on my website it traverses them through the iMessage API and instantly adds a contact card with photo and name as a background task. If there is implications my next question was going to be if there is a possible way to create a public contact card where for example I could redirect a client to iMessage and when starting a new conversation if they type in a name it pops up instead of needing to utilize a phone number? I am trying to explain my thought process as much as possible but I have been typing for hours. In simple terms is there a possibility to create a public contact card that can be accessed or texted by anyone who types in a name into new conversation bar?
1
0
511
Dec ’24
iOS
Hi i Need help, my phone keeps getting all these updates and rapid security features on it at first I thought it was just the normal updates but i started to pay more attention and it's not. i have the beta updates on my phone iPad and Apple Watch but when I go in to see if it in my updates like apple said to do it wasn't in there. Also all my apps are developer apps I'm not able to get normal ones and if I can the next time I go on it it's not how it was. I really don't know what to do, I've gotten 2 new phones because I thought it was just bad software but I researched a lot and I think someone it hacking me. everytime I look something up on safari it takes me to a whole other website or its completly altered and doesnt look like it usually does. Someone please help me lmao I actually think I'm going to lose my mind.
Topic: Safari & Web SubTopic: General
1
0
306
Mar ’25