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`
**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

View File

@ -875,7 +875,7 @@ describe('Choices - select multiple', () => {
it('logs a deprecation warning', () => {
cy.get('@consoleWarn').should(
'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', () => {
cy.get('@consoleWarn').should(
'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', () => {
cy.get('@consoleWarn').should(
'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) {
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,

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

View File

@ -240,7 +240,9 @@ describe('choices', () => {
document.body.innerHTML = `
<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,
'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) {
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;
/**
* Whether HTML should be shown properly when showing choices.
* (Can be used to perform XSS attacks if not disabled or handled correctly)
* 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.
*
* **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 { PassedElementType } from './interfaces/passed-element-type';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type TemplateOptions = Record<'classNames' | 'allowHTML', any>;
const templates = {
@ -46,7 +47,9 @@ const templates = {
return div;
},
containerInner({ classNames: { containerInner } }: TemplateOptions): HTMLDivElement {
containerInner({
classNames: { containerInner },
}: TemplateOptions): HTMLDivElement {
return Object.assign(document.createElement('div'), {
className: containerInner,
});
@ -160,7 +163,10 @@ const templates = {
},
choiceGroup(
{ allowHTML, classNames: { group, groupHeading, itemDisabled } }: TemplateOptions,
{
allowHTML,
classNames: { group, groupHeading, itemDisabled },
}: TemplateOptions,
{ id, value, disabled }: Group,
): HTMLDivElement {
const div = Object.assign(document.createElement('div'), {
@ -268,7 +274,9 @@ const templates = {
return inp;
},
dropdown({ classNames: { list, listDropdown } }: TemplateOptions): HTMLDivElement {
dropdown({
classNames: { list, listDropdown },
}: TemplateOptions): HTMLDivElement {
const div = document.createElement('div');
div.classList.add(list, listDropdown);