Authenticate Safari Extension with Web Application

Question

ItsMika OP

Created Aug ’24

Replies 3

Boosts 0

Participants 3

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.

Answered by ItsMika in 799955022

Ok I managed to solve the problem :OO Leaving the answer to someone that may have same problem in the future :D

In my manifest file I had to change background.service_worker to background.scripts.

Apparently service_worker runs on the separate thread and has limited browser context hence no access to the cookies

If you use background.scripts instead it will make extension generate persistent background page that has a possibility to pickup the cookies :D Everything works out of the box now :D

Boost

Answer 1

Engineer OP

Apple

Aug ’24

One alternate path could be to use Authentication Services in your app, to which the authentication would be shared with Safari.

Rico WWDR - DTS - Software Engineer

0

Answer 2

ItsMika OP

Aug ’24

Thanks for response. This will mean that I have to start develop in swift which I am trying to avoid.

I found other very similar extension that seems to work the same way. The difference that I see between ours is that when I enter Develop > Web Extension Background Content:

3rd Party Extension

I can see generated_background_page.html in the Sources Tab that loads the background script.

I can also see all the devtools tabs like on any other website. In Networking tab can see all the requests made.

Interesting thin is that if I make the fetch request from the Console of this background script to our service... the cookie gets attached automatically and I am able to use the api.

My Extension

While when I enter background script of my extension I can see only three dev tools tabs: Console, Network and Sources.

In Sources I have only service-worker.js file and none of html files. On the Network tab I can't see any requests send for example when I open extension popup yet.. in Console I can see all the errors returned by the requests that were send - all return unauthorised.

Can it be that the way background content is loaded is reason to not detect the cookies? How can I make my background composed of html file loading script?

0

Answer 3

ItsMika OP

Aug ’24

Accepted Answer

Ok I managed to solve the problem :OO Leaving the answer to someone that may have same problem in the future :D

In my manifest file I had to change background.service_worker to background.scripts.

Apparently service_worker runs on the separate thread and has limited browser context hence no access to the cookies

If you use background.scripts instead it will make extension generate persistent background page that has a possibility to pickup the cookies :D Everything works out of the box now :D

0