paulmataruso/zulip-desktop
1
0
Fork 0
mirror of https://github.com/zulip/zulip-desktop.git synced 2025-11-04 14:03:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

CVE-2020-24582: Escape all strings interpolated into HTML.

Browse Source 
Also fix various variable names to consistently indicate which strings
contain HTML.

Some of these changes close cross-site scripting vulnerabilities, and
others are for consistency.  It’s important to be meticulously
consistent about escaping so that changes that would introduce
vulnerabilities stand out as obviously wrong.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
2020-08-24 19:37:37 -07:00
parent b7240e1c40
commit a9d59b3dcd
23 changed files with 170 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/main/request.ts
View File

@@ -4,7 +4,6 @@ import path from 'path';
import stream from 'stream'; import stream from 'stream';
import util from 'util'; import util from 'util';
import escape from 'escape-html';
import getStream from 'get-stream'; import getStream from 'get-stream';
import {ServerConf} from '../renderer/js/utils/domain-util'; import {ServerConf} from '../renderer/js/utils/domain-util';
@@ -73,7 +72,7 @@ export const _getServerSettings = async (domain: string, session: Electron.sessi
// Following check handles both the cases // Following check handles both the cases
icon: realm_icon.startsWith('/') ? realm_uri + realm_icon : realm_icon, icon: realm_icon.startsWith('/') ? realm_uri + realm_icon : realm_icon,
url: realm_uri, url: realm_uri,
alias: escape(realm_name) alias: realm_name
}; };
}; };

2
app/renderer/about.html
View File

@@ -26,7 +26,7 @@
const { app } = require('electron').remote; const { app } = require('electron').remote;
const version_tag = document.querySelector('#version'); const version_tag = document.querySelector('#version');
version_tag.innerHTML = 'v' + app.getVersion(); version_tag.textContent = 'v' + app.getVersion();
</script> </script>
<script>require('./js/shared/preventdrag.js')</script> <script>require('./js/shared/preventdrag.js')</script>
</body> </body>

4
app/renderer/js/components/base.ts
View File

@@ -1,7 +1,7 @@
export default class BaseComponent { export default class BaseComponent {
generateNodeFromTemplate(template: string): Element | null { generateNodeFromHTML(html: string): Element | null {
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
wrapper.innerHTML = template; wrapper.innerHTML = html;
return wrapper.firstElementChild; return wrapper.firstElementChild;
} }
} }

24
app/renderer/js/components/functional-tab.ts
View File

