get-web / google-translate-custom-widget

https://get-web.site/blog/29-kastomnyj-vidzhet-googletranslate-dlja-sajta.html
MIT License
109 stars 55 forks source link

feature_request(cookies): “Reading cookie in cross-site context will be blocked in future Chrome versions” #7

Open Kristinita opened 10 months ago

Kristinita commented 10 months ago

1. Проблема

Я получаю в панели “Issues” браузера Chrome сообщения:

Reading cookie in cross-site context will be blocked in future Chrome versions

Setting cookie in cross-site context will be blocked in future Chrome versions

Видимо, в Google Translate Custom Widget (GTCW) необходимо вносить изменения, поскольку, как понимаю, в нынешнем виде виджет перестанет функционировать в будущих версиях Chrome.

2. Шаги для воспроизведения

Запускаем новую версию Chromium или Chrome (желательно, с выключенными расширениями) → открываем демо-страницу GTCW → заходим в Developer Tools (Ctrl+Shift+I) → Issues.

3. Поведение

3.1. Желательное

Никаких предупреждений.

3.2. Текущее

Reading cookie

Reading cookie in cross-site context will be blocked in future Chrome versions

Cookies with the SameSite=None; Secure and not Partitioned attributes that operate in cross-site contexts are third-party cookies. In future Chrome versions, reading third-party cookies will be blocked. This behavior protects user data from cross-site tracking.
Please refer to the article linked to learn more about preparing your site to avoid potential breakage.

6 cookies
Name    Domain & Path
__Secure-3PAPISID   .google.com/
__Secure-3PSID  .google.com/
1P_JAR  .google.com/
NID .google.com/
__Secure-3PSIDTS    .google.com/
__Secure-3PSIDCC    .google.com/

Learn more: Prepare for phasing out third-party cookies

Setting cookie

Cookies with the SameSite=None; Secure and not Partitioned attributes that operate in cross-site contexts are third-party cookies. In future Chrome versions, setting third-party cookies will be blocked. This behavior protects user data from cross-site tracking.
Please refer to the article linked to learn more about preparing your site to avoid potential breakage.

1 cookie
Name    Domain & Path
__Secure-3PSIDCC    .google.com/

Learn more: Prepare for phasing out third-party cookies

Внизу сообщений содержится ссылка на статью “Prepare for phasing out third-party cookies” на сайте “Google for Developers”.

4. Среда тестирования

  1. Chromium Version 120.0.6099.71 (Official Build) (64-bit)

Спасибо.

get-web commented 10 months ago

Попробуйте такой вариант: https://get-web.site/files/gtcw/jquery/google-translate.js https://get-web.site/files/gtcw/nativejs/google-translate.js

Kristinita commented 9 months ago

Status: Not fixed :crying_cat_face:

Те же предупреждения, к которым добавилась ещё одна ошибка. Если у Вас проблема не воспроизводится, пожалуйста, напишите, что необходимо предпринять для её устранения.

1. Шаги для воспроизведения

Скачал и распаковал директорию nativejs → заменил содержимое файла google-translate.js на содержимое https://get-web.site/files/gtcw/nativejs/google-translate.js → в корне директории запустил команду http-server npm-пакета http-serverзапустил Chromium без расширений и плагинов → открыл в Chromium страницу http://localhost:8080/ → открыл Issues в Developer Tools Chromium.

Также при запущенном http-server запустил в корне директории команду Ngrok ngrok http 8080 → открыл в Chromium (без расширений и плагинов) сгенерированный в Ngrok URL → открыл Issues в Developer Tools.

2. Поведение

2.1. Желательное

Исчезновение следующих предупреждений:

Reading cookie in cross-site context will be blocked in future Chrome versions
Setting cookie in cross-site context will be blocked in future Chrome versions

2.2. Актуальное

Все прежние предупреждения остались, и более того, появилась новая ошибка:

Mark cross-site cookies as Secure to allow setting them in cross-site contexts

Cookies marked with `SameSite=None` must also be marked with Secure to allow setting them in a cross-site context. This behavior protects user data from being sent over an insecure connection.

Resolve this issue by updating the attributes of the cookie:

→ Specify `SameSite=None` and Secure if the cookie is intended to be set in cross-site contexts. Note that only cookies sent over HTTPS may use the Secure attribute.
→ Specify `SameSite=Strict` or `SameSite=Lax` if the cookie should not be set by cross-site requests.

Affected Resources
1 cookie
Name    Domain & Path
googtrans   `localhost/`

Learn more: SameSite cookies explained

GTCW Mark cross-site cookies error

Спасибо.

Kristinita commented 9 months ago

Status: Third-party problem :three:

Проблема, надо полагать, в самом Google Translate, а не в Google Translate Custom Widget.

1. Примеры

1.1. MCVE Google Translate Element

Не запускается в Codepen, но работает на локальном сервере:

<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" defer></script>
<script>
    function kiraGoogleTranslateElementInit() {

        new google.translate.TranslateElement(
        {
            pageLanguage: "en",
            includedLanguages: "en,ru",
        },
        "KiraGoogleTranslateElementID"
        );
    }

    setTimeout( function() {
        kiraGoogleTranslateElementInit();
        }, 700);
</script>
<div id="KiraGoogleTranslateElementID"></div>
<p>Nelia Goddess!</p>

В инструментах разработчика Chromium те же предупреждения Reading cookie in cross-site context will be blocked in future Chrome versions.

Предупреждения Chromium показывает и при открытии официального сайта Google Translate.

1.2. Programmable Search Engine

Замечу также, что, похоже, проблема не специфична для Google Translate и присутствует в других сервисах Google. MCVE для Programmable Search Engine:

<script src="https://cse.google.com/cse.js?cx=013024336414733191742:sps98skj394" defer></script>
<div class="gcse-search"></div>

Codepen:

  1. Код
  2. Демонстрация

При открытии демо-страницы в Chromium видим те же предупреждения.

2. Дальнейшие действия

Я бы добавил к issue метку с именем, например, third-party, но не закрывал бы его, поскольку проблема не решена и в следующие месяцы может повлиять на работу GTCW.

Полагаю, неплохо было бы связаться с разработчиками. Open Cloud Translation issue tracker, сообщество Translation AI.

И хотелось бы увидеть в документации Google Translate Custom Widget актуальную информацию по Google Translate Element (translate_a/element.js). Каковы лимиты на его бесплатное использование, прекращена ли его разработка, планируют ли в Google остановить его работу? В сообществе Google Translation AI, к сожалению, не ответили на заданные 2 месяца назад подобные вопросы.

Спасибо.

get-web commented 9 months ago

Google Translate Custom Widget это надстройка над Google Translate Widget которая делает его более гибким. Поддержка прекращена еще лет 5 назад, но сам скрипт остался рабочим. Вся документация по виджету которая была найдена в интернете, добавлена.

Решение проблемы которую вы описываете одно, оно написано в самой ошибке. Нужно установить в куки свойства "SameSite=None", а так же "secure=true". Кроме того сайт должен работать по протоколу https. Но проблема в том, что на разных серверах, в зависимости от настроек, для js существуют различные ограничения, поэтому работа с куками может отличаться и иногда приходится назначать их через backend. Если в вашем случае файлы которые я предложил не помогли, попробуйте завести свою куку и через backend переназначать куку googtrans с нужными свойствами.