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.
General
RSS for tagExplore the integration of web technologies within your app. Discuss building web-based apps, leveraging Safari functionalities, and integrating with web services.
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
Hi all,
I need to detect if my web application (pure HTML / Javascript) is opened from:
Safari from a Mac
Safari from an iPad but by asking for the desktop version
I tried to check for many properties (including the navigator.useragent) but no difference were visible. Anyone could help me?
Thank you
After upgrading to Xcode 15.2 or above(Till Xcode 16.2), users are unable to open Site B (HTTP URL) from Site A (HTTP URL) within our Browser app when loaded in WKWebView. Clicking the link to Site B results in a spinning wheel, but the site does not load. This issue is not present when the app is built with Xcode 15.0.1.
Additionally:
Users are connected to a VPN, which is required to access the sites.
Site A and Site B are on different domains (cross-domain request).
Expected Behavior:
Clicking the link to Site B should successfully load the site with user information passed from Site A.
Current Behavior:
Clicking the link results in a spinning wheel, but Site B does not load inside WKWebView.
Technical Details:
Both Site A and Site B use HTTP (not HTTPS).
Site A and Site B have different domains (cross-domain request).
Do not use location.href for transitions. Instead, we temporarily set about:blank in an iframe and then submit data via a form to the target system’s URL within the iframe.
This approach worked in Xcode 15.0.1 but fails in Xcode 15.2 or above.
Users are connected to a VPN, which is required to access the sites.
WKWebview is not receiving navigation delegate callback for Site B
Steps to Reproduce:
Ensure the device is connected to a VPN.
Open the app (using WKWebView) built with Xcode 15.2 or above.
Load Site A (HTTP) within the app in WKWebView.
Click the link to Site B (HTTP), which should open in an iframe.
Observe that a spinning wheel appears, but Site B does not load.
Environment:
Xcode Versions Affected: 15.2 or above (issue present), 15.0.1 (no issue)
iOS Version: All iOS versions
Devices: iPad
Questions:
Has there been any change in WKWebView’s handling of HTTP URLs or VPN-related network traffic in Xcode 15.2?
Are there any new security policies, iframe restrictions, or VPN-related changes in this version that might be affecting this behavior?
Request for Assistance:
Can you confirm if this is a known issue or an intended change?
Are there any workarounds available?
I'm trying to use ES6 module imports in a Safari Web Extension, but despite enabling "type": "module" in the manifest, imports are not functioning as expected.
Specifically when working with a project structure that includes multiple directories.
A root directory containing the manifest.json and main entry point scripts
A scripts/ folder housing core functionality modules
A common/ directory for shared utilities, constants, and helper functions
A background.js file in the root that attempts to import from these various directories
When trying to import modules from the scripts/ and common/ directories into my background.js, I'm encountering complete import failures.
How can I correctly implement cross-directory module imports in Safari Web Extensions?
Hello,
I’m encountering a problem with WebSocket connections in Safari on iOS 18.1 and later when initiated from an iframe. The same implementation works perfectly in other browsers like Chrome but fails in Safari.
In Safari, the WebSocket connection fails with error message
"WebSocket connection to 'wss://MY_CONNECTION_URL' failed: The internet connection appears to be offline."
Has anyone else faced this? Is this a known limitation or bug in Safari? Any workarounds or solutions would be greatly appreciated.
Thank you!
Hello.
We are adding a Safari extension to our app and we have some questions
about communication between the app and its extension.
We have added the nativeMessaging permission to the extension so that it can communicate with the app and communication between both are doing very well.
Our question is about the security of communications between the two.
How can we be sure the native app communicates well with the correct extension?
Can the Safari extension communicate with another native app or can the native app receive messages from another extension?
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
我使用Apple Pay on the Web Interactive Demo构建了一个web应用使用的是Payment Request API方式,但是遇到了几个问题:
拉起的web Apple Pay 底部一直转圈圈无法付款,这个是什么问题?
如何设置sandbox测试付款呢?
如何异步、同步获取支付结果(后端代码获取支付结果)?demo只有await response.complete("success");前端代码获取支付结果的操作
demo网址: https://shop.wowseer.com/rsolomakhin/pr/applepay/
"The Referer header allows a server to identify referring pages that people are visiting from or where requested resources are being used. "
This header is never forwarded to server when the user is browsing the website in a WebView. This is properly maintained by other browsers but not in-app.
How do I include it?
Topic:
Safari & Web
SubTopic:
General
I'm building a macOS Google Chrome extension.
I need to be able to send messages from the Chrome extension to the macOS app
What's the set up flow?
I've heard about native messaging, but I struggle to implement it.
I've heard about XPC, but not sure JS can send messages to a macOS XPC service.
I'm using navigator.geolocation.getCurrentPosition to retrieve the users coordinates in a PWA built with Nextjs. getCurrentPosition is called by clicking on a button. If getCurrentPosition is called afterwards, the cached value is returned. On Safari, If I refresh the page, or logout, login and call getCurrentPosition again, the getCurrentPosition error callback is called with an error code 2 - POSITION_UNAVAILABLE. After around five minutes, getCurrentPosition can be called again.
Is there some kind of throttling restriction on Safari navigator.geolocation.getCurrentPosition?
Using the PaymentRequestAPI, I see this request element listed, but I can't find any description what these features could be:
sequence <ApplePayFeature> features;
https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrequestbase
https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrequestbase/4224914-features
We are currently implementing the payment flow, and for handling payment details — including card entry and validation — we are utilizing a WKWebView. The webview securely loads the payment provider’s page, ensuring sensitive information such as card numbers are entered and validated directly within the web context.
I’d like to clarify that this change has not yet been released to Production. As part of a feature enhancement to our existing payment flow, we are transitioning to a new payment vendor, SnapPay.
While trying to load the SnapPay URL embedded within an iFrame in our iOS app, I observed the following error in the Xcode console. While this error may be generic, I wanted to highlight it:
825a18 - [pageProxyID=7, webPageID=8, PID=67346] WebPageProxy::didFailLoadForFrame: frameID=24, isMainFrame=0, domain=NSURLErrorDomain, code=-999
Upon investigating, we compared the headers from our existing payment URL and SnapPay's URL, and found that SnapPay includes the following Content-Security-Policy (CSP) header:
Content-Security-Policy: frame-ancestors ...
"Content-Security-Policy" value="default-src 'self'; script-src 'self' https://hcaptcha.com https://.hcaptcha.com https://code.jquery.com https://www.gstatic.com https://code.jquery.com/jquery-3.3.1.min.js https://test.lightbox.cardx.com/v1/lightbox.min.js https://www.ssa.gov/accessibility/andi/ https://c.evidon.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' https://hcaptcha.com https://.hcaptcha.com https://fonts.googleapis.com/css https://stage.snappayglobal.com/Resource/ https://www.ssa.gov/accessibility/andi/andi.css 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' *.googleapis.com *.gstatic.com ; connect-src 'self' https://demo1.cditechnology.com https:; form-action https://hcaptcha.com https: 'self' *.ipg-online.com secure.bluepay.com https://test.api.lightbox.cardx.com https://3ds-acs.test.modirum.com/ https://demo1.cditechnology.com/; frame-ancestors https://snappaydirect-perf.fiserv.com 'self' file: https: http; frame-src .snappayglobal.com 'self' https://hcaptcha.com https://.hcaptcha.com https: https://www.google.com .ipg-online.com secure.bluepay.com https://.cardconnect.com https://test.api.lightbox.cardx.com/ https://test.lightbox.cardx.com https://paywithcardx.com/payment/auth.cgi securepayments.cardpointe.com *.cardpointe.com https://3ds-acs.test.modirum.com/ https://www.yokohamatire.com http://uat1-txt.ad.portal.texas.gov https://uat1-txt.ad.portal.texas.gov "
After multiple working sessions with the SnapPay team, we were able to confirm that when they disable CSP or remove the frame-ancestors directive, the iFrame loads successfully within our app. However, SnapPay cannot change on their CSP.
To enable the iFrame to load in the iOS app, we added the following line of code:
webView.configuration.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs").
This resolved the issue with loading the iFrame. Note: the file being loaded is a local .html file,.
Before submitting this update to the App Store, I’d like to confirm whether this usage of allowFileAccessFromFileURLs is acceptable for App Store review.
I wanted to confirm that with this change is there a security concern for WKWebview?
The app analytics tab for my account is empty. It doesn't show any bundle IDs or apps that have been launched. Is this normal for WatchOS apps?
Here's a screenshot of the tab: https://cloud.goodsmile.studio/hT5fL2HY
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
This is a rare occurrence on our site, having only detected 4 instances of it over the past few weeks, where 10s of thousands of transactions have occurred successfully.
We only call the following PaymentRequest API onClick from the <apple-pay-button>:
async function startApplePay(merchantIdentifier, amount) {
...
try {
const request = new PaymentRequest([ applePayMethod ], paymentDetails);
...
catch (e) {
// cancel, just stay here
if (e.name === "AbortError") {
if (consoleLog) console.log("Payment canceled", e);
logServer("INFO", "Payment canceled");
}
else {
handleError("Error caught: " + e.name + ", " + e.cause + ", " + e.message);
}
}
Where the "handleError" else case is what gets triggered:
Error caught: SecurityError, undefined, show() must be triggered by user activation.
All 4 instances have been from iPads, but with that small of a sample size, we can't tell whether that's relevant or coincidence. Different iOS versions, but looks like same Safari version.
Here are the 4 User Agents we've seen thus far:
Mozilla/5.0 (iPad; CPU OS 18_2_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) GSA/352.0.715618234 Mobile/15E148 Safari/604.1
Mozilla/5.0 (iPad; CPU OS 17_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) GSA/352.0.715618234 Mobile/15E148 Safari/604.1
Mozilla/5.0 (iPad; CPU OS 18_3_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/133.0.6943.33 Mobile/15E148 Safari/604.1
Mozilla/5.0 (iPad; CPU OS 18_2_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/133.0.6943.33 Mobile/15E148 Safari/604.1
by turning web content restriction setting turned on
why the facebook and twiiter havn’t blocked ???pls fix this…..
Topic:
Safari & Web
SubTopic:
General
We have a Angular/Cordova application which is internal and is deployed on 10th gen iPad's currently. After updating the iOS version to 18.2 (current patch 18.2.1) the touch events on buttons and other views forms such as div are not firing the desired typescript methods. We are getting the touch events on the screen with relevant script which uses eventListner for debugging the touchevent but it doesn't fire at relevant methods at times.
"click" can be replaced with "touchend "and "submit".
document.addEventListener('click', (event) => {
handleGlobalEvent(event, 'click');
});
Topic:
Safari & Web
SubTopic:
General
Hello, ive been dealing with this glitch all year that hasnt happened last year. When I watch a video on public safari and then it exit the video it immediately takes me to the private tab but when I go on the private tab to watch videos and exit out it takes me back to the website just like normal. Its a pretty annoying bug and I watch all my videos in the private tab because of it
Topic:
Safari & Web
SubTopic:
General
PWA works perfectly fine in safari browsers in mac but in mobile devices it
is not working it just shows, There is no internet connection. found a fix from ios release - https://developer.apple.com/documentation/safari-release-notes/safari-17_2-release-notes
but actually it is not solving the issue. in my case even it is not throwing the issue -
fix is - Fixed a cache miss bug in DOMCache that triggered service worker fetch errors. (115740959) (FB13188943)