WackoWiki

View source for Re: Problems when updating from 6.2.1 to 6.3.0

((commit:51f301eba0869afe48bd17efa161955bef38ddf9 --ww-bg-nav)) is darker.

You must add a **CSP nonce** to the script. See theme header how its done.

%%(hl html)
<script src="[ ' db: base_path ' ]js/core/helpers.js"[ ' db: csp_nonce ' ]></script>
%%
%%(hl html)
<script[ ' db: csp_nonce ' ]>
	var lang	= '[ ' lang | js ' ]';
	function translate_web(language)
	{ 
		document.location = 'https://translate.google.com/translate?langpair='+lang+'|'+ language.value+'&sl='+lang+'&tl='+ language.value+'&u=' + escape(document.location);
	}

	if (top.frames.length != 0)
	{
		document.getElementById("translateCombo").disabled=true;
	}
</script>
%%

Maybe its better to ((/Dev/PatchesHacks/GoogleTranslate replace the inline script completely)).

%%(hl js)
// assets/js/translate.js

/**
 * Initializes the Google Translate dropdown functionality.
 * Expects a <select id="translateCombo"> with a data-current-lang attribute.
 */
document.addEventListener('DOMContentLoaded', function () {
    const combo = document.getElementById('translateCombo');
    
    // If the element doesn't exist on this page, do nothing
    if (!combo) return;

    // 1. Read the current language from the data attribute (set in HTML)
    const currentLang = combo.dataset.currentLang;

    // 2. Attach the change event listener (replaces inline onchange)
    combo.addEventListener('change', function () {
        translateWeb(currentLang, this.value);
    });

    // 3. Handle frames logic (replaces inline script block)
    if (window.top !== window.self) {
        combo.disabled = true;
    }
});

/**
 * Redirects to Google Translate.
 * @param {string} fromLang - Source language code (e.g., 'en')
 * @param {string} toLang   - Target language code (e.g., 'es')
 */
function translateWeb(fromLang, toLang) {
    // If user selects the same language or default empty value, do nothing
    if (!toLang || fromLang === toLang) return;

    const url = 'https://translate.google.com/translate' +
        '?langpair=' + encodeURIComponent(fromLang + '|' + toLang) +
        '&sl=' + encodeURIComponent(fromLang) +
        '&tl=' + encodeURIComponent(toLang) +
        '&u=' + encodeURIComponent(window.location.href);

    window.location.href = url;
}
%%

%%(hl html)
<div id="login-box">
	[= gt =
		<!-- Google Translate -->
		[ ' _t: Language ' ]:
		<!-- 
			1. Removed inline onchange 
			2. Added data-current-lang to pass the '[ ' lang | e js ' ]' variable safely 
		-->
		<select id="translateCombo" data-current-lang="[ ' lang | e js ' ]">
			[= o =
				<option value="[ ' lang ' ]"[ ' selected ' ]>[ ' language | e ' ]</option>
			=]
		</select>
	=]
</div>

<!-- 
	Include the external script. 
	'defer' ensures it runs after HTML is parsed (replaces DOMContentReady logic safety). 
	Adjust the 'src' path to match your folder structure.
-->
<script src="[ ' db: base_path ' ]js/core/translate.js"[ ' db: csp_nonce ' ] defer></script>
%%


For guests (read cache) it will remove the CSP token on the fly. 

%%(hl CSP)
Content-Security-Policy:
	default-src 'self';
	base-uri 'self';
	form-action 'self';
	frame-ancestors 'self';

	script-src 'self' 'strict-dynamic' 'nonce-{nonce}';
	script-src-elem 'self' 'strict-dynamic' 'nonce-{nonce}';
	script-src-attr 'self' 'nonce-{nonce}';

	style-src 'self' 'unsafe-inline';
	style-src-elem 'self' 'unsafe-inline';

	img-src 'self' data:;
	font-src 'self' data:;

	frame-src 'self';
	media-src 'self';
	object-src 'none';

	connect-src 'self';
	worker-src 'self';

	upgrade-insecure-requests;

	report-uri /csp-reports;
	report-to csp-endpoint;
%%