Chrome's translate feature cannot reliably translate JavaScript reference page

[Hill-98]

Summary

Chrome's translation feature doesn't work on the redesigned MDN's JavaScript reference page, and when I try to translate an English page to another language, the text always reverts to English in a flash.

Where did you spot the bug?

https://developer.mozilla.org/en-US/docs/Web/JavaScript

What is the problem?

Chrome translation does not work on JavaScript reference pages

What did you expect to happen?

Chrome translation works properly on JavaScript reference pages

Steps to reproduce the issue

1. Open https://developer.mozilla.org/en-US/docs/Web/JavaScript in Chrome
2. Use the translation feature to translate into languages other than English

Environment

Device

• Desktop

Browser

• Chrome: 98.0.4758.102

Operating system

• Windows: Windows 11 22000.527

Screenshots

[schalkneethling]

I can confirm that this is correct. The translation tool fails to translate the page.

[caugner]

FWIW Translation via https://translate.google.com/ works: https://developer-mozilla-org.translate.goog/en-US/docs/Web/JavaScript?_x_tr_sl=en&_x_tr_tl=de&_x_tr_hl=en&_x_tr_pto=wapp

When I try to translate with Chrome, I'm getting the following error in the JavaScript console:

Refused to load the stylesheet 'https://translate.googleapis.com/translate_static/css/translateelement.css' because it violates the following Content Security Policy directive: "style-src 'report-sample' 'self' 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

Background: https://rapidsec.com/csp-packages/google_translate

So it looks like to support Google Translate via Chrome, we will have to adjust our Content-Security-Policy here:

yari/libs/constants/index.js

Lines 71 to 144 in 2d7a154

	const scriptSrcValues = [
	"'report-sample'",
	"'self'",
	"*.speedcurve.com",
	"'sha256-q7cJjDqNO2e1L5UltvJ1LhvnYN7yJXgGO7b6h9xkL1o='", // LUX
	"www.google-analytics.com/analytics.js",
	"'sha256-JEt9Nmc3BP88wxuTZm9aKNu87vEgGmKW1zzy/vb1KPs='", // polyfill check
	"polyfill.io/v3/polyfill.min.js",
	"assets.codepen.io",
	"production-assets.codepen.io",
	"'sha256-CUy3BwqnmCSHS96nUyHoUsOB3r+s10eRpf5GbZdZqgk='", // inline no flicker
	];
	const CSP_DIRECTIVES = {
	"default-src": ["'self'"],
	"script-src": scriptSrcValues,
	"script-src-elem": scriptSrcValues,
	"style-src": ["'report-sample'", "'self'", "'unsafe-inline'"],
	"object-src": ["'none'"],
	"base-uri": ["'self'"],
	"connect-src": [
	"'self'",
	"www.google-analytics.com",
	"stats.g.doubleclick.net",
	],
	"font-src": ["'self'"],
	"frame-src": [
	"'self'",
	"interactive-examples.mdn.mozilla.net",
	"interactive-examples.prod.mdn.mozilla.net",
	"interactive-examples.stage.mdn.mozilla.net",
	"mdn.github.io",
	"yari-demos.prod.mdn.mozit.cloud",
	"mdn.mozillademos.org",
	"yari-demos.stage.mdn.mozit.cloud",
	"jsfiddle.net",
	"www.youtube-nocookie.com",
	"codepen.io",
	],
	"img-src": [
	"'self'",
	// Avatars
	"*.githubusercontent.com",
	"*.googleusercontent.com",
	"mozillausercontent.com",
	"profile.stage.mozaws.net",
	"profile.accounts.firefox.com",
	"lux.speedcurve.com",
	"mdn.mozillademos.org",
	"media.prod.mdn.mozit.cloud",
	"media.stage.mdn.mozit.cloud",
	"interactive-examples.mdn.mozilla.net",
	"interactive-examples.prod.mdn.mozilla.net",
	"interactive-examples.stage.mdn.mozilla.net",
	"wikipedia.org",
	"www.google-analytics.com",
	"www.gstatic.com",
	],
	"manifest-src": ["'self'"],
	"media-src": ["'self'", "archive.org", "videos.cdn.mozilla.net"],
	"worker-src": ["'none'"],
	};

[caugner]

Here's a screenshot of the network requests triggered by translating http://example.com/ with Chrome's translate feature:

So I believe we need to

• add translate.googleapis.com to style-src
• add translate.google.com to image-src

And I will see if I can create a PR shortly.

[caugner]

CSP was not the cause, because other articles translated without any issues.

Here are two observations I made:

• If I remove the left sidebar or the main content from the DOM, translation works fine.
• If I open the Chrome DevTools and reload the article, translation works fine.

This all sounds more like a Chrome bug than a MDN bug, and in fact there is a very recent issue in Chrome's bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=1304514

[caugner]

If I visit chrome://translate-internals/#detection-logs in Chrome, I see a 6: Translation Error, but no details:

According to the Detection Logs tabs, Chrome extracts the article's content properly:

[schalkneethling]

It indeed works just fine on https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach for example. I was also able to translate the above page from English to Arabic

[schalkneethling]

@Hill-98 Can you perhaps update your version of Chrome to 99 and see if the problem persists? I tested with Version 99.0.4844.51

[Hill-98]

The problem is still there, but I found the element causing the problem.
If I remove this element, the translation works fine: #sidebar-quicklinks > div > div:nth-child(3) > ol > li:nth-child(12) > details > ol > li:nth-child(2) > a

Likewise, the translation feature does not work at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor.

I think it has something to do with constructor.

[caugner]

@Hill-98 Would you mind filing an issue for this in the Chromium issue tracker? That would be great!

[Hill-98]

@caugner

I have not used Chromium issue tracker and my English is not very good.

If you'd like to submit this issue in the Chromium issue tracker, that's certainly fine.