@@ -1,3 +1,5 @@
import {htmlEscape} from 'escape-goat';
import Tab, {TabProps} from './tab'; import Tab, {TabProps} from './tab';
export default class FunctionalTab extends Tab { export default class FunctionalTab extends Tab {
@@ -8,19 +10,21 @@ export default class FunctionalTab extends Tab {
this.init(); this.init();
} }
template(): string { templateHTML(): string {
return `<div class="tab functional-tab" data-tab-id="${this.props.tabIndex}"> return htmlEscape`
<div class="server-tab-badge close-button"> <div class="tab functional-tab" data-tab-id="${this.props.tabIndex}">
<i class="material-icons">close</i> <div class="server-tab-badge close-button">
</div> <i class="material-icons">close</i>
<div class="server-tab"> </div>
<i class="material-icons">${this.props.materialIcon}</i> <div class="server-tab">
</div> <i class="material-icons">${this.props.materialIcon}</i>
</div>`; </div>
</div>
`;
} }
init(): void { init(): void {
this.$el = this.generateNodeFromTemplate(this.template()); this.$el = this.generateNodeFromHTML(this.templateHTML());
if (this.props.name !== 'Settings') { if (this.props.name !== 'Settings') {
this.props.$root.append(this.$el); this.props.$root.append(this.$el);
this.$closeButton = this.$el.querySelectorAll('.server-tab-badge')[0]; this.$closeButton = this.$el.querySelectorAll('.server-tab-badge')[0];

26
app/renderer/js/components/server-tab.ts
View File

@@ -1,5 +1,7 @@
import {ipcRenderer} from 'electron'; import {ipcRenderer} from 'electron';
import {htmlEscape} from 'escape-goat';
import * as SystemUtil from '../utils/system-util'; import * as SystemUtil from '../utils/system-util';
import Tab, {TabProps} from './tab'; import Tab, {TabProps} from './tab';
@@ -12,19 +14,21 @@ export default class ServerTab extends Tab {
this.init(); this.init();
} }
template(): string { templateHTML(): string {
return `<div class="tab" data-tab-id="${this.props.tabIndex}"> return htmlEscape`
<div class="server-tooltip" style="display:none">${this.props.name}</div> <div class="tab" data-tab-id="${this.props.tabIndex}">
<div class="server-tab-badge"></div> <div class="server-tooltip" style="display:none">${this.props.name}</div>
<div class="server-tab"> <div class="server-tab-badge"></div>
<img class="server-icons" src='${this.props.icon}'/> <div class="server-tab">
</div> <img class="server-icons" src="${this.props.icon}"/>
<div class="server-tab-shortcut">${this.generateShortcutText()}</div> </div>
</div>`; <div class="server-tab-shortcut">${this.generateShortcutText()}</div>
</div>
`;
} }
init(): void { init(): void {
this.$el = this.generateNodeFromTemplate(this.template()); this.$el = this.generateNodeFromHTML(this.templateHTML());
this.props.$root.append(this.$el); this.props.$root.append(this.$el);
this.registerListeners(); this.registerListeners();
this.$badge = this.$el.querySelectorAll('.server-tab-badge')[0]; this.$badge = this.$el.querySelectorAll('.server-tab-badge')[0];
@@ -33,7 +37,7 @@ export default class ServerTab extends Tab {
updateBadge(count: number): void { updateBadge(count: number): void {
if (count > 0) { if (count > 0) {
const formattedCount = count > 999 ? '1K+' : count.toString(); const formattedCount = count > 999 ? '1K+' : count.toString();
this.$badge.innerHTML = formattedCount; this.$badge.textContent = formattedCount;
this.$badge.classList.add('active'); this.$badge.classList.add('active');
} else { } else {
this.$badge.classList.remove('active'); this.$badge.classList.remove('active');

36
app/renderer/js/components/webview.ts
View File

@@ -2,6 +2,8 @@ import {ipcRenderer, remote} from 'electron';
import fs from 'fs'; import fs from 'fs';
import path from 'path'; import path from 'path';
import {htmlEscape} from 'escape-goat';
import * as ConfigUtil from '../utils/config-util'; import * as ConfigUtil from '../utils/config-util';
import * as SystemUtil from '../utils/system-util'; import * as SystemUtil from '../utils/system-util';
@@ -50,25 +52,27 @@ export default class WebView extends BaseComponent {
this.$webviewsContainer = document.querySelector('#webviews-container').classList; this.$webviewsContainer = document.querySelector('#webviews-container').classList;
} }
template(): string { templateHTML(): string {
return `<webview return htmlEscape`
class="disabled" <webview
data-tab-id="${this.props.tabIndex}" class="disabled"
src="${this.props.url}" data-tab-id="${this.props.tabIndex}"
${this.props.nodeIntegration ? 'nodeIntegration' : ''} src="${this.props.url}"
${this.props.preload ? 'preload="js/preload.js"' : ''} ` + (this.props.nodeIntegration ? 'nodeIntegration' : '') + htmlEscape`
partition="persist:webviewsession" ` + (this.props.preload ? 'preload="js/preload.js"' : '') + htmlEscape`
name="${this.props.name}" partition="persist:webviewsession"
webpreferences=" name="${this.props.name}"
${this.props.nodeIntegration ? '' : 'contextIsolation,'} webpreferences="
${ConfigUtil.getConfigItem('enableSpellchecker') ? 'spellcheck,' : ''} ${this.props.nodeIntegration ? '' : 'contextIsolation,'}
javascript ${ConfigUtil.getConfigItem('enableSpellchecker') ? 'spellcheck,' : ''}
"> javascript
</webview>`; ">
</webview>
`;
} }
init(): void { init(): void {
this.$el = this.generateNodeFromTemplate(this.template()) as Electron.WebviewTag; this.$el = this.generateNodeFromHTML(this.templateHTML()) as Electron.WebviewTag;
this.domReady = new Promise(resolve => { this.domReady = new Promise(resolve => {
this.$el.addEventListener('dom-ready', () => resolve(), true); this.$el.addEventListener('dom-ready', () => resolve(), true);
}); });

20
app/renderer/js/main.ts
View File

@@ -2,7 +2,6 @@ import {ipcRenderer, remote, clipboard} from 'electron';
import path from 'path'; import path from 'path';
import isDev from 'electron-is-dev'; import isDev from 'electron-is-dev';
import escape from 'escape-html';
import * as Messages from '../../resources/messages'; import * as Messages from '../../resources/messages';
@@ -10,7 +9,6 @@ import FunctionalTab from './components/functional-tab';
import ServerTab from './components/server-tab'; import ServerTab from './components/server-tab';
import WebView from './components/webview'; import WebView from './components/webview';
import {feedbackHolder} from './feedback'; import {feedbackHolder} from './feedback';
import * as CommonUtil from './utils/common-util';
import * as ConfigUtil from './utils/config-util'; import * as ConfigUtil from './utils/config-util';
import * as DNDUtil from './utils/dnd-util'; import * as DNDUtil from './utils/dnd-util';
import type {DNDSettings} from './utils/dnd-util'; import type {DNDSettings} from './utils/dnd-util';
@@ -125,7 +123,7 @@ class ServerManagerView {
this.$fullscreenPopup = document.querySelector('#fullscreen-popup'); this.$fullscreenPopup = document.querySelector('#fullscreen-popup');
this.$fullscreenEscapeKey = process.platform === 'darwin' ? '^⌘F' : 'F11'; this.$fullscreenEscapeKey = process.platform === 'darwin' ? '^⌘F' : 'F11';
this.$fullscreenPopup.innerHTML = `Press ${this.$fullscreenEscapeKey} to exit full screen`; this.$fullscreenPopup.textContent = `Press ${this.$fullscreenEscapeKey} to exit full screen`;
this.loading = new Set(); this.loading = new Set();
this.activeTabIndex = -1; this.activeTabIndex = -1;
@@ -358,7 +356,7 @@ class ServerManagerView {
this.tabs.push(new ServerTab({ this.tabs.push(new ServerTab({
role: 'server', role: 'server',
icon: server.icon, icon: server.icon,
name: CommonUtil.decodeString(server.alias), name: server.alias,
$root: this.$tabsContainer, $root: this.$tabsContainer,
onClick: this.activateLastTab.bind(this, index), onClick: this.activateLastTab.bind(this, index),
index, index,
@@ -371,7 +369,7 @@ class ServerManagerView {
tabIndex, tabIndex,
url: server.url, url: server.url,
role: 'server', role: 'server',
name: CommonUtil.decodeString(server.alias), name: server.alias,
hasPermission: (origin: string, permission: string) => hasPermission: (origin: string, permission: string) =>
origin === server.url && permission === 'notifications', origin === server.url && permission === 'notifications',
isActive: () => index === this.activeTabIndex, isActive: () => index === this.activeTabIndex,
@@ -499,7 +497,7 @@ class ServerManagerView {
} }
onHover(index: number): void { onHover(index: number): void {
// `this.$serverIconTooltip[index].innerHTML` already has realm name, so we are just // `this.$serverIconTooltip[index].textContent` already has realm name, so we are just
// removing the style. // removing the style.
this.$serverIconTooltip[index].removeAttribute('style'); this.$serverIconTooltip[index].removeAttribute('style');
// To handle position of servers' tooltip due to scrolling of list of organizations // To handle position of servers' tooltip due to scrolling of list of organizations
@@ -684,8 +682,8 @@ class ServerManagerView {
this.functionalTabs.clear(); this.functionalTabs.clear();
// Clear DOM elements // Clear DOM elements
this.$tabsContainer.innerHTML = ''; this.$tabsContainer.textContent = '';
this.$webviewsContainer.innerHTML = ''; this.$webviewsContainer.textContent = '';
} }
async reloadView(): Promise<void> { async reloadView(): Promise<void> {
@@ -929,11 +927,11 @@ class ServerManagerView {
if (domain.url.includes(serverURL)) { if (domain.url.includes(serverURL)) {
const serverTooltipSelector = '.tab .server-tooltip'; const serverTooltipSelector = '.tab .server-tooltip';
const serverTooltips = document.querySelectorAll(serverTooltipSelector); const serverTooltips = document.querySelectorAll(serverTooltipSelector);
serverTooltips[index].innerHTML = escape(realmName); serverTooltips[index].textContent = realmName;
this.tabs[index].props.name = escape(realmName); this.tabs[index].props.name = realmName;
this.tabs[index].webview.props.name = realmName; this.tabs[index].webview.props.name = realmName;
domain.alias = escape(realmName); domain.alias = realmName;
DomainUtil.updateDomain(index, domain); DomainUtil.updateDomain(index, domain);
// Update the realm name also on the Window menu // Update the realm name also on the Window menu
ipcRenderer.send('update-menu', { ipcRenderer.send('update-menu', {

8
app/renderer/js/pages/preference/add-certificate.ts
View File

@@ -1,6 +1,8 @@
import {remote, OpenDialogOptions} from 'electron'; import {remote, OpenDialogOptions} from 'electron';
import path from 'path'; import path from 'path';
import {htmlEscape} from 'escape-goat';
import BaseComponent from '../../components/base'; import BaseComponent from '../../components/base';
import * as CertificateUtil from '../../utils/certificate-util'; import * as CertificateUtil from '../../utils/certificate-util';
import * as DomainUtil from '../../utils/domain-util'; import * as DomainUtil from '../../utils/domain-util';
@@ -24,8 +26,8 @@ export default class AddCertificate extends BaseComponent {
this._certFile = ''; this._certFile = '';
} }
template(): string { templateHTML(): string {
return ` return htmlEscape`
<div class="settings-card certificates-card"> <div class="settings-card certificates-card">
<div class="certificate-input"> <div class="certificate-input">
<div>${t.__('Organization URL')}</div> <div>${t.__('Organization URL')}</div>
@@ -40,7 +42,7 @@ export default class AddCertificate extends BaseComponent {
} }
init(): void { init(): void {
this.$addCertificate = this.generateNodeFromTemplate(this.template()); this.$addCertificate = this.generateNodeFromHTML(this.templateHTML());
this.props.$root.append(this.$addCertificate); this.props.$root.append(this.$addCertificate);
this.addCertificateButton = this.$addCertificate.querySelector('#add-certificate-button'); this.addCertificateButton = this.$addCertificate.querySelector('#add-certificate-button');
this.serverUrl = this.$addCertificate.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement; this.serverUrl = this.$addCertificate.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;

40
app/renderer/js/pages/preference/base-section.ts
View File

@@ -1,6 +1,6 @@
import {ipcRenderer} from 'electron'; import {ipcRenderer} from 'electron';
import escape from 'escape-html'; import {htmlEscape} from 'escape-goat';
import BaseComponent from '../../components/base'; import BaseComponent from '../../components/base';
@@ -15,9 +15,9 @@ export default class BaseSection extends BaseComponent {
generateSettingOption(props: BaseSectionProps): void { generateSettingOption(props: BaseSectionProps): void {
const {$element, disabled, value, clickHandler} = props; const {$element, disabled, value, clickHandler} = props;
$element.innerHTML = ''; $element.textContent = '';
const $optionControl = this.generateNodeFromTemplate(this.generateOptionTemplate(value, disabled)); const $optionControl = this.generateNodeFromHTML(this.generateOptionHTML(value, disabled));
$element.append($optionControl); $element.append($optionControl);
if (!disabled) { if (!disabled) {
@@ -25,39 +25,39 @@ export default class BaseSection extends BaseComponent {
} }
} }
generateOptionTemplate(settingOption: boolean, disabled?: boolean): string { generateOptionHTML(settingOption: boolean, disabled?: boolean): string {
const label = disabled ? '<label class="disallowed" title="Setting locked by system administrator."/>' : '<label/>'; const labelHTML = disabled ? '<label class="disallowed" title="Setting locked by system administrator."></label>' : '<label></label>';
if (settingOption) { if (settingOption) {
return ` return htmlEscape`
<div class="action"> <div class="action">
<div class="switch"> <div class="switch">
<input class="toggle toggle-round" type="checkbox" checked disabled> <input class="toggle toggle-round" type="checkbox" checked disabled>
${label} ` + labelHTML + htmlEscape`
</div> </div>
</div> </div>
`; `;
} }
return ` return htmlEscape`
<div class="action"> <div class="action">
<div class="switch"> <div class="switch">
<input class="toggle toggle-round" type="checkbox"> <input class="toggle toggle-round" type="checkbox">
${label} ` + labelHTML + htmlEscape`
</div>
</div> </div>
`; </div>
`;
} }
/* A method that in future can be used to create dropdown menus using <select> <option> tags. /* A method that in future can be used to create dropdown menus using <select> <option> tags.
it needs an object which has ``key: value`` pairs and will return a string that can be appended to HTML it needs an object which has ``key: value`` pairs and will return a string that can be appended to HTML
*/ */
generateSelectTemplate(options: {[key: string]: string}, className?: string, idName?: string): string { generateSelectHTML(options: {[key: string]: string}, className?: string, idName?: string): string {
let select = `<select class="${escape(className)}" id="${escape(idName)}">\n`; let html = htmlEscape`<select class="${className}" id="${idName}">\n`;
Object.keys(options).forEach(key => { Object.keys(options).forEach(key => {
select += `<option name="${escape(key)}" value="${escape(key)}">${escape(options[key])}</option>\n`; html += htmlEscape`<option name="${key}" value="${key}">${options[key]}</option>\n`;
}); });
select += '</select>'; html += '</select>';
return select; return html;
} }
reloadApp(): void { reloadApp(): void {

12
app/renderer/js/pages/preference/connected-org-section.ts
View File

@@ -1,5 +1,7 @@
import {ipcRenderer} from 'electron'; import {ipcRenderer} from 'electron';
import {htmlEscape} from 'escape-goat';
import * as DomainUtil from '../../utils/domain-util'; import * as DomainUtil from '../../utils/domain-util';
import * as t from '../../utils/translation-util'; import * as t from '../../utils/translation-util';
@@ -24,8 +26,8 @@ export default class ConnectedOrgSection extends BaseSection {
this.props = props; this.props = props;
} }
template(): string { templateHTML(): string {
return ` return htmlEscape`
<div class="settings-pane" id="server-settings-pane"> <div class="settings-pane" id="server-settings-pane">
<div class="page-title">${t.__('Connected organizations')}</div> <div class="page-title">${t.__('Connected organizations')}</div>
<div class="title" id="existing-servers">${t.__('All the connected orgnizations will appear here.')}</div> <div class="title" id="existing-servers">${t.__('All the connected orgnizations will appear here.')}</div>
@@ -44,10 +46,10 @@ export default class ConnectedOrgSection extends BaseSection {
} }
initServers(): void { initServers(): void {
this.props.$root.innerHTML = ''; this.props.$root.textContent = '';
const servers = DomainUtil.getDomains(); const servers = DomainUtil.getDomains();
this.props.$root.innerHTML = this.template(); this.props.$root.innerHTML = this.templateHTML();
this.$serverInfoContainer = document.querySelector('#server-info-container'); this.$serverInfoContainer = document.querySelector('#server-info-container');
this.$existingServers = document.querySelector('#existing-servers'); this.$existingServers = document.querySelector('#existing-servers');
@@ -57,7 +59,7 @@ export default class ConnectedOrgSection extends BaseSection {
const noServerText = t.__('All the connected orgnizations will appear here'); const noServerText = t.__('All the connected orgnizations will appear here');
// Show noServerText if no servers are there otherwise hide it // Show noServerText if no servers are there otherwise hide it
this.$existingServers.innerHTML = servers.length === 0 ? noServerText : ''; this.$existingServers.textContent = servers.length === 0 ? noServerText : '';
for (const [i, server] of servers.entries()) { for (const [i, server] of servers.entries()) {
new ServerInfoForm({ new ServerInfoForm({

8
app/renderer/js/pages/preference/find-accounts.ts
View File

@@ -1,3 +1,5 @@
import {htmlEscape} from 'escape-goat';
import BaseComponent from '../../components/base'; import BaseComponent from '../../components/base';
import * as LinkUtil from '../../utils/link-util'; import * as LinkUtil from '../../utils/link-util';
import * as t from '../../utils/translation-util'; import * as t from '../../utils/translation-util';
@@ -16,8 +18,8 @@ export default class FindAccounts extends BaseComponent {
this.props = props; this.props = props;
} }
template(): string { templateHTML(): string {
return ` return htmlEscape`
<div class="settings-card certificate-card"> <div class="settings-card certificate-card">
<div class="certificate-input"> <div class="certificate-input">
<div>${t.__('Organization URL')}</div> <div>${t.__('Organization URL')}</div>
@@ -31,7 +33,7 @@ export default class FindAccounts extends BaseComponent {
} }
init(): void { init(): void {
this.$findAccounts = this.generateNodeFromTemplate(this.template()); this.$findAccounts = this.generateNodeFromHTML(this.templateHTML());
this.props.$root.append(this.$findAccounts); this.props.$root.append(this.$findAccounts);
this.$findAccountsButton = this.$findAccounts.querySelector('#find-accounts-button'); this.$findAccountsButton = this.$findAccounts.querySelector('#find-accounts-button');
this.$serverUrlField = this.$findAccounts.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement; this.$serverUrlField = this.$findAccounts.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;

13
app/renderer/js/pages/preference/general-section.ts
View File

@@ -2,6 +2,7 @@ import {ipcRenderer, remote, OpenDialogOptions} from 'electron';
import path from 'path'; import path from 'path';
import Tagify from '@yaireo/tagify'; import Tagify from '@yaireo/tagify';
import {htmlEscape} from 'escape-goat';
import fs from 'fs-extra'; import fs from 'fs-extra';
import ISO6391 from 'iso-639-1'; import ISO6391 from 'iso-639-1';
@@ -26,8 +27,8 @@ export default class GeneralSection extends BaseSection {
this.props = props; this.props = props;
} }
template(): string { templateHTML(): string {
return ` return htmlEscape`
<div class="settings-pane"> <div class="settings-pane">
<div class="title">${t.__('Appearance')}</div> <div class="title">${t.__('Appearance')}</div>
<div id="appearance-option-settings" class="settings-card"> <div id="appearance-option-settings" class="settings-card">
@@ -157,7 +158,7 @@ export default class GeneralSection extends BaseSection {
} }
init(): void { init(): void {
this.props.$root.innerHTML = this.template(); this.props.$root.innerHTML = this.templateHTML();
this.updateTrayOption(); this.updateTrayOption();
this.updateBadgeOption(); this.updateBadgeOption();
this.updateSilentOption(); this.updateSilentOption();
@@ -399,8 +400,8 @@ export default class GeneralSection extends BaseSection {
setLocale(): void { setLocale(): void {
const langDiv: HTMLSelectElement = document.querySelector('.lang-div'); const langDiv: HTMLSelectElement = document.querySelector('.lang-div');
const langList = this.generateSelectTemplate(supportedLocales, 'lang-menu'); const langListHTML = this.generateSelectHTML(supportedLocales, 'lang-menu');
langDiv.innerHTML += langList; langDiv.innerHTML += langListHTML;
// `langMenu` is the select-option dropdown menu formed after executing the previous command // `langMenu` is the select-option dropdown menu formed after executing the previous command
const langMenu: HTMLSelectElement = document.querySelector('.lang-menu'); const langMenu: HTMLSelectElement = document.querySelector('.lang-menu');
@@ -516,7 +517,7 @@ export default class GeneralSection extends BaseSection {
const note: HTMLElement = document.querySelector('#note'); const note: HTMLElement = document.querySelector('#note');
note.append(t.__('You can select a maximum of 3 languages for spellchecking.')); note.append(t.__('You can select a maximum of 3 languages for spellchecking.'));
const spellDiv: HTMLElement = document.querySelector('#spellcheck-langs'); const spellDiv: HTMLElement = document.querySelector('#spellcheck-langs');
spellDiv.innerHTML += ` spellDiv.innerHTML += htmlEscape`
<div class="setting-description">${t.__('Spellchecker Languages')}</div> <div class="setting-description">${t.__('Spellchecker Languages')}</div>
<input name='spellcheck' placeholder='Enter Languages'>`; <input name='spellcheck' placeholder='Enter Languages'>`;

14
app/renderer/js/pages/preference/nav.ts
View File

@@ -1,3 +1,5 @@
import {htmlEscape} from 'escape-goat';
import BaseComponent from '../../components/base'; import BaseComponent from '../../components/base';
import * as t from '../../utils/translation-util'; import * as t from '../../utils/translation-util';
@@ -17,22 +19,22 @@ export default class PreferenceNav extends BaseComponent {
this.init(); this.init();
} }
template(): string { templateHTML(): string {
let navItemsTemplate = ''; let navItemsHTML = '';
for (const navItem of this.navItems) { for (const navItem of this.navItems) {
navItemsTemplate += `<div class="nav" id="nav-${navItem}">${t.__(navItem)}</div>`; navItemsHTML += htmlEscape`<div class="nav" id="nav-${navItem}">${t.__(navItem)}</div>`;
} }
return ` return htmlEscape`
<div> <div>
<div id="settings-header">${t.__('Settings')}</div> <div id="settings-header">${t.__('Settings')}</div>
<div id="nav-container">${navItemsTemplate}</div> <div id="nav-container">` + navItemsHTML + htmlEscape`</div>
</div> </div>
`; `;
} }
init(): void { init(): void {
this.$el = this.generateNodeFromTemplate(this.template()); this.$el = this.generateNodeFromHTML(this.templateHTML());
this.props.$root.append(this.$el); this.props.$root.append(this.$el);
this.registerListeners(); this.registerListeners();
} }

8
app/renderer/js/pages/preference/network-section.ts
View File

@@ -1,5 +1,7 @@
import {ipcRenderer} from 'electron'; import {ipcRenderer} from 'electron';
import {htmlEscape} from 'escape-goat';
import * as ConfigUtil from '../../utils/config-util'; import * as ConfigUtil from '../../utils/config-util';
import * as t from '../../utils/translation-util'; import * as t from '../../utils/translation-util';
@@ -21,8 +23,8 @@ export default class NetworkSection extends BaseSection {
this.props = props; this.props = props;
} }
template(): string { templateHTML(): string {
return ` return htmlEscape`
<div class="settings-pane"> <div class="settings-pane">
<div class="title">${t.__('Proxy')}</div> <div class="title">${t.__('Proxy')}</div>
<div id="appearance-option-settings" class="settings-card"> <div id="appearance-option-settings" class="settings-card">
@@ -59,7 +61,7 @@ export default class NetworkSection extends BaseSection {
} }
init(): void { init(): void {
this.props.$root.innerHTML = this.template(); this.props.$root.innerHTML = this.templateHTML();
this.$proxyPAC = document.querySelector('#proxy-pac-option .setting-input-value'); this.$proxyPAC = document.querySelector('#proxy-pac-option .setting-input-value');
this.$proxyRules = document.querySelector('#proxy-rules-option .setting-input-value'); this.$proxyRules = document.querySelector('#proxy-rules-option .setting-input-value');
this.$proxyBypass = document.querySelector('#proxy-bypass-option .setting-input-value'); this.$proxyBypass = document.querySelector('#proxy-bypass-option .setting-input-value');

14
app/renderer/js/pages/preference/new-server-form.ts
View File

@@ -1,5 +1,7 @@
import {ipcRenderer, remote} from 'electron'; import {ipcRenderer, remote} from 'electron';
import {htmlEscape} from 'escape-goat';
import BaseComponent from '../../components/base'; import BaseComponent from '../../components/base';
import * as DomainUtil from '../../utils/domain-util'; import * as DomainUtil from '../../utils/domain-util';
import * as LinkUtil from '../../utils/link-util'; import * as LinkUtil from '../../utils/link-util';
@@ -22,8 +24,8 @@ export default class NewServerForm extends BaseComponent {
this.props = props; this.props = props;
} }
template(): string { templateHTML(): string {
return ` return htmlEscape`
<div class="server-input-container"> <div class="server-input-container">
<div class="title">${t.__('Organization URL')}</div> <div class="title">${t.__('Organization URL')}</div>
<div class="add-server-info-row"> <div class="add-server-info-row">
@@ -56,20 +58,20 @@ export default class NewServerForm extends BaseComponent {
} }
initForm(): void { initForm(): void {
this.$newServerForm = this.generateNodeFromTemplate(this.template()); this.$newServerForm = this.generateNodeFromHTML(this.templateHTML());
this.$saveServerButton = this.$newServerForm.querySelector('#connect'); this.$saveServerButton = this.$newServerForm.querySelector('#connect');
this.props.$root.innerHTML = ''; this.props.$root.textContent = '';
this.props.$root.append(this.$newServerForm); this.props.$root.append(this.$newServerForm);
this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement; this.$newServerUrl = this.$newServerForm.querySelectorAll('input.setting-input-value')[0] as HTMLInputElement;
} }
async submitFormHandler(): Promise<void> { async submitFormHandler(): Promise<void> {
this.$saveServerButton.innerHTML = 'Connecting...'; this.$saveServerButton.textContent = 'Connecting...';
let serverConf; let serverConf;
try { try {
serverConf = await DomainUtil.checkDomain(this.$newServerUrl.value); serverConf = await DomainUtil.checkDomain(this.$newServerUrl.value);
} catch (error) { } catch (error) {
this.$saveServerButton.innerHTML = 'Connect'; this.$saveServerButton.textContent = 'Connect';
await dialog.showMessageBox({ await dialog.showMessageBox({
type: 'error', type: 'error',
message: error.toString(), message: error.toString(),

8
app/renderer/js/pages/preference/server-info-form.ts
View File

@@ -1,5 +1,7 @@
import {remote, ipcRenderer} from 'electron'; import {remote, ipcRenderer} from 'electron';
import {htmlEscape} from 'escape-goat';
import * as Messages from '../../../../resources/messages'; import * as Messages from '../../../../resources/messages';
import BaseComponent from '../../components/base'; import BaseComponent from '../../components/base';
import * as DomainUtil from '../../utils/domain-util'; import * as DomainUtil from '../../utils/domain-util';
@@ -26,8 +28,8 @@ export default class ServerInfoForm extends BaseComponent {
this.props = props; this.props = props;
} }
template(): string { templateHTML(): string {
return ` return htmlEscape`
<div class="settings-card"> <div class="settings-card">
<div class="server-info-left"> <div class="server-info-left">
<img class="server-info-icon" src="${this.props.server.icon}"/> <img class="server-info-icon" src="${this.props.server.icon}"/>
@@ -56,7 +58,7 @@ export default class ServerInfoForm extends BaseComponent {
} }
initForm(): void { initForm(): void {
this.$serverInfoForm = this.generateNodeFromTemplate(this.template()); this.$serverInfoForm = this.generateNodeFromHTML(this.templateHTML());
this.$serverInfoAlias = this.$serverInfoForm.querySelectorAll('.server-info-alias')[0]; this.$serverInfoAlias = this.$serverInfoForm.querySelectorAll('.server-info-alias')[0];
this.$serverIcon = this.$serverInfoForm.querySelectorAll('.server-info-icon')[0]; this.$serverIcon = this.$serverInfoForm.querySelectorAll('.server-info-icon')[0];
this.$deleteServerButton = this.$serverInfoForm.querySelectorAll('.server-delete-action')[0]; this.$deleteServerButton = this.$serverInfoForm.querySelectorAll('.server-delete-action')[0];

22
app/renderer/js/pages/preference/servers-section.ts
View File

@@ -1,3 +1,5 @@
import {htmlEscape} from 'escape-goat';
import * as t from '../../utils/translation-util'; import * as t from '../../utils/translation-util';
import BaseSection from './base-section'; import BaseSection from './base-section';
@@ -15,16 +17,16 @@ export default class ServersSection extends BaseSection {
this.props = props; this.props = props;
} }
template(): string { templateHTML(): string {
return ` return htmlEscape`
<div class="add-server-modal"> <div class="add-server-modal">
<div class="modal-container"> <div class="modal-container">
<div class="settings-pane" id="server-settings-pane"> <div class="settings-pane" id="server-settings-pane">
<div class="page-title">${t.__('Add a Zulip organization')}</div> <div class="page-title">${t.__('Add a Zulip organization')}</div>
<div id="new-server-container"></div> <div id="new-server-container"></div>
</div>
</div> </div>
</div> </div>
</div>
`; `;
} }
@@ -33,9 +35,9 @@ export default class ServersSection extends BaseSection {
} }
initServers(): void { initServers(): void {
this.props.$root.innerHTML = ''; this.props.$root.textContent = '';
this.props.$root.innerHTML = this.template(); this.props.$root.innerHTML = this.templateHTML();
this.$newServerContainer = document.querySelector('#new-server-container'); this.$newServerContainer = document.querySelector('#new-server-container');
this.initNewServerForm(); this.initNewServerForm();

14
app/renderer/js/pages/preference/shortcuts-section.ts
View File

@@ -1,3 +1,5 @@
import {htmlEscape} from 'escape-goat';
import * as LinkUtil from '../../utils/link-util'; import * as LinkUtil from '../../utils/link-util';
import * as t from '../../utils/translation-util'; import * as t from '../../utils/translation-util';
@@ -14,14 +16,14 @@ export default class ShortcutsSection extends BaseSection {
this.props = props; this.props = props;
} }
// TODO - Deduplicate templateMac and templateWinLin functions. In theory // TODO - Deduplicate templateMacHTML and templateWinLinHTML functions. In theory
// they both should be the same the only thing different should be the userOSKey // they both should be the same the only thing different should be the userOSKey
// variable but there seems to be inconsistences between both function, one has more // variable but there seems to be inconsistences between both function, one has more
// lines though one may just be using more new lines and other thing is the use of +. // lines though one may just be using more new lines and other thing is the use of +.
templateMac(): string { templateMacHTML(): string {
const userOSKey = '⌘'; const userOSKey = '⌘';
return ` return htmlEscape`
<div class="settings-pane"> <div class="settings-pane">
<div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>${t.__('Tip')}: </b>${t.__('These desktop app shortcuts extend the Zulip webapp\'s')} <span id="open-hotkeys-link"> ${t.__('keyboard shortcuts')}</span>.</p></div> <div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>${t.__('Tip')}: </b>${t.__('These desktop app shortcuts extend the Zulip webapp\'s')} <span id="open-hotkeys-link"> ${t.__('keyboard shortcuts')}</span>.</p></div>
<div class="title">${t.__('Application Shortcuts')}</div> <div class="title">${t.__('Application Shortcuts')}</div>
@@ -182,10 +184,10 @@ export default class ShortcutsSection extends BaseSection {
`; `;
} }
templateWinLin(): string { templateWinLinHTML(): string {
const userOSKey = 'Ctrl'; const userOSKey = 'Ctrl';
return ` return htmlEscape`
<div class="settings-pane"> <div class="settings-pane">
<div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>${t.__('Tip')}: </b>${t.__('These desktop app shortcuts extend the Zulip webapp\'s')} <span id="open-hotkeys-link"> ${t.__('keyboard shortcuts')}</span>.</p></div> <div class="settings-card tip"><p><b><i class="material-icons md-14">settings</i>${t.__('Tip')}: </b>${t.__('These desktop app shortcuts extend the Zulip webapp\'s')} <span id="open-hotkeys-link"> ${t.__('keyboard shortcuts')}</span>.</p></div>
<div class="title">${t.__('Application Shortcuts')}</div> <div class="title">${t.__('Application Shortcuts')}</div>
@@ -340,7 +342,7 @@ export default class ShortcutsSection extends BaseSection {
init(): void { init(): void {
this.props.$root.innerHTML = (process.platform === 'darwin') ? this.props.$root.innerHTML = (process.platform === 'darwin') ?
this.templateMac() : this.templateWinLin(); this.templateMacHTML() : this.templateWinLinHTML();
this.openHotkeysExternalLink(); this.openHotkeysExternalLink();
} }
} }

8
app/renderer/js/utils/common-util.ts
View File

@@ -1,8 +0,0 @@
// Unescape already encoded/escaped strings
export function decodeString(stringInput: string): string {
const parser = new DOMParser();
const dom = parser.parseFromString(
'<!doctype html><body>' + stringInput,
'text/html');
return dom.body.textContent;
}

8
app/renderer/js/utils/link-util.ts
View File

@@ -3,7 +3,7 @@ import fs from 'fs';
import os from 'os'; import os from 'os';
import path from 'path'; import path from 'path';
import escape from 'escape-html'; import {htmlEscape} from 'escape-goat';
export function isUploadsUrl(server: string, url: URL): boolean { export function isUploadsUrl(server: string, url: URL): boolean {
return url.origin === server && url.pathname.startsWith('/user_uploads/'); return url.origin === server && url.pathname.startsWith('/user_uploads/');
@@ -19,12 +19,12 @@ export async function openBrowser(url: URL): Promise<void> {
path.join(os.tmpdir(), 'zulip-redirect-') path.join(os.tmpdir(), 'zulip-redirect-')
); );
const file = path.join(dir, 'redirect.html'); const file = path.join(dir, 'redirect.html');
fs.writeFileSync(file, `\ fs.writeFileSync(file, htmlEscape`\
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="Refresh" content="0; url=${escape(url.href)}" /> <meta http-equiv="Refresh" content="0; url=${url.href}" />
<title>Redirecting</title> <title>Redirecting</title>
<style> <style>
html { html {
@@ -33,7 +33,7 @@ export async function openBrowser(url: URL): Promise<void> {
</style> </style>
</head> </head>
<body> <body>
<p>Opening <a href="${escape(url.href)}">${escape(url.href)}</a>…</p> <p>Opening <a href="${url.href}">${url.href}</a>…</p>
</body> </body>
</html> </html>
`); `);

3
app/renderer/js/utils/reconnect-util.ts
View File

@@ -1,6 +1,7 @@
import {ipcRenderer} from 'electron'; import {ipcRenderer} from 'electron';
import backoff from 'backoff'; import backoff from 'backoff';
import {htmlEscape} from 'escape-goat';
import type WebView from '../components/webview'; import type WebView from '../components/webview';
@@ -60,7 +61,7 @@ export default class ReconnectUtil {
logger.log('There is no internet connection, try checking network cables, modem and router.'); logger.log('There is no internet connection, try checking network cables, modem and router.');
const errorMessageHolder = document.querySelector('#description'); const errorMessageHolder = document.querySelector('#description');
if (errorMessageHolder) { if (errorMessageHolder) {
errorMessageHolder.innerHTML = ` errorMessageHolder.innerHTML = htmlEscape`
<div>Your internet connection doesn't seem to work properly!</div> <div>Your internet connection doesn't seem to work properly!</div>
<div>Verify that it works and then click try again.</div>`; <div>Verify that it works and then click try again.</div>`;
} }

26
package-lock.json generated
View File

@@ -652,12 +652,6 @@
"integrity": "sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ==", "integrity": "sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ==",
"dev": true "dev": true
}, },
"@types/escape-html": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@types/escape-html/-/escape-html-1.0.0.tgz",
"integrity": "sha512-Ehe6irbxo5BSYwG03buglLJCmy3JqqtC69UvopsBWYf4hDa+ZODJ7BuZU6y+YE4U6MaoSruTxM2+uePfAHts9Q==",
"dev": true
},
"@types/eslint-visitor-keys": { "@types/eslint-visitor-keys": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz", "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
@@ -3686,15 +3680,9 @@
"dev": true "dev": true
}, },
"escape-goat": { "escape-goat": {
"version": "2.1.1", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz", "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-3.0.0.tgz",
"integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==", "integrity": "sha512-w3PwNZJwRxlp47QGzhuEBldEqVHHhh8/tIPcl6ecf2Bou99cdAt0knihBV0Ecc7CGxYduXVBDheH1K2oADRlvw=="
"dev": true
},
"escape-html": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
"integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
}, },
"escape-string-regexp": { "escape-string-regexp": {
"version": "4.0.0", "version": "4.0.0",
@@ -9116,6 +9104,14 @@
"dev": true, "dev": true,
"requires": { "requires": {
"escape-goat": "^2.0.0" "escape-goat": "^2.0.0"
},
"dependencies": {
"escape-goat": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
"integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==",
"dev": true
}
} }
}, },
"puppeteer-core": { "puppeteer-core": {

3
package.json
View File

@@ -155,7 +155,7 @@
"electron-log": "^4.2.4", "electron-log": "^4.2.4",
"electron-updater": "^4.3.4", "electron-updater": "^4.3.4",
"electron-window-state": "^5.0.3", "electron-window-state": "^5.0.3",
"escape-html": "^1.0.3", "escape-goat": "^3.0.0",
"fs-extra": "^9.0.1", "fs-extra": "^9.0.1",
"get-stream": "^6.0.0", "get-stream": "^6.0.0",
"i18n": "^0.13.2", "i18n": "^0.13.2",
@@ -171,7 +171,6 @@
"@types/adm-zip": "^0.4.33", "@types/adm-zip": "^0.4.33",
"@types/auto-launch": "^5.0.1", "@types/auto-launch": "^5.0.1",
"@types/backoff": "^2.5.1", "@types/backoff": "^2.5.1",
"@types/escape-html": "^1.0.0",
"@types/fs-extra": "^9.0.1", "@types/fs-extra": "^9.0.1",
"@types/i18n": "^0.8.7", "@types/i18n": "^0.8.7",
"@types/node": "^14.6.4", "@types/node": "^14.6.4",