Update allowHTML wording, set remote examples to allowHTML false

This commit is contained in:
Matt Triff 2021-12-26 09:36:12 -05:00
parent 391c3e39cb
commit 66c6864267
11 changed files with 31 additions and 16 deletions

View File

@ -319,9 +319,11 @@ Pass an array of objects:
**Type:** `Boolean` **Default:** `true` **Type:** `Boolean` **Default:** `true`
**Input types affected:** `text`, `select-one`, `select-multiple **Input types affected:** `text`, `select-one`, `select-multiple`
**Usage:** Whether HTML should be shown properly when showing choices. (Can be used to perform XSS attacks if not disabled or handled correctly) **Usage:** Whether HTML should be rendered in all Choices elements. If `false`, all elements (placeholder, items, etc.) will be treated as plain text. If `true`, this can be used to perform XSS scripting attacks if you load choices from a remote source.
**Deprecation Warning:** This will default to `false` in a future release.
### duplicateItemsAllowed ### duplicateItemsAllowed

View File

@ -875,7 +875,7 @@ describe('Choices - select multiple', () => {
it('logs a deprecation warning', () => { it('logs a deprecation warning', () => {
cy.get('@consoleWarn').should( cy.get('@consoleWarn').should(
'be.calledOnceWithExactly', 'be.calledOnceWithExactly',
'Deprecation warning: allowHTML in the future will be defaulted to false. You must explicitly set it to true to properly display html tags in choices.', 'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.',
); );
}); });

View File

@ -1010,7 +1010,7 @@ describe('Choices - select one', () => {
it('logs a deprecation warning', () => { it('logs a deprecation warning', () => {
cy.get('@consoleWarn').should( cy.get('@consoleWarn').should(
'be.calledOnceWithExactly', 'be.calledOnceWithExactly',
'Deprecation warning: allowHTML in the future will be defaulted to false. You must explicitly set it to true to properly display html tags in choices.', 'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.',
); );
}); });

View File

@ -364,7 +364,7 @@ describe('Choices - text element', () => {
it('logs a deprecation warning', () => { it('logs a deprecation warning', () => {
cy.get('@consoleWarn').should( cy.get('@consoleWarn').should(
'be.calledOnceWithExactly', 'be.calledOnceWithExactly',
'Deprecation warning: allowHTML in the future will be defaulted to false. You must explicitly set it to true to properly display html tags in choices.', 'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.',
); );
}); });

View File

@ -292,7 +292,7 @@ function () {
} }
if (userConfig.allowHTML === undefined) { if (userConfig.allowHTML === undefined) {
console.warn('Deprecation warning: allowHTML in the future will be defaulted to false. You must explicitly set it to true to properly display html tags in choices.'); console.warn('Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.');
} }
this.config = deepmerge_1.default.all([defaults_1.DEFAULT_CONFIG, Choices.defaults.options, userConfig], // When merging array configs, replace with a copy of the userConfig array, this.config = deepmerge_1.default.all([defaults_1.DEFAULT_CONFIG, Choices.defaults.options, userConfig], // When merging array configs, replace with a copy of the userConfig array,

File diff suppressed because one or more lines are too long

View File

@ -624,7 +624,7 @@
); );
var multipleFetch = new Choices('#choices-multiple-remote-fetch', { var multipleFetch = new Choices('#choices-multiple-remote-fetch', {
allowHTML: true, allowHTML: false,
placeholder: true, placeholder: true,
placeholderValue: 'Pick an Strokes record', placeholderValue: 'Pick an Strokes record',
maxItemCount: 5, maxItemCount: 5,
@ -687,7 +687,7 @@
); );
var singleFetch = new Choices('#choices-single-remote-fetch', { var singleFetch = new Choices('#choices-single-remote-fetch', {
allowHTML: true, allowHTML: false,
searchPlaceholderValue: 'Search for an Arctic Monkeys record', searchPlaceholderValue: 'Search for an Arctic Monkeys record',
}) })
.setChoices(function() { .setChoices(function() {

View File

@ -240,7 +240,9 @@ describe('choices', () => {
document.body.innerHTML = ` document.body.innerHTML = `
<div data-choice id="div-1"></div> <div data-choice id="div-1"></div>
`; `;
expect(() => new Choices('[data-choice]', { allowHTML: true })).to.throw( expect(
() => new Choices('[data-choice]', { allowHTML: true }),
).to.throw(
TypeError, TypeError,
'Expected one of the following types text|select-one|select-multiple', 'Expected one of the following types text|select-one|select-multiple',
); );

View File

@ -153,7 +153,7 @@ class Choices implements Choices {
) { ) {
if (userConfig.allowHTML === undefined) { if (userConfig.allowHTML === undefined) {
console.warn( console.warn(
'Deprecation warning: allowHTML in the future will be defaulted to false. You must explicitly set it to true to properly display html tags in choices.', 'Deprecation warning: allowHTML will default to false in a future release. To render HTML in Choices, you will need to set it to true. Setting allowHTML will suppress this message.',
); );
} }

View File

@ -160,8 +160,11 @@ export interface Options {
editItems: boolean; editItems: boolean;
/** /**
* Whether HTML should be shown properly when showing choices. * Whether HTML should be rendered in all Choices elements.
* (Can be used to perform XSS attacks if not disabled or handled correctly) * If `false`, all elements (placeholder, items, etc.) will be treated as plain text.
* If `true`, this can be used to perform XSS scripting attacks if you load choices from a remote source.
*
* **Deprecation Warning:** This will default to `false` in a future release.
* *
* **Input types affected:** text, select-one, select-multiple * **Input types affected:** text, select-one, select-multiple
* *

View File

@ -8,6 +8,7 @@ import { Group } from './interfaces/group';
import { Item } from './interfaces/item'; import { Item } from './interfaces/item';
import { PassedElementType } from './interfaces/passed-element-type'; import { PassedElementType } from './interfaces/passed-element-type';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type TemplateOptions = Record<'classNames' | 'allowHTML', any>; type TemplateOptions = Record<'classNames' | 'allowHTML', any>;
const templates = { const templates = {
@ -46,7 +47,9 @@ const templates = {
return div; return div;
}, },
containerInner({ classNames: { containerInner } }: TemplateOptions): HTMLDivElement { containerInner({
classNames: { containerInner },
}: TemplateOptions): HTMLDivElement {
return Object.assign(document.createElement('div'), { return Object.assign(document.createElement('div'), {
className: containerInner, className: containerInner,
}); });
@ -160,7 +163,10 @@ const templates = {
}, },
choiceGroup( choiceGroup(
{ allowHTML, classNames: { group, groupHeading, itemDisabled } }: TemplateOptions, {
allowHTML,
classNames: { group, groupHeading, itemDisabled },
}: TemplateOptions,
{ id, value, disabled }: Group, { id, value, disabled }: Group,
): HTMLDivElement { ): HTMLDivElement {
const div = Object.assign(document.createElement('div'), { const div = Object.assign(document.createElement('div'), {
@ -268,7 +274,9 @@ const templates = {
return inp; return inp;
}, },
dropdown({ classNames: { list, listDropdown } }: TemplateOptions): HTMLDivElement { dropdown({
classNames: { list, listDropdown },
}: TemplateOptions): HTMLDivElement {
const div = document.createElement('div'); const div = document.createElement('div');
div.classList.add(list, listDropdown); div.classList.add(list, listDropdown);