I'm tasked with securing a Safari browser extension that my organization created. It is using WebExtensions and has been launched across various browser extension stores, including Safari. I've searched for many hours on this and find very very little information on how to secure it. (Pretty much just https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy.) Is there anything more extensive/comprehensive? I'll be dealing with Safari Desktop as well as Safari iOS.
By comparison, when looking for resources for securing the Firefox version of the extension, I found https://extensionworkshop.com/documentation/develop/build-a-secure-extension/, which I think is a great resource. Some of that content applies to Safari, but it's hard to know to what extent. I'll need to secure Safari web and Safari mobile (i.e. iOS), but for now I'm focused on web. (But if you have anything on mobile, then please let me know also.)
Thank you!
Safari
RSS for tagSafari is the web browser developed by Apple and built into all Apple devices.
Posts under Safari tag
193 Posts
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
The following icon has been introduced in Safari's address bar for iOS 18:
I’d like to use it in my app to guide users on how to enable my Safari extension, but I couldn’t find it in SF Symbols beta 6.0 (99).
Is this because it’s still in beta and will be available for third-party use later, or is it a private icon that only Apple can use? I hope I just overlooked something.
I have noticed that tabs.onRemoved works differently in Safari 18 comparing to other browsers and Safari 17.
Open a tab e.g. apple.com
Take note of the active tab id using this code:
browser.tabs.query({currentWindow: true, active: true}, (x) => console.log(x[0].id))
Add a listener on onRemoved:
browser.tabs.onRemoved.addListener(console.log)
on the active tab, navigate to e.g. https://developer.mozilla.org
Take note of the active tab id again (using the same tabs.query).
Expect:
there should be no console.log of onRemoved.
the active tab id stays the same.
Actual:
there is a console.log of onRemoved.
the active tab id is changed.
Please help. If this is a bug introduced in Safari 18, it would break a lot of JS Web extensions.
I have a homepage with an iframe containing my app LocalStorage,
but when opening my app page the LocalStorage is lost.
structuration of the page:
homepage : domain.com
iframe and app : app.domain.com
the localstorage is set up directly within the iframe and postmessage between iframe and parent works.
We see in the parent page that the LocalStorage for the sub-domain is set but opening the sub-domain on a new window it disappears :
The problem is detected On Safari 18 only.
We are using declarativeNetRequest.getMatchedRules() to get the matched rules' URLs. When user switches website in the same tab, it returns URLs which were blocked in the previous website also, within past 5 minutes.
Is it possible to fetch getMatchedRules() only for current webpage in the same tab?
I need to play a Video with transparent background on our website.
It works perfectly on Windows, Mac & Android (in all browsers).
On iPhone however, no matter what Browser, The transparent parts of the video act almost like an "overlay", making everything behind it a lot brighter. This effect gets worse, the higher I set the iPhone screen brightness. This is of course not the behavior I'm looking for.
The Video Element has two listed sources. One .WEBM (VP8 with alpha channel) and one .MP4 (HEVC with alpha channel). I am sure, that something is wrong with the MP4 file, but I don't understand why it works in Safari on Mac, but doesn't on iPhone. Shouldn't they both play the same File?
Here is my workflow:
masking the subject in DaVinci Resolve
exporting as QuickTime - Apple ProRes 444 - "Export Alpha"
using Shutter Encoder (v15.7) to convert the file to H.265 (.mp4)
under "Advanced Features": Hardware acceleration to "OSX VideoToolbox" & check "Enable alpha channel"
also converting the first file to VP8 (.webm) with "Enable alpha channel"
then adding the Videos to the website like this:
<video height="450px" autoplay loop muted playsinline disablepictureinpicture>
<source
src="(url of the mp4)"
type='video/mp4; codecs="hvc1"'>
<source
src="(url of the webm)"
type="video/webm">
</video>
Here is how it looks on Safari (Mac)
This is what it looks like in any browser on iPhone
I have re-exported, re-converted and re-implemented it multiple times and I just can't get it to work on iPhone. Does anyone have an idea, what the cause could be, or what I can do differently?
Hi,
I noticed that event 'error' from EventSource is not fired in latest iOS 18, when web application is minimized and then re-activated. This was working in previous versions, so it is probably regression bug.
Behavior in iOS 17:
PWA application has active SSE/EventSource connection with server. Then some other application becomes active for more then ≈20 sec, so that SSE connection is closed. After SSE connection is closed, application is opened again. When application becomes visible, 'error' event is fired. This is expected behavior and this way also works on other non-iOS systems.
Behavior in iOS 18:
Following same steps as before it looks like that error event is not fired. Also,readyState of EventSource is 1 (EventSource.OPEN ), even if SSE connection is closed.
If connection is interrupted when application is in foreground, then error event is fired on both iOS versions.
This is quite problematic, because previously you could rely on 'error' event to trigger reconnection, when application becomes visible, but now this is not possible. Also EventSource readyState is 1, even if there is no connection to the server, so it is in wrong state.
Any thoughts?
There is a change log in Safari 18 Beta mentioning that you can now via MDM control Safari's extensions state and make an extension be enabled after you've installed it - "Added support for Device Management of extension enabled state, private browsing state, and website access on Managed Devices. (113051857)"
However I could not find any documentation for it, I need to know what to set in my plist/mobileconfig file.
Does anyone know (or maybe apple is here as well and can help) where would this be documented?
Thanks!
It seems Safari 18's fetch() does not include credentials even credentials: include and safari extension has host_permissions for that domain.
Is there anyone has this problem?
I try to request in popup.js like this:
const response = await fetch(
url,
{
method: 'GET',
mode: 'cors',
credentials: 'include',
referrerPolicy: 'no-referrer',
}
);
and it does not include the cookie from host_permissions.
Those code worked in Safari 17 (macOS Sonoma).
I have an issue with web ads not working in Safari versions earlier than 16.4.
While debugging Safari Web Ads I found out that I don't get postbacks from versions 16.4 or below from Safari, although there are no technical limitations and the documentation says that web ads should work starting from versions 16.1 https://developer.apple.com/documentation/storekit/skadnetwork/skadnetwork_release_notes/skadnetwork_4_release_notes
For ads that appear in an app, the app is built with iOS 16.1 SDK or later. For web ads, the ad appears in Safari 16.1 or later.``
Maybe I missed something and Apple didn't update the documentation, is that normal?
Maybe it's related to this release and there was a technical problem with Apple? https://developer.apple.com/documentation/ios-ipados-release-notes/ios-ipados-16_4-release-notes/#SKAdNetwork
Has anyone encountered the same problem and how did you fix it?
Thanks!
declarativeNetRequest.getMatchedRules() gives us the below error:
Error retrieving tabs or matched rules: – Error: Invalid call to declarativeNetRequest.getMatchedRules(). The 'activeTab' permission has not been granted by the user for the tab.
We have added the "activeTab" permissions in the manifest (version 2). And in the device Safari extension settings we see that user has given permission as "allow".
Topic:
Safari & Web
SubTopic:
General
Tags:
Safari Developer Tools
Safari Extensions
Safari Services
Safari
We're developing a service that requires webtransport support in the browser. Currently, the only browser that doesn't provide support is the IOS version of Safari.
Our current way forward for client use is to flag iphone and ipad as non compliant and recommend either desktop use or android.
Is there any ballpark date as to when WebTransport will be included in IOS Safari (- webkit supports webtransport)?
Hi, I am having issue with WebAssembly not able to load wasm file on Safari web extension.
It is showing CompileError: Refused to create a WebAssembly object because 'unsafe-eval' or 'wasm-unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'".
It was working fine 2 month ago, my original CPS is "script-src 'self' 'unsafe-eval'". But now it is not accepting 'unsafe-eval', I also tried 'wasm-unsafe-eval' did not work.
Is there any changes on Safari browser regarding the CSP for WebAssenbly? Please let me know what CPS value will work.
Here is the example code on how I load the WebAssembly wasm file.
fetch('test_wasm_lib.wasm')
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.arrayBuffer();
})
.then(bytes => WebAssembly.instantiate(bytes))
.then(results => {
// Use your WebAssembly instance here
console.log('load wasm success')
})
.catch(error => {
console.error('Error loading WASM:', error);
});