In Safari, non-ascii characters are incorrectly stored in document.cookies as trash

Question

In Safari, non-ascii characters are incorrectly stored in document.cookies as trash

Below is a snippet of JavaScript code that I am working with:

wdata['account'] = {"value": $(input).val(), "title": "Номер карты получения"};
var r = {
    "ipayway": ipw_selected,
    "wpayway": wpw_selected,
    "amount_type": amount_type,
    "amount": amount,
    "email": email,
    "idata": idata,
    "wdata": wdata,
    "udata": udata
}
console.log(JSON.stringify(r));
document.cookie = "r=" + JSON.stringify(r) + ";";
console.log(document.cookie);

When debugging in Chrome and Firefox, here are the results:

{"ipayway":"3","wpayway":"2","amount_type":"invoice","amount":"10","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90e2f5f6f5e2d0f6f1e3e4f5e2bef3fffd">[email protected]</a>","idata":{"phone":{"value":"79111111111","title":"phone"}},"wdata":{"account":{"value":"4444444444444448","title":"Номер карты получения"}},"udata":{}}

_ga=GA1.2.1726207989.1464355649; _ym_uid=1464355650833173718; _ym_isad=2; r%3Dfalse%3B; r={"ipayway":"3","wpayway":"2","amount_type":"invoice","amount":"10","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4b6a1a2a1b684a2a5b7b0a1b6eaa7aba9">[email protected]</a>","idata":{"phone":{"value":"79111111111","title":"phone"}},"wdata":{"account":{"value":"4444444444444448","title":"Номер карты получения"}},"udata":{}}; _gat=1; _ym_visorc_37606275=w

In Safari:

{"ipayway":"3","wpayway":"2","amount_type":"invoice","amount":"10","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="daa8bfbcbfa89abcbba9aebfa8f4b9b5b7">[email protected]</a>","idata":{"phone":{"value":"79111111111","title":"phone"}},"wdata":{"account":{"value":"4444444444444448","title":"Номер карты получения"}},"udata":{}}
    
r={"ipayway":"3","wpayway":"2","amount_type":"invoice","amount":"10","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e6c7b787b6c5e787f6d6a7b6c307d7173">[email protected]</a>","idata":{"phone":{"value":"79111111111","title":"phone"}},"wdata":{"account":{"value":"4444444444444448","title":"A1468837743323372246t%3A1468837754%3A; ga=GA1.2.1861993315.1468837742; gat=1; ym_isad=2; ym_uid=1468837743323372246; _ym_visorc_37606275=w

I'm facing an issue where, in Safari, instead of getting

"title":"Номер карты получения"

as in Chrome or Firefox, I am seeing something like

"title":"A1468837743323372246t%3A1468837754%3A

. Furthermore, in Safari, it appears to cut off the last closed braces compared to the debug results in other browsers.

javascript json cookies safari cross-browser

Answer 1

Answer №1

To ensure proper encoding, it is necessary to include "charset=utf-8" in the HTML Meta Tag and within your JavaScript code.

<meta charset="utf-8">

Also, remember to specify utf-8 in the script tag when linking a JavaScript file:

<script type="text/javascript" charset="utf-8" src="/js/xxx.js"></script>

Answer 2

To ensure proper encoding, it is necessary to include "charset=utf-8" in the HTML Meta Tag and within your JavaScript code.

<meta charset="utf-8">

Also, remember to specify utf-8 in the script tag when linking a JavaScript file:

<script type="text/javascript" charset="utf-8" src="/js/xxx.js"></script>

Answer 3

Answer №2

I came across some valuable information on a post at . In the post, it mentioned that Safari has issues with sending cookies containing non-ASCII characters. This is why when dealing with cross-browsing, it's recommended to use encodeURIComponent.

In my specific situation, my code will look like this:

wdata['account'] = {"value": $(input).val(), "title": encodeURIComponent("Номер карты получения")};
var r = {"ipayway": ipw_selected,
    "wpayway": wpw_selected,
    "amount_type": amount_type,
    "amount": amount,
    "email": email,
    "idata": idata,
    "wdata": wdata,
    "udata": udata
  }
document.cookie = "r=" + JSON.stringify(r) + ";

The value of the cookie's title parameter will be:

%D0%9D%D0%BE%D0%BC%D0%B5%D1%80%20%D0%BA%D0%B0%D1%80%D1%82%D1%8B%20%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D1%8F

, which can be easily processed on the Back-End. For instance, in Python:

import urllib
title = '%D0%9D%D0%BE%D0%BC%D0%B5%D1%80%20%D0%BA%D0%B0%D1%80%D1%82%D1%8B%20%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%D0%BD%D0%B8%D1%8F'
>>> print urllib.unquote(a)
Номер карты получения

Answer 4

I came across some valuable information on a post at . In the post, it mentioned that Safari has issues with sending cookies containing non-ASCII characters. This is why when dealing with cross-browsing, it's recommended to use encodeURIComponent.

In my specific situation, my code will look like this:

wdata['account'] = {"value": $(input).val(), "title": encodeURIComponent("Номер карты получения")};
var r = {"ipayway": ipw_selected,
    "wpayway": wpw_selected,
    "amount_type": amount_type,
    "amount": amount,
    "email": email,
    "idata": idata,
    "wdata": wdata,
    "udata": udata
  }
document.cookie = "r=" + JSON.stringify(r) + ";

The value of the cookie's title parameter will be:

%D0%9D%D0%BE%D0%BC%D0%B5%D1%80%20%D0%BA%D0%B0%D1%80%D1%82%D1%8B%20%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D1%8F

, which can be easily processed on the Back-End. For instance, in Python:

import urllib
title = '%D0%9D%D0%BE%D0%BC%D0%B5%D1%80%20%D0%BA%D0%B0%D1%80%D1%82%D1%8B%20%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%D0%BD%D0%B8%D1%8F'
>>> print urllib.unquote(a)
Номер карты получения

In Safari, non-ascii characters are incorrectly stored in document.cookies as trash

Answer №1

Answer №2

Similar questions

Dynamic Reading of JQGrid Colmodel and ColNames from ASPX CodeBehind

Unexpected token error in TypeScript: Syntax mistake spotted in code

The `chrome.windows` API is not defined for this particular Chrome

Guide to accessing a nested and potentially optional object property with a default value and specifying its data type

Ways to eliminate the dotted line from the image map in Internet Explorer 11

Tips for importing a .ts file into another .ts file within an Angular 5 application

The question of when to utilize userEvent.click versus fireEvent in React Testing Library

Incorporating an array of JSON into a Mongoose schema in JavaScript

"Navigate through the page by scrolling with your mouse all the way to 100

What is the best way to perform an AJAX request in Typescript with JSON data?

Retrieve the JSON value from the remoteMessage received within the onMessageReceived function for Firebase Cloud Messaging push notifications

Template7 produces a bizarre outcome referred to as "each this" whenever JSON is utilized

How to retrieve an array value within a function in AngularJS

multer - the file uploaded by the request is not defined

Unable to construct Vue application after integrating webpack extension

Ways to disable mousewheel function in jQuery

Develop an innovative showcase page showcasing 151 individual profiles with React Router

What is the best way to design a timetable schema in MongoDB specifically for a Teacher Schema?

What is the best way to gather user input and incorporate it into a selected template, ensuring it is verified before sending?

cracking reCAPTCHA without needing to click a button or submit a form (utilizing callback functions)