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

General Documentation

Posts under General subtopic

Post

Replies

Boosts

Views

Activity

How to modify the global window object in Safari Extensions?
I want use the Safari Extension to decorate the window.fetch function, But No matter how I try, I can't get the fetch function to execute correctly. I was going through the documentation: https://developer.apple.com/documentation/safariservices/using-injected-style-sheets-and-scripts and found this sentence: "Injected scripts have an implied namespace — you don’t have to worry about your variable or function names conflicting with those of the website author, nor can a website author call functions in your extension. In other words, injected scripts and scripts that you include in the webpage run in isolated worlds, with no access to each other’s functions or data." Does this mean I can't modify the window object in the content script just like a Chrome extension does with the webpage? BTW, In chrome I use chrome.scripting.executeScript API, and in plasmo I just use world: "MAIN" content script's config to achieved this feature.
1
0
390
Feb ’25
Clipboard API `writeText()` fails in Safari due to User Activation API, but works in Firefox and Chrome
Hi, I'm encountering an issue with the Clipboard API's writeText() method in Safari. It throws a NotAllowedError even when triggered by a user action (selecting an option from a <select> element). Is this expected? This issue seems specific to Safari, as the same code works perfectly in Firefox and Chrome. Perhaps I should send feedback to Apple, but I'd like to post it here first in case I misunderstand something. Problem In Safari, when I try to copy text to the clipboard using navigator.clipboard.writeText() within an input event listener attached to a <select> element, it fails with the following error: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. Environment Safari 18.2 (20620.1.16.11.8) Technology Preview 210 macOS Sequoia 15.2 (24C101) Example I've created a minimal reproducible example on CodePen: https://codepen.io/mshibanami/pen/LEPdxXZ Here's the relevant JavaScript code from the example: selectElement.addEventListener('input', async (event) => { const selectedText = event.target.options[event.target.selectedIndex].text; try { await navigator.clipboard.writeText(selectedText); alert(`Text copied to clipboard: ${selectedText}`); } catch (err) { alert('Failed to copy text to clipboard: ' + err); } }); Firefox and Chrome handle this code without any issues, successfully copying the text to the clipboard, but not Safari. Possible Cause I suspect this issue might be related to WebKit's User Activation API. It seems like Safari is not correctly recognizing the input or change event on a <select> element as a valid user activation for the Clipboard API, even though it is initiated by a user gesture. Questions Is this behavior unexpected? Should Safari allow the Clipboard API to work in this context? (Technically, this might be expected as of now, as such events are not explicitly described in https://webkit.org/blog/13862/the-user-activation-api/.) Any insights or suggestions would be greatly appreciated. Thanks!
1
2
1.4k
Jan ’25
App clips - Launch appclip safari in html page inside safari on a button click. I have the testflight app
Subject: Help Needed with App Clip Implementation Hi Team, I need some assistance with implementing App Clip behavior in safari and also experimenting using TestFlight app. Default App Clip URL: https://appclip.apple.com/id?p=com.jey.ppclient-prod.appclip Website for App Clip Integration: https://appclip-sand.vercel.app/customer Current Behavior: Default App Clip URL: When I embed the default App Clip URL in an HTML tag like below: Launch App Clip it does launch the App Clip. but it says the appclip not supported in your region I've already added this configuration under Local Experience in App Store Connect. Website Integration: I’ve registered the site using the Advanced App Clip Experience. The apple-app-site-association file is in place. When I visit the site, the App Clip does launch as expected. What I Need Help With: I want to launch the App Clip from a custom button click, using either: The default App Clip URL, or The website URL (e.g., https://appclip-sand.vercel.app/customer) with additional query parameters like userId or sessionId. Is there a supported way to achieve this—perhaps through JavaScript or a specific tag setup that works with either Local or Advanced Experience? Your guidance would be greatly appreciated. Thanks, Jey
1
0
98
Jun ’25
Safari Web Extension Handle Concurrency
We are building a Safari web extension utilising native messaging, to send messages to the Swift native part of the app. We sometimes experience, that the beginRequest handler is executed multiple times, at the same time. We have a special part of the code in the handler, that must be run only once. Because it uses NS defaults storage, and also because it calls our servers. We have tried to use a serial dispatch queue, as well as other locking and mutex techniques, to no success. We suspect that the instances of the handler are isolated in a way, that these locks don’t work (maybe they don’t share memory?). But we are not sure. When looking at os_logs from the handlers, they all share the same PID. Has anyone experienced anything similar and can shed some light on what's going on?
1
0
264
Feb ’25
WebKit crash on iOS 18.3
After the official release of iOS 18.3, our app has collected numerous identical crash logs. These crashes occurred on different devices, but the common denominator is that they all, and only, happened on iOS 18.3. Based on the stack trace, the crash is happening internally within WebKit. The details are as follows: Crashed: com.apple.main-thread 0 WebCore 0x721f9c + 28 1 WebCore 0x15b6924 + 11356 2 WebCore 0x15b174c + 1008 3 WebCore 0x1776e4 + 292 4 WebCore 0x17753c WebCore::SerializedScriptValue::deserialize(OpaqueJSContext const*, OpaqueJSValue const**) + 100 5 WebKit 0x530b28 + 92 6 WebKit 0x5a0d2c + 176 7 WebKit 0x9e74b0 + 956 8 WebKit 0xe43d58 + 392 9 WebKit 0x886ac + 272 10 WebKit 0x88940 + 44 11 WebKit 0x87a74 + 252 12 WebKit 0x875ec + 576 13 JavaScriptCore 0x2f8a48 ***::RunLoop::performWork() + 204 14 JavaScriptCore 0x2f895c ***::RunLoop::performWork(void*) + 36 15 CoreFoundation 0x73f4c CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION + 28 16 CoreFoundation 0x73ee0 __CFRunLoopDoSource0 + 176 17 CoreFoundation 0x76b40 __CFRunLoopDoSources0 + 244 18 CoreFoundation 0x75d3c __CFRunLoopRun + 840 19 CoreFoundation 0xc8284 CFRunLoopRunSpecific + 588 20 GraphicsServices 0x14c0 GSEventRunModal + 164 21 UIKitCore 0x3ee674 -[UIApplication _run] + 816 22 UIKitCore 0x14e88 UIApplicationMain + 340 23 18Birdies 0x1b2d3c main + 14 (main.m:14) 24 ??? 0x1ac161de8 (Missing)
Topic: Safari & Web SubTopic: General Tags:
1
0
584
Feb ’25
min-height not interpreted preoperly after upgrading iOS 18.4
I have a UI application built with the Vue framework, using Vuetify for the UI components. There's a div with the class v-application--wrap, which is provided by Vuetify. This class internally includes the following style rule. .v-application--wrap { backface-visibility: hidden; display: flex; flex: 1 1 auto; flex-direction: column; max-width: 100%; min-height: 100vh; position: relative; } The pages were rendering correctly up to version 18.3, but after upgrading to version 18.4, we encountered layout issues related to height. Upon investigation, we discovered that the min-height property was no longer being interpreted or applied correctly. Replacing min-height with height resolved the issue, and the pages began loading as expected. Any insights into why this behavior is occurring would be greatly appreciated.
1
0
161
Jun ’25
Quic Protocol
Hi all, Managing Safari usage in an enterprise environment and I’m looking for ways to disable or restrict the QUIC protocol to enforce network-level security policies (e.g., content filtering). Does Safari offer any settings to disable QUIC, or is there a known workaround to prevent Safari from using it? Appreciate any insights or guidance.
Topic: Safari & Web SubTopic: General
1
0
167
Jun ’25
iOS/iPadOS 18+: Camera Video Recorded via Browser Appears Flipped or Upside Down
I'm encountering an issue with front camera video recordings via browser (Safari/Chrome) on devices running iOS/iPadOS 18 and above: On iPad, the recorded video appears upside down. On iPhone, the recorded video is rotated 90 degrees. The rear camera functions correctly without orientation issues. This problem seems specific to browser-based recordings, as the native Camera app records videos with the correct orientation. Has anyone else experienced this behavior? Is there a known workaround or fix? The preview while recording is fine, the recorded video is oriented incorrectly.
1
1
192
Jun ’25
A single TS file is downloaded repeatedly in Safari on iOS 18.4 and iOS 18.5
Our team has implemented a video player using the HTML5 tag, but we have identified an issue with loading media files. While Safari on iOS 18.0 downloads each TS file listed in the m3u8 playlist correctly, on iOS 18.4 and 18.5, a single TS file is downloaded repeatedly. Our statistics indicate that approximately six requests are made per second for the same TS file. Is this intended behavior? If not, are there any known workaround or solutions? If this issue is due to the OS or browser, are there any plans to address it in iOS 18.6 or a future release? Could you advise on the proper channel to submit a bug report for this issue? Similar issues have been reported in the past with WKWebView. The previous thread is here: https://developer.apple.com/forums/thread/784134
Topic: Safari & Web SubTopic: General
1
2
509
Jun ’25
Unable to register or use passkeys via Safari Web Extension
There does not appear to be any way to use or create iCloud passkeys with a Safari Web Extension, either using the navigator.credentials API in an extension origin webpage such as the popover, or using the AuthenticationServices framework in the SafariWebExtensionHandler. I've setup an associated domain for my plugin, and I know it works for the host application. But I get errors trying to do so in the web extension target. createCredentialRegistrationRequests results in the following error: Domain=com.apple.AuthenticationServices.AuthorizationError Code=1004 "Application with identifier <ID> is not associated with domain <RPID> The other problem, assuming the entitlement works correctly for the web extension, is that there is no NSWindow to use as the presentation target from the SafariWebExtensionHandler. Trying to use the navigator.credentials.create JS API (which is the preferred method, frankly, in a web extension) results in the following error: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. Chrome has a great solution for this that I believe should be adopted by Safari. If an extension has host permissions for a relying party it wants to claim, or if it has an associated domain entitlement for it, webauthn operations should be allowed.
1
1
445
May ’25
iOS 18 Safari and WKWebview, "NotSupportedError" issue when playing videos
WKWebview of iOS 18 includes Safari browser. When playing videos, some videos show "NotSupportedError: The operation is not supported.", but it is normal on iOS15 devices. The video link is as follows. Even if it is downloaded and referenced locally in HTML, it cannot be played, so it is ruled out that it is a network problem. https://ydtj-adas.oss-cn-shanghai.aliyuncs.com/e6yun.com/exam/exam/a35447b496b94e5e9a6aab27d62c867e.mp4 cannot be played https://ydtj-adas.oss-cn-shanghai.aliyuncs.com/e6yun.com/exam/exam/82d970957a7d4e8d88c13cd101143005.mp4 can be played
1
0
171
May ’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
340
Feb ’25
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
105
May ’25
TestFlight deeplink
I can open an app (e.g. tiktok) from a website of mine by using the deeplink “tiktok://open”, if the app is installed on my iphone. What's the deeplink to launch TestFlight? Thanks in advance
Topic: Safari & Web SubTopic: General
1
0
201
Apr ’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
230
May ’25