Post not yet marked as solved
Deleted for privacy and wrong section argument.
Post not yet marked as solved
I am building a safari extension app. the code(html, css, javascript) for the safari extension that is in the AppExtension directory works good, but when I added button to Main.html to make an Action, to make the app dynamically change (the application itself not the extension), and I want to send data from the app to the extension on Safari.
Could anyone help me to fix this issue.
This my html code:
<!--Main.html -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="../Style.css">
<script src="../Script.js" defer></script>
</head>
<body>
<!--The makeAction() function is defined in the `Script.js` file -->
<button onclick="makeAction()">Dropdown</button>
</body>
</html>
And this is the files structure
Hey,
Is it allowed to inject an HTML item above a web page on iOS using Safari Web Extension?
If yes what amount of screen space can we allocate to the UI?
Example:
Post not yet marked as solved
I have an SPA web app I've built for Safari iOS. One feature I have is that (with user's permission!) I would like to play audio alerts of various sorts based on events that take place in the app. (Think a chat app playing a "message received" sound.)
... again, this would be with the user's permission. This is very much a feature of the app and not nagware or adware.
Currently, of course, this isn't possible. Audio can only be played in response to some user-initiated action, and that "permission" only lasts until the page closes or is reloaded.
So, question: Is there a way a user can permanently give permission to a website on iOS to autoplay sound files?
Post not yet marked as solved
I am creating a react app and am making use of Webauthn to use TouchID or FaceID for user authentication.
I have built my app so that when the button is clicked, navigator.credentials.create is the only call made.
With attestation set to none, there are no issues however as soon as I set attestation to direct I get an alert saying 'The operation can't be completed' and 'NotAllowedError: This request has been cancelled by the user.' is logged to console.
The issue only presents itself on Safari and iOS devices however works perfectly on other browsers like Chrome.
Has anyone encountered a similar issue and possibly know how to resolve it?
Thanks
Shay
Post not yet marked as solved
I have to say Safari's (webkit) implementation of Intelligent Tracking Protection (ITP) and the Storage Access API has been challenging to get right.
Situation:
We have a company that has grown through acquisition and we are trying to implement a unified authentication scheme that uses cross-domain access to tokens stored in cookies
Each portal implementing the scheme will have an iframe that hosts a component from an authentication domain and will use postMessage() to check for the existence of the necessary authentication token.
The initial implementation worked for Chrome/Edge/Opera/other Chromium browsers, but needed to be adjusted to implement the Storage Access API to allow the authentication component to request 1st party storage access.
This worked as documented in Firefox
Safari throws an exception when requestStorageAccess() is called and the error object is undefined
Here is some examples of the relevant code:
Iframe
<iframe class="portal-navigation-frame" allowtransparency="true"
style="position:absolute; top: -60px; right: -250px;display:none;"
id="authFrame"
sandbox="allow-scripts allow-storage-access-by-user-activation
allow-same-origin allow-top-navigation allow-forms"
src="@Constants.AuthenticationUrl"></iframe>
Authentication Component
const authorizeStorageAccess = async () => {
if (document.hasStorageAccess) {
try{
if (await document.hasStorageAccess() == false) {
console.log("authCommunicationService.authorizeStorageAccess", "does not have storage access");
if (document.requestStorageAccess) {
await document.requestStorageAccess();
} else {
console.log("authCommunicationService.authorizeStorageAccess", "requestStorageAccess not available");
}
}
else {
console.log("authCommunicationService.authorizeStorageAccess", "already has access");
}
}
else {
console.log("authCommunicationService.authorizeStorageAccess", "already has automatic
access");
} catch (err) {
console.log("authCommunicationService.authorizeStorageAccess", "error", err);
}
}
};
Note: authorizeStorageAccess is called from a button event handler and only after the user has been redirected to the authentication domain to login and returned.
Any assistance would be greatly appreciated.
Jason
Post not yet marked as solved
I have used Safari as my primary browser for years now and it has evolved. Some very good updates and some bad.
I have noticed since iOS 14 I believe when Apple started slowly implementing more security features that pages would show up wonky or unresponsive at times, but a clear browsing history and cookies would fix this issue. Then in iOS 15 and now 16b1 it’s become almost unusable on certain pages.
Again these issues have been ongoing since the updated security features started rolling out and in non beta releases
For example. Some pages won’t load completely or when you try to use a drop down menu the pictures would overlap the drop down.
Resets or clearing cookies/cache, history would not fix this issue. Even turning off some of the privacy features wouldn’t resolve this. Menus have become unresponsive, ie. registering a new user on a forum. The menus would are static with no way to change or update your dob or address.
I hope this makes sense so far.
So here is what I have turned on and added extensions.
Tracking is off in privacy & security
[on] Block pop ups
[on] Prevent cross-tracking
[on] Hide IP and Address - Trackers & Websites // I can’t see it but I believe the Trackers & Websites is set to general location//
[on] Fraudulent website warnings
[on] Privacy Preserving Ad Measurements
All Advanced Safari settings are default and have not been touched
Extensions - 1Blocker (only these below are on)
[on] Block Ads
[on] Block Adult Sites
[on] Block Annoyances
[on] Block Trackers
I have tested things for months now, toggling these off and back on. Trying to find the combination that works. I even removed all extensions and ran just the safari settings by themselves and it still renders some type of misfire with sites (menus being static or pictures over lapping drop down menus)
The title says it all.
How can I get safari back to working and have these privacy features on without the extra bugginess that Safari is doing?
Thanks in advance!
Post not yet marked as solved
I built a simple recorder on my website for users to record and playback audio. It works on ALL desktop browsers (including Safari) but when I use any browser on my iPhone, the mic is active at the opposite time.
The flow is: ask permission > user allows mic access > user presses record > records audio > saves and plays back
On iPhone what's happening is after the user allows permission, the mic goes active (visualized by the mic icon in safari browser) and then once the user presses record, it disables the mic.
I am using getUserMedia within a React.js app
Why is it doing this?
Post not yet marked as solved
I'm developing a REST API app that generates some PDFs for my users, but there are only available for a certain period of time. To download them I'm using the a HTML tag:
<a href="/api/items/1/generate?type=register"
download="Important Letter.pdf">
<svg>...</svg>
</a>
This works fine in the normal flow of the use case, but if a user request a PDF outside of the download period, the server responds to the request with a 422 (Unprocessable Entity) HTML code, and place a json on the body of the request:
HTTP/1.1 422 Unprocessable Entity
Content-Type: application/json;charset=utf-8
{"error" : "Registration period expired",
"type" : "expired",
"data" : {"id" : 1}}
Safari does not interpret this error and it generates the Important Letter.pdf file and writes the json content on it.
Is there a wat to avoid this behavior and display an error message to the user?
I was wondering if my server should send some specific error code.
Post not yet marked as solved
Hello!
We have a web app that uses WebRTC to get the camera stream and we display it using a video element. We also have an option to take a photo capture that basically draws the video element to a canvas and returns the image data. We do something like:
function triggerCapture() {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
context.clearRect(0, 0, canvas.width, canvas.height);
return imageData;
}
On iOS 16 Beta the imageData always represents a black image. We noticed that on iOS 16 the GPU Process: DOM Rendering is now enabled by default and if we disable it the triggerCapture method works as expected. However, it seems this issue is not solely due to the DOM rendering feature because if it's enabled on iOS 15.5 the issue does not occur. To reproduce this issue you can use the WebRTC samples (Use getUserMedia with canvas) and you'll see every time you take a snapshot a black image will be displayed.
Are you aware of this issue?
Thanks!
Post not yet marked as solved
When triggering a webkitRequestFullscreen event in response to a pointerdown event, the result is a fullscreen error.
Using a pointerup event instead of pointerdown works fine.
I'm using a <button> element to receive the event and in the event listener callback I'm attempting to call webkitRequestFullscreen() on a div.
Is this expected behavior?
note: this was observed using MacOS Simulator: iPad 9th Generation - iOS 15.4
Post not yet marked as solved
I'm converting a Chrome extension to work in Safari 15 using the xcrun safari-web-extension-converter. It partially works, but seems to fail with CORS permission issues in both the background script and content scripts.
Oddly enough neither issue exists in Chrome. I have granted all websites permission via Safari itself after installation.
In manifest.json, I have this in the permissions key:
"http://*/",
"https://*/"
I've tried a variety of permutations, including "https://*/*" but nothing works. Every XMLHttpRequest results in the same error:
Failed to load resource: Origin safari-web-extension://... is not allowed by Access-Control-Allow-Origin. Status code: 200
As mentioned, it works fine in Chrome with the same permissions. What have I missed?
Post not yet marked as solved
I am storing token after login in localStorage and using it to make api requests. On safari I am facing issue that once I login and redirected to home page, after that If I go to any other route ex /user safari is clearing token stored in localstorage and thus I am getting logged out. It is a Vue web app and I am using Vue router for navigation.
Can anyone please suggest something
Thanks in advance
Post not yet marked as solved
I'm working on ContentBlocker safari extension to block URLs.
when the extension is disabled I want to redirect users to Settings/Safari/Extension.
I tried these.
prefs:root=Safari
prefs:root=SAFARI&path=Content%20Blockers
none of them is working.
Can any please provide me proper solution?
Post not yet marked as solved
Hi,
I'm trying to convert my chrome extension to work in Safari. I've got it mostly working but there is one issue with the webRequest.onResponseStarted.addListener api. The callback is missing fields including ip. Here is an example:
webRequest.onResponseStarted.addListener((r) => {
console.log(r);
}, {"urls": ["<all_urls>"])
In chrome this will print all the fields described in the spec.
But in safari it is missing a lot of fields, including ip, type, etc.
Does anyone know if this is a bug or if I am doing something wrong?
Thanks!
Post not yet marked as solved
Seems SQL Lite database browsers can no longer open these files. Is there a way and can any explain what was changed?
Post not yet marked as solved
(TL;DR at bottom)
Hi everyone,
Going into this I'd like to say first that I am by no means a web developer and I know nothing about how browsers are built.
I've got a really specific use case that requires me to disable hardware acceleration on my browser. When away from each other, my partner and I like to watch shows and movies together over Zoom's Screen Sharing. For a while I've just been using Chrome to handle that and Safari for everything else. The reason I use Chrome for this is that when I turn off hardware acceleration on Chrome it lets me share my screen on websites like Netflix, Hulu, etc. without an empty screen appearing.
But I just don't want Chrome on my computer anymore, if I can somehow get hardware acceleration off on Safari. It's nice to just use one browser for everything, especially since Safari is great for my battery.
I looked into this online and something I read says that you just aren't able to do this anymore in Safari but then I asked my friend who does dabble in this sort of stuff and he says there's probably something under: Develop --> Experimental Features that I can mess around with to turn it off.
If anybody has pointers for me, I'd really appreciate it! Thanks :-)
TL;DR - I'm looking for a way to turn off hardware acceleration on Safari like you are able to do in Chrome
Post not yet marked as solved
Hello,
I am Flip.Shop developer.
Our site is having a problem displaying a Video whose size adjusts dynamically to the width and height of the parent component.
Please visit this page: https://flip.shop and scroll through a few posts.
On all normal browsers (Chrome/Firefox) the video loads nicely.
But on Safari 15.5 (desktop and mobile) you can see a flicker for a while. The first frame of the video can't adjust to the size.
Video component looks like this:
<video
preload="auto" loop="" playsinline="" webkit-playsinline="" x5-playsinline=""
src="blob:https://flip.shop/1039dfe6-a1f4-4f80-822b-250665225c68" autoplay=""
style="width: 100%; height: 100%;">
</video>
and CSS of parent component looks like this:
width: 100%;
height: 100%;
position: relative;
& video {
object-fit: cover;
}
Is there any solution to prevent video from going crazy in the Safari browser?
The only workaround that seems to work is to show a poster covering the video until the video plays. Unfortunately, there is no event to inform that Safari is freaking out, so this poster has to be removed after a 300-500 millisecond timeout connected to the "play" event, which significantly delays the display of this video (on Safari).
Post not yet marked as solved
I have a website and I often see Safari clients making requests directly to the root of one of my subdomains. This behaviour is unique to Safari as other browsers and other devices aren't making these requests to the root of that subdomain. I serve no page on the root of that subdomain, but I do have pages on specific paths on that subdomain.
The requests towards the root don't have any referer and don't seem to be coming from search engines or any other external source. Some clients have visited specific paths (where I serve content) before. I can't pinpoint what is triggering these requests from these devices. It also doesn't seem related to a specific version.
Requests for favicons and Apple touch icons are all handled correctly so they aren't the cause of this issue. These is no additional path or query parameters in these requests.
Could you please share if there is behaviour within Safari that could cause this request to the root of the subdomain? E.g. having a tab (with a specific path of my website) on standby and that Safari is making this request in the background?
Thank you.
Post not yet marked as solved
Hello, I have a strange layout bug on the new Safari 15.4. I only see half of pictures, while in Safari 15.3 it's all ok.
Here's the code:
<style>
.c1 {width:113px;height:158px;text-align:center}
.pi {margin:0 -100%;}
</style>
<div class="c1"><img class="pi" src="https://i.ibb.co/7R0NTRt/photo.jpg">
</div>
Any advice? Thank you