Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(web): prevent cookie-default behavior from mangling engine init #13331

Merged
merged 1 commit into from
Feb 26, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions web/src/app/browser/src/contextManager.ts
Original file line number Diff line number Diff line change
Expand Up @@ -759,7 +759,7 @@ export default class ContextManager extends ContextManagerBase<BrowserConfigurat
var v = cookie.load(decodeURIComponent);

if(typeof(v.current) != 'string') {
return 'Keyboard_us:en';
return null;
} else if(v.current == 'Keyboard_us:eng') {
// 16.0 used the :eng variant!
return 'Keyboard_us:en';
Expand Down Expand Up @@ -820,11 +820,14 @@ export default class ContextManager extends ContextManagerBase<BrowserConfigurat
}

// Find the matching stub; if it doesn't exist, default to the first available stub.
let stub = this.keyboardCache.getStub(t[0], t[1]) || this.keyboardCache.defaultStub;
Copy link
Contributor Author

@jahorton jahorton Feb 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The way this original line worked was at the core of the error we saw. If we had any default stub, that was enough to try activating the Keyboard_us keyboard if given the signal - regardless of whether or not it was present!

let stub = this.keyboardCache.getStub(t[0], t[1]);

// Sets the default stub (as specified with the `getSavedKeyboard` call) as active.
if(stub) {
this.activateKeyboard(t[0], t[1]);
} else {
const {id, langId} = this.getFallbackStubKey()
this.activateKeyboard(id, langId);
}
}

Expand Down
19 changes: 12 additions & 7 deletions web/src/app/browser/src/keymanEngine.ts
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ export default class KeymanEngine extends KeymanEngineBase<BrowserConfiguration,

// Capture the saved-keyboard string now, before we load any keyboards/stubs
// or do anything that would mutate the value.
const savedKeyboardStr = this.contextManager.getSavedKeyboardRaw();
let savedKeyboardStr = this.contextManager.getSavedKeyboardRaw();

if(device.touchable) {
this.osk = new views.AnchoredOSKView(this);
Expand All @@ -228,12 +228,17 @@ export default class KeymanEngine extends KeymanEngineBase<BrowserConfiguration,
// Let any deferred, pre-init stubs complete registration
await Promise.resolve();

// Attempt to restore the user's last-used keyboard from their previous session.
//
// Note: any cloud stubs will probably not be available yet.
// If we tracked cloud requests and awaited a Promise.all on pending queries,
// we could handle that too.
this.contextManager.restoreSavedKeyboard(savedKeyboardStr);
// If there's no value here, we should check to see if `Keyboard_us:en`
// is one of the available stubs; we default to that if it's available.
savedKeyboardStr ||= this.contextManager.getSavedKeyboard();
if(savedKeyboardStr) {
// Attempt to restore the user's last-used keyboard from their previous session.
//
// Note: any cloud stubs will probably not be available yet.
// If we tracked cloud requests and awaited a Promise.all on pending queries,
// we could handle that too.
this.contextManager.restoreSavedKeyboard(savedKeyboardStr);
}

await Promise.resolve();
}
Expand Down
16 changes: 16 additions & 0 deletions web/src/test/manual/web/issue11785/clear-cookies.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
function clearCookies() {
var cookies = document.cookie.split("; ");
for (var c = 0; c < cookies.length; c++) {
var d = window.location.hostname.split(".");
while (d.length > 0) {
var cookieBase = encodeURIComponent(cookies[c].split(";")[0].split("=")[0]) + '=; expires=Thu, 01-Jan-1970 00:00:01 GMT; domain=' + d.join('.') + ' ;path=';
var p = location.pathname.split('/');
document.cookie = cookieBase + '/';
while (p.length > 0) {
document.cookie = cookieBase + p.join('/');
p.pop();
};
d.shift();
}
}
}
7 changes: 6 additions & 1 deletion web/src/test/manual/web/issue11785/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@
<script src="../../../../../build/publish/debug/kmwuitoggle.js"></script>

