How to set a cookie within an iframe while using Safari browser

Despite searching extensively on Stackoverflow and various other sources, I have not been able to find a solution that works for my specific case.

The scenario is as follows: we have an application on domain A that we do not have control over, and an application on domain B which is integrated into application A using an iframe. Cookies are used in our application on domain B, and everything functions properly except in Safari. After reading this resource, it became clear that Safari requires explicit user interaction with domain B in the past for cookies to be preserved.

To address this issue, we attempted rendering an invisible pixel on site A through an integration JS script that injects an iframe into a div on site A. Additionally, we made CORS ajax requests from domain A to domain B using our integration script, ensuring "withCredentials" were set to true. While the request successfully returned a "set-cookie" header, the cookie was still not passed along to subsequent requests from the iframe to our domain B.

However, upon manually opening domain B, the cookies started getting passed correctly within the iframe integrated into domain A.

Despite exhausting all of our ideas thus far, including suggestions for JS redirects (which may result in a poor user experience), we have yet to find a successful resolution. Any advice or guidance would be greatly appreciated. Please help save my sanity, as this issue is proving to be quite frustrating :)

javascriptcookiesiframesafari

Answer №1

After extensive research, we determined that eliminating cookies and implementing an Authorization header was the best approach. However, we encountered a challenge when it came to the images we were inserting into the DOM via . We realized that passing an Authorization header there was not feasible without compromising the security of the auth token. To address this issue, we resolved to make ajax requests to image URLs and then insert them into the DOM as blobs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method to set precise values on a range slider?

Currently, I am developing a PHP website that requires a slider for displaying the years of publications. In essence, I need the slider to navigate through the different years when the publications were released. // Database connection and other PHP code ...

javascriptphphtml

What is the correct way to have Material-UI's <TextField/> component return with a ref attribute, similar to <input/> in ReactJS?

Using this particular method: handleClick(event) { const inputText = this.refs.inputText console.log(inputText.value.trim()) } I am attempting to make Material-UI's <TextField/> return the input text accurately with a ref, similar ...

javascriptreduxreactjsmaterial-ui

The beauty of crafting intricate forms with Angular's reactive nested

In my Angular project, I am exploring the concept of nesting multiple reactive forms within different components. For instance, I have a component called NameDescComponent that includes a form with two inputs - one for name and one for description, along ...

javascriptangulartypescriptangular-reactive-formsangular-forms

What is the best way to display two tables side by side in a Vue component?

I am working on a vue application with a photo collection feature. My goal is to display the photos in two tables per row, iterating through the entire collection. Here's an example of what I'm aiming for: <row> &l ...

javascriptvue.js

Randomly switch out the wordpress header image at designated intervals

I have a custom header image on my website that displays 6 random images each time the site is visited. I am attempting to change this group of images while the user is browsing my site. Here is the code I am using: function show_banner(){ document.ge ...

javascriptphphtmlcsswordpress

The utilization of awaitZip while developing with Express is overlooked by Node.js

I am working on a task to retrieve icon PNGs from gridfs in our mongodb database using mongoose. These icons need to be compressed into a zip file and served at a specific endpoint. Here is the code I have so far: var zip = require("node-native-zip"); as ...

javascriptnode.jsexpressmongooseasync-await

A Step-by-Step Guide to Setting Up a Scoreboard for Your Rock Paper Scissors Game

I'm new to JavaScript and I want to create a rock, paper, scissors game from scratch. My Game Plan: Once the user clicks on an option (rock, paper, scissors), the game will display their score and the computer's score along with the result of t ...

javascriptjqueryhtmlcss

Unable to establish a connection with the docker container

I have developed a server-api application. When running the app on my localhost, only two simple commands are needed to get it up and running: npm install npm start With just these commands, the app runs perfectly on port 3000. Now, I am trying to dock ...

javascriptbashdockernpmdocker-compose

Transfer content within <pre> tags to the clipboard using a Vue.js application

I am currently developing a Chrome extension using Vue.js where I aim to copy the content within a pre tag section to the clipboard with the click of a button. By assigning an element ID to the pre tag, I can retrieve the content using a copyToClipboard() ...

javascriptvue.jsselectgoogle-chrome-extensioncopy

Triggering a gTag Event on the Fly using Google Tag Manager

I implemented a script that triggers a dynamic gTag.js AdWords conversion based on various user interactions on my webpage. Everything was working smoothly until I switched to Google Tag Manager. Now, the code snippet: gtag('event', 'convers ...

javascriptgoogle-tag-managergtag.js

Using innerHTML in React to remove child nodes Tutorial

I'm encountering slow performance when unmounting over 30,000 components on a page using conditional rendering triggered by a button click. This process takes around 10+ seconds and causes the page to hang. Interestingly, setting the parent container& ...

javascriptreactjsreact-hooksreact-fiber

When utilizing the dispatch function with UseReducer, an unexpected error is triggered: Anticipated 0 arguments were provided,

Having trouble finding a relevant answer, the only one I came across was related to Redux directly. So here's my question that might be obvious to some of you. In my code, everything appears to be correct but I'm facing an error that says: Expect ...

javascriptreactjstypescript

Encoding a JSON representation of an HTML list where all children are displayed at each parent item

Here is the structured list that I am currently working with: function convert( name_ref ) { name_ref = name_ref + " > ol > li"; var mylist = []; $(name_ref).each(function () { if ($(this).find('> ol > li').length){ myl ...

javascriptjqueryhtmljson

Identifying Cross-Origin (CORS) Error from Other Errors in JavaScript's XMLHttpRequest()

I am currently working on detecting when an XMLHttpRequest() fails due to a Cross Origin Error rather than a bad request. Take, for example: ajaxObj=new XMLHttpRequest() ajaxObj.open("GET", url, true); ajaxObj.send(null); Let's consider ...

javascriptajaxxmlhttprequestcors

Can you explain the process of initiating a script?

Seeking Answers: 1) When it comes to initializing a script, is there specific code placement in the js file or do you need to create initialization code from scratch? 2) What sets jQuery apart from other scripts that require activation - why does jQuery. ...

javascriptjqueryinitialization

Choosing between creating a class with a shared instance or not

I'm curious if my class is shared across instances: for example, I have a route that looks like this: /student/:id When this route triggers the controller (simplified version): module.exports = RecalculateStudents; const recalculateActiveStudent ...

javascriptnode.jsexpress

The initial io.emit message seems to always be delayed or lost in transmission

io.on('connection',function(socket){ console.log('connected'); socket.on('disconnect',()=>{ console.log('a user disconnected'); }); socket.on('sendMessage',function(data){ const message = data.te ...

javascriptnode.jssocket.io

How can you store previously calculated values in a costly recursive function in a React application?

Consider a scenario where there is a recursive callback function like the one shown below: const weightedFactorial = useCallback(n => { if (n === 0) { return 1; } return weight * n * weightedFactorial(n - 1); }, [weight]); Is it possible to ...

javascriptreactjsrecursionreact-hooks

The custom validator in Material2 Datepicker successfully returns a date object instead of a string

Im currently working on developing a unique custom validator for the datepicker feature within a reactive form group. Within my code file, specifically the .ts file: form: FormGroup; constructor( private fb: FormBuilder, ...

javascriptangulartypescriptdatepickerangular-material2

Conceal virtual keyboard on mobile when in autocomplete box focus

I would like the keyboard to remain hidden when the autocomplete box is focused or clicked, and only appear when I start typing. The code below currently hides the keyboard when any alphabets or numbers are pressed. However, I want the keyboard to be hidd ...

javascriptreactjsmobilematerial-uiautocomplete