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

Certain Docusign Url does not load on IOS 17.5.1 but works on 17.4.1
Hello, We are seeing a behavior where we find that a certain Url (docusign signing ceremony which is a webpage) works fine on Ipad with OS version 17.4.1 but NOT on Ipads with 17.5.1. This behavior is exactly same if I use chrome browser, safari browser or our custom application (Maui Application and we host the signing ceremony) I am not sure but since the OS is the difference here just wondering if there can be a potential issue here. or its still the cert issue from the provider. NET::ERR_CERT_AUTHORITY_INVALID - is the error shown in Chrome and Safari shows "Safari can't open the page because it could n't establish a secure connection t the server".
Topic: Safari & Web SubTopic: General Tags:
0
0
518
Aug ’24
Looking for feedback on a Swift dev tool idea
I know this is a more abnormal question to ask on this forum but I really would like to gauge feedback from a community of other Swift developers on an idea. A colleague and I are seriously considering building a open-source web based SwiftUI component catalog that feature a collection of prebuilt modular components very similar to Shadcn for those of you who have worked in React but for SwiftUI where you can also contribute your own SwiftUI elements. Im curious if this would be something iOS/Swift devs would be possibly interested in and would love to hear thoughts on this idea. This is not a component library as Xcode technically has one thats built in, but rather fully built out SwiftUI elements such as UIs that use glass morphism for macOS, calendars for iOS apps, charts, etc.
1
0
542
Aug ’24
How can I create a long lasting cookie in Safari?
I have a tipical web app setup where a front end SPA app (Blazor WASM) is communicating with a backend (.NET API). I control both environments and they are hosted at following locations: SPA: https://www.client-portal.company.com API: https://www.api.client-portal.company.com I use cookie authentication to authenticate users via the invite/confirmation code process. The problem is that I want to make a long lasting authentication cookie but Safari (and ONLY Safari) keeps setting the cookie to expire in 7 days. Now I am aware of the Webkit's tracking prevention policies defined here: https://webkit.org/tracking-prevention/#intelligent-tracking-prevention-itp However I'm either unable, or not smart enough to understand the first vs. second vs. third party logic defined there. In my head, the setup I have is the first party setup and I would imagine that many companies have a similar hosting setup/naming. I cannot place the API under the same URL as the front end app unless I do some reverse proxy YARP setup which seems like an overkill just to satisfy the policy of one browser. Am I missing something obvious here? Can you please tell me how/where/what URL should I host my SPA/API in order for the cookie to persist beyond 7 days? For the reference the cookie being created has the following properties: DOMAIN: client-portal.company.com HOSTONLY: true SECURE: true HTTPONLY: true SAMESITE: Strict PATH: / Any help would be greatly appreciated. Thanks!
Topic: Safari & Web SubTopic: General
0
1
261
Aug ’24
Sign in with Apple for webapp
Please someone help me.... I have been struggling for quite a while now configuring everything for the flow of using Apple SSI for my web app. I have finally managed to configure a nginx reverse-proxy for development experience. Creating and working correctly with all the values from Apple Developer Console which involves the identifiers, keys and Id's. My issue is now, that everything works for my signin flow. SO when I sign in using my AppleID which is also connected to the developer account I get signed in and Apple signin RESTAPI returns a JWT with my email. But when everyone else signs in with their AppleID's the returned JWT doesn't have the emails. And I know that Apple only gives the email first time user signs in - but that's is not the issue. Here is my code (using bun.js, Elysia, Arctic): import Bun from 'bun'; import { Apple, type AppleCredentials, type AppleTokens } from 'arctic'; import type { BaseAuthAccountInfo } from './type'; import { createPrivateKey } from 'crypto'; import { sign, decode } from 'jsonwebtoken'; const { APPLE_CLIENT_ID, APPLE_TEAM_ID, APPLE_KEY_ID, APPLE_CLIENT_SECRET, APPLE_CLIENT_SECRET_JWT, } = Bun.env; type AppleReponseJWTPayload = { iss: string; aud: string; exp: number; iat: number; sub: string; at_hash: string; email: string; email_verified: boolean; auth_time: number; nonce_supported: boolean; }; const credentials: AppleCredentials = { clientId: APPLE_CLIENT_ID!, teamId: APPLE_TEAM_ID!, keyId: APPLE_KEY_ID!, certificate: -----BEGIN PRIVATE KEY-----\n${APPLE_CLIENT_SECRET}\n-----END PRIVATE KEY-----, }; const apple = new Apple(credentials, 'https://intellioptima.com/api/v1/aus/auth/apple/callback'); const appleAuthUrl = async (state: string) => { const appleUrl = await apple.createAuthorizationURL(state); appleUrl.searchParams.set('response_mode', 'form_post'); appleUrl.searchParams.set('scope', 'email'); return appleUrl; }; const getAppleTokens = async (code: string) => { console.log('Authorization code:', code); const appleResponse = await apple.validateAuthorizationCode(code); console.log('Apple Response:', appleResponse); return appleResponse; }; const getAppleAccount = async (tokens: AppleTokens): Promise => { const token = generateJWTApple(); const response = await fetch('https://appleid.apple.com/auth/token', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: new URLSearchParams({ client_id: credentials.clientId, client_secret: token, grant_type: 'refresh_token', refresh_token: tokens.refreshToken!, }).toString(), }); if (!response.ok) { throw new Error('Failed to fetch user info'); } const appleResponse = await response.json(); console.log('APPLE_RESPONSE', appleResponse); const decodedUser = decode(appleResponse.id_token) as AppleReponseJWTPayload; if (!decodedUser || !decodedUser.email) { throw new Error('The user does not have an email address.'); } return { id: decodedUser.sub as string, username: decodedUser.email.split('@')[0], email: decodedUser.email!, name: decodedUser.email.split('@')[0], emailVerified: decodedUser.email_verified ?? false, iconUrl: `https://robohash.org/${decodedUser.email.split('@')[0]}.png`, }; }; function generateJWTApple() { const MINUTE = 60; const HOUR = 60 * MINUTE; const DAY = 24 * HOUR; const MONTH = 30 * DAY; const tokenKey = `-----BEGIN PRIVATE KEY-----\n${APPLE_CLIENT_SECRET_JWT!.replace(/\\n/g, '\n')}\n-----END PRIVATE KEY-----`; const privateKey = createPrivateKey(tokenKey); const now = Math.ceil(Date.now() / 1000); const expires = now + MONTH * 3; const claims = { iss: APPLE_TEAM_ID, iat: now, exp: expires, aud: 'https://appleid.apple.com', sub: 'com.intellioptima.aichat', }; return sign(claims, privateKey, { header: { kid: APPLE_KEY_ID, alg: 'ES256', }, }); } export { apple, appleAuthUrl, getAppleAccount, getAppleTokens }; What could be the issue??? I really hope someone out there can provide me with some details on what is going on <33333
1
0
794
Aug ’24
ios17 remember full screen status and playsinline not working
I encountered an issue when playing WebRTC video using the H5 video tag on an iPhone with iOS 17. After performing the following operations, the video automatically plays in fullscreen mode: Create the video tag, specify the playback source, and set the autoplay attribute to true. Call the API to enter fullscreen playback mode. Exit fullscreen by swiping with a finger. Stop playback and destroy the video tag. Repeat step 1; at this point, the video does not correctly default to inline playback but instead automatically plays in fullscreen. It seems as if the system has cached the previous fullscreen state, even though I have exited fullscreen, and the same result occurs with different browsers. I have set the 'playsinline' and 'webkit-playsinline' attributes for the video tag. Anyone encountered the same issue? I would appreciate any solutions that can be shared.
0
0
532
Aug ’24
Needed: Apple Sign-In JWT Not Returning Email for Users Except Using My AppleID
Hi everyone, I've been working on integrating Apple Sign-In with my web app and have hit a roadblock that I can't seem to resolve. I've successfully set up an Nginx reverse-proxy for development purposes enabling SSL/TLS to provide HTTPS. I have configured everything using the values from the Apple Developer Console, including identifiers, keys, and IDs. The sign-in flow works perfectly when I use my Apple ID (which is linked to my developer account). The Apple Sign-In REST API returns a JWT with my email, as expected. However, when other users sign in with their Apple IDs, the returned JWT doesn't include their email addresses. I am aware that Apple only provides the email on the first sign-in, but this doesn't seem to be the issue here. Below is the relevant code I'm using (Bun.js, Elysia, Arctic): import Bun from 'bun'; import { Apple, type AppleCredentials, type AppleTokens } from 'arctic'; import type { BaseAuthAccountInfo } from './type'; import { createPrivateKey } from 'crypto'; import { sign, decode } from 'jsonwebtoken'; const { APPLE_CLIENT_ID, APPLE_TEAM_ID, APPLE_KEY_ID, APPLE_CLIENT_SECRET, APPLE_CLIENT_SECRET_JWT, } = Bun.env; type AppleReponseJWTPayload = { iss: string; aud: string; exp: number; iat: number; sub: string; at_hash: string; email: string; email_verified: boolean; auth_time: number; nonce_supported: boolean; }; const credentials: AppleCredentials = { clientId: APPLE_CLIENT_ID!, teamId: APPLE_TEAM_ID!, keyId: APPLE_KEY_ID!, certificate: `-----BEGIN PRIVATE KEY-----\n${APPLE_CLIENT_SECRET}\n-----END PRIVATE KEY-----`, }; const apple = new Apple(credentials, 'https://intellioptima.com/api/v1/aus/auth/apple/callback'); const appleAuthUrl = async (state: string) => { const appleUrl = await apple.createAuthorizationURL(state); appleUrl.searchParams.set('response_mode', 'form_post'); appleUrl.searchParams.set('scope', 'email'); return appleUrl; }; const getAppleTokens = async (code: string) => { console.log('Authorization code:', code); const appleResponse = await apple.validateAuthorizationCode(code); console.log('Apple Response:', appleResponse); return appleResponse; }; const getAppleAccount = async (tokens: AppleTokens): Promise<BaseAuthAccountInfo> => { const token = generateJWTApple(); const response = await fetch('https://appleid.apple.com/auth/token', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: new URLSearchParams({ client_id: credentials.clientId, client_secret: token, grant_type: 'refresh_token', refresh_token: tokens.refreshToken!, }).toString(), }); if (!response.ok) { throw new Error('Failed to fetch user info'); } const appleResponse = await response.json(); console.log('APPLE_RESPONSE', appleResponse); const decodedUser = decode(appleResponse.id_token) as AppleReponseJWTPayload; if (!decodedUser || !decodedUser.email) { throw new Error('The user does not have an email address.'); } return { id: decodedUser.sub as string, username: decodedUser.email.split('@')[0], email: decodedUser.email!, name: decodedUser.email.split('@')[0], emailVerified: decodedUser.email_verified ?? false, iconUrl: `https://robohash.org/${decodedUser.email.split('@')[0]}.png`, }; }; function generateJWTApple() { const MINUTE = 60; const HOUR = 60 * MINUTE; const DAY = 24 * HOUR; const MONTH = 30 * DAY; const tokenKey = `-----BEGIN PRIVATE KEY-----\n${APPLE_CLIENT_SECRET_JWT!.replace(/\\n/g, '\n')}\n-----END PRIVATE KEY-----`; const privateKey = createPrivateKey(tokenKey); const now = Math.ceil(Date.now() / 1000); const expires = now + MONTH * 3; const claims = { iss: APPLE_TEAM_ID, iat: now, exp: expires, aud: 'https://appleid.apple.com', sub: 'com.intellioptima.aichat', }; return sign(claims, privateKey, { header: { kid: APPLE_KEY_ID, alg: 'ES256', }, }); } export { apple, appleAuthUrl, getAppleAccount, getAppleTokens }; I would greatly appreciate any insights or suggestions on what might be going wrong. I'm at a loss, and any help would be invaluable! Thanks in advance! <3333
1
0
1.1k
Aug ’24
Safari only browser to block GET requests to our dockerized web application
Hi, We are running a React application as a pod on a Kubernetes cluster with an Nginx Ingress, which needs to make requests to a server running Apache. On Safari only (all other browsers are fine) and on all browsers on iOS, the React application is unable to get a response from the Apache server. We can see the server is responding and we can see the pod is getting the responses too, they are all logged as 200 on both sides. Here is what we are able to see in the developer tools on Safari: The also console logs "Failed to load resource: The network connection was lost." We have tried solutions such as this and this, as well as many other solutions we could find on various forums but nothing worked so far. I repeat myself here: this only happens on Safari on desktop and on all browsers on iOS, other browsers such as Chrome and Firefox are unaffected. Has anyone ever ran into a similar issue or have an idea about how to fix this?
1
1
633
Aug ’24
Inconsistent Memory Management in Safari on iPhone 12 Pro
We have tested on iPhone 12 Pro and observed that Safari allowed approximately 1.5GB of RAM usage. Page refreshes when trying to allocate more memory. After performing a hard reset and erasing all content, I noticed that Safari allowed approximately 3GB of RAM usage for our webpage. However, after 2-3 days, the maximum allowable RAM usage in Safari decreases to about 1.5GB. Once 1.5GB limit is reached, the system reloads the page. To further investigate, I performed another hard reset on my device, and once again, Safari allowed around 3GB of RAM usage. Additionally, we tested this on iPhone 15 Pro and 15 Pro Max, where the RAM limitation in Safari is consistently around 3GB (page is reloading after reaching 3GB). Could you please clarify why the memory limit fluctuates after hard reset? Is there any specific setting or flag within Safari or iPhone that controls the maximum RAM usage, which could be causing this behavior? I also posted the issue there: https://bugs.webkit.org/show_bug.cgi?id=277848 I would appreciate any guidance or potential solutions to this issue. If this is a known limitation or issue, understanding the root cause would be extremely helpful. Thank you for your attention to this matter. Model Name: iPhone 12 Pro iOS Version: 17.5.1 Capacity: 128gb
1
1
811
Aug ’24
Flutter Webview permission issues
nw_application_id_create_self NECP_CLIENT_ACTION_GET_SIGNED_CLIENT_ID [80: Authentication error] Failed to resolve host network app id Invalidating grant <invalid NS/CF object> failed The above rights issue comes up NSAppTransportSecurity NSAllowsArbitraryLoads This authority has already been set up
Topic: Safari & Web SubTopic: General
0
1
1.2k
Aug ’24
In iOS 18, browser.tabs.getSelected returns 'Undefined' for the Safari iOS App Extension
I was able to obtain the URL in iOS 17+ and lower versions by using the browser.tabs.getSelected method in background.js, and it was successful. I upgraded to iOS 18 and now this function is returning 'Undefined'. As a result, the Safari Extension feature is broken. Is this browser.tabs.getSelected no longer available or deprecated as of iOS 18? As an alternative, browser.tabs.query functions. is a useful substitute for that.
3
0
801
Aug ’24
push notification on safari not work.
I am developing a web application with PWA and Vue.js (javascript). I would like to add a Web Push notification function, so I referred to the following site to execute notification permission and received the response result "granted". https://developer.mozilla.org/ja/docs/Web/API/Notification/requestPermission_static I have tried both requestPermission(); and requestPermission(callback). However, in this state, an error occurred when subscribing to pushManager, and push notification registration could not be executed. As a workaround, I found that by changing the notification permission setting from the OS Settings > Notification screen to Off and On, subscribing to pushManager was successful. Is there anything else I need to implement other than calling requestPermission(); or requestPermission(callback) to make it executable without following the workaround steps? In addition, this phenomenon was not occurring around the beginning of June 2024, and it was confirmed that the problem occurred as of August 5th. The confirmed OS and models are as follows. iOS 17.4 Mobile Safari iPad iOS 17.3 Mobile Safari iOS 15.8 Mobile Safari iOS 17.3 Mobile Safari iPad iOS 15.8 Mobile Safari iPad iOS 17.4 Mobile Safari iOS 16.7 Mobile Safari
0
0
727
Aug ’24
iOS Safari extension background doesn't show any console logs
My Safari extension (based off a Chrome one) is working fine in a Mac OS Safari version but when I try to run it on the phone I'm experiencing some bugs in communication with the backend, which I cannot troubleshoot because when I click on Develop > my_phone > Safari Extension Background Content I don't see any logs in there. Where the background logs are supposed to appear? How can I find them? I don't see them in Xcode either.
2
0
1.8k
Aug ’24
On iOS18 Beta 3 Version, Unable to load a javascript file from Salesforce in the WebView.
On iOS18 Beta 3 Version, Unable to load a javascript file from Salesforce in the WebView. When trying to load a javascript file (static resource) from Salesforce in WebView. It's throwing below mentioned error. Error: Refused to execute https://*.my.salesforce.com/resource/1722959303321/T1C_Base__DealsLib/src/ace-lib.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type. The error is only happening after upgrading to iOS18 Beta. It was working fine before. Expected Behaviour: File should be loaded successfully Actual Behaviour: File is not loading Xcode Version: 15.3
Topic: Safari & Web SubTopic: General Tags:
0
0
568
Aug ’24
Safari Extension iOS18: Image are not loading.
Hi, I'm experiencing an issue with my Safari extension on iOS 18. When trying to access images using browser.runtime.getURL(), it doesn't work as expected. The same code works on iOS 17 and earlier versions. Here's my manifest file and code snippet. "web_accessible_resources": [ { "resources": [ "html/*.html", "images/*.png", "images/*.gif", "images/*.svg", "json/*.json", "fonts/*.ttf", "css/*.css" ], "matches": [ "<all_urls>" ] }, "images/fs_loading.svg", "images/status_protected.svg", "images/safe_check_icon.svg" ] `var status_ok_svg = browser.runtime.getURL("images/status_protected.svg");` Note: Image all are added in Images folder only
1
0
882
Aug ’24
contenteditable + getBoundingClientRect() does not return the correct result.
If a sufficiently long text in an HTML tag leads to a text wrap, the calculated values (y and width) of getBoundingClientRect for characters or words directly after the wrap are not correct, if the element or one of a parent is contenteditable="true" the y value has the value as if it were still before the break the width value spans the entire width, Here a code that reproduces this failure: https://stackblitz.com/edit/vitejs-vite-jwghts?file=src%2Fmain.ts,src%2FcalcLetterRects.ts,src%2Fstyle.css
1
0
647
Aug ’24
Authenticate Safari Extension with Web Application
Hi :) I am building browser extension that is integral part of our bigger web service. Since it needs to authenticate with our web application to use its api. Extension was originally developed for the Chrome and there everything works perfectly fine without any additional work. When I am authenticated on the platform I am able to use extension on any website and while making api calls from extensions background script to the platform backend the cookie is automatically attached to it. I just do fetch without any headers etc everything works out of the box. Then I used the xcrun safari-web-extension-converter and converted the chrome extension to safari. I tested local build as well as build submitted to test flight and none of these seems to work the same way as on chrome. Meaning I am not able to make this safari extension pick up the cookie from my web application. I found that if I disable: prevent cross-site tracking in Safari Settings it works. But obviously its not a solution for the normal users. Can anyone help me to make it work? I am not very familiar with apple dev environment.
3
0
950
Aug ’24