<!-- Add keyboard management script for local selection of keyboards to use -->
<script src="../commonHeader.js"></script>
<script src="./load-keyboards.js"></script>
<script src="./clear-cookies.js"></script>

<!-- Initialization: set paths to keyboards, resources and fonts as required -->
<script>
Expand Down Expand Up @@ -69,6 +70,10 @@ <h3>Type in your language in this text area:</h3>
<h3>or in this input field:</h3>
<input class='test' value='' placeholder='or here'/>

<div>
<input type="button" id="'cookie-clear" onclick="clearCookies();" value="Clear page cookies" />
</div>

<!-- The following elements show how the language menu can be dynamically extended at any time -->
<h3>Add a keyboard by keyboard name:</h3>
<input type='input' id='kbd_id1' class='kmw-disabled' onkeypress="clickOnEnter(event,1);"/>
Expand Down
171 changes: 171 additions & 0 deletions web/src/test/manual/web/issue11785/load-keyboards.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
// JavaScript Document samplehdr.js: Keyboard management for KeymanWeb demonstration pages

/*
The keyboard name and/or BCP-47 language code must be specified for each keyboard that is to be available.
If the same keyboard is used for several languages, it must be listed for each
language, but the keyboard itself will only be loaded once.
If two (or more) keyboards are to be available for a given language, both must be listed.
Any number of keyboards may be specified in one or more calls.
Keyboard paths may be absolute (with respect to the server root) or relative to the keyboards option path.
The actual keyboard object will be downloaded asynchronously when first selected for use.

Each argument to addKeyboards() is a string, for example:
european2 loads the current version of the Eurolatin 2 keyboard (for its default language)
european2@fr loads the current version of the Eurolatin 2 keyboard for French
european2@fr@1.2 loads version 1.2 of the Eurolatin 2 keyboard for French

Argument syntax also supports the following extensions:
@fr load the current version of the default keyboard for French
@fr$ load all available keyboards (current version) for French

Each call to addKeyboards() requires a single call to the remote server,
(unless all keyboards listed are local and fully specified) so it is better
to use multiple arguments rather than separate function calls.

Calling addKeyboards() with no arguments returns a list of *all* available keyboards.
The Toolbar (desktop browser) UI is best suited for allowing users to select
the appropriate language and keyboard in this case.

Keyboards may also be specified by language name using addKeyboardsForLanguage()
for example:
keymanweb.addKeyboardsForLanguage('Burmese');

Appending $ to the language name will again cause all available keyboards for that
language to be loaded rather than the default keyboard.

The first call to addKeyboardsForLanguage() makes an additional call to the
keyman API to load the current list of keyboard/language associations.

In this example, the following function loads the indicated keyboards,
and is called when the page loads.
*/

function errToString(err) {
// Painful? Kinda. But needed on un-updated Android API 21!
if(Array.isArray(err)) {
var result = '';
for(var i = 0; i < err.length; i++) {
var e = err[i];
if(e.error instanceof Error) {
result += e.error.message + '\n';
} else {
result += JSON.stringify(e) + '\n';
}
}
return result;
}
if(err instanceof Error) {
return err.message;
}
return JSON.stringify(err);
}

function doAddKeyboards(data) {
return keyman.addKeyboards(data).catch(function(err) {
console.error('keyman.addKeyboards failed with '+errToString(err)+' for '+JSON.stringify(data));
});
}

function doAddKeyboardsForLanguage(data) {
return keyman.addKeyboardsForLanguage(data).catch(function(err) {
console.error('keyman.addKeyboardsForLanguage failed with '+errToString(err)+' for '+JSON.stringify(data));
});
}

function loadKeyboards(nestLevel)
{
var kmw=keyman;

var base_prefix = '../';
var prefix = './'; // The default - when prefix == 0.

if(nestLevel !== undefined && nestLevel > 0) {
prefix = '';
for(var i=0; i < nestLevel; i++) {
prefix = prefix + base_prefix;
}
}

// The first keyboard added will be the default keyboard for touch devices.
// For faster loading, it may be best for the default keyboard to be
// locally sourced.
// doAddKeyboards({id:'us',name:'English',languages:{id:'en',name:'English'},
// filename:(prefix + 'us-1.0.js')});

// Do NOT link the us-1.0 keyboard here!
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the difference between the original "commonHeader.js" and this specialized version - we do not want the us / Keyboard_us keyboard here, as its presence will greatly affect attempts to reproduce this PR's base issue.


doAddKeyboards({id:'test_chirality',name:'test_chirality',languages:{id:'en',name:'English'},
filename:(prefix + 'test_chirality.js')});

doAddKeyboards({id:'obolo_chwerty_6351',name:'obolo_chwerty_6351',languages:{id:'en',name:'English'},
filename:(prefix + 'obolo_chwerty_6351.js')});

doAddKeyboards({id:'gesture_prototyping',name:'Gesture Prototyping',languages:{id:'en',name:'English'},
filename:(prefix + 'keyboards/gesture_prototyping/build/gesture_prototyping.js')});

doAddKeyboards({id:'diacritic_rota',name:'Diacritic 10-key Rota',languages:{id:'en',name:'English'},
filename:(prefix + 'keyboards/diacritic_rota/build/diacritic_rota.js')});

doAddKeyboards({id:'ye_old_ten_key',name:'Classic 10-key',languages:{id:'en',name:'English'},
filename:(prefix + 'keyboards/ye_old_ten_key/build/ye_old_ten_key.js')});

// Add more keyboards to the language menu, by keyboard name,
// keyboard name and language code, or just the BCP-47 language code.
// We use a different loading pattern here than in the samples version to provide a slightly different set of test cases.
doAddKeyboards('french','@he');
doAddKeyboards('khmer_angkor','@km');
doAddKeyboards({id:'sil_euro_latin', name:'SIL EuroLatin', languages: [{id:'no'}, {id:'sv'}]}); // Loads from partial stub instead of the compact string.

// Add a keyboard by language name. Note that the name must be spelled
// correctly, or the keyboard will not be found. (Using BCP-47 codes is
// usually easier.)
doAddKeyboardsForLanguage('Dzongkha');

// Add a fully-specified, locally-sourced, keyboard with custom font
doAddKeyboards({id:'lao_2008_basic',name:'Lao Basic',
languages: {
id:'lo',name:'Lao',region:'Asia',
},
filename:(prefix + 'lao_2008_basic-1.2.js')
});

// The following two optional calls should be delayed until language menus are fully loaded:
// (a) a specific mapped input element input is focused, to ensure that the OSK appears
// (b) a specific keyboard is loaded, rather than the keyboard last used.
//window.setTimeout(function(){kmw.setActiveElement('ta1',true);},2500);
//window.setTimeout(function(){kmw.setActiveKeyboard('Keyboard_french','fr');},3000);

// Note that locally specified keyboards will be listed before keyboards
// requested from the remote server by user interfaces that do not order
// keyboards alphabetically by language.
}

// Script to allow a user to add any keyboard to the keyboard menu
function addKeyboard(n)
{
var sKbd,kmw=keyman;
switch(n)
{
case 1:
sKbd=document.getElementById('kbd_id1').value;
doAddKeyboards(sKbd);
break;
case 2:
sKbd=document.getElementById('kbd_id2').value.toLowerCase();
doAddKeyboards('@'+sKbd);
break;
case 3:
// Add keyboard for comma-separated language name(s)
sKbd=document.getElementById('kbd_id3').value;
doAddKeyboardsForLanguage(sKbd);
break;
}
}

// Add keyboard on Enter (as well as pressing button)
function clickOnEnter(e,id)
{
e = e || window.event;
if(e.keyCode == 13) addKeyboard(id);
}