Add to do list support to markdown

[aav7fl]

Proposed change

Adds <input> with checked, disabled, and type attributes to the whitelist in renderMarkdown.

This allows checkboxes in the Markdown card to render.

Right now we're pulling in getDefaultWhiteList from xs-jss which has a whitelist of allowed HTML tags and attributes. <input> is not on that list (which is necessary for the Markdown checkboxes):

• https://github.com/leizongmin/js-xss/blob/5711a9c5fac93f3f54541a7b4f7c780ba38adac6/dist/xss.js#L12

If we choose not to support markdown checkboxes due to xss concerns, I'll happily open a PR instead to update the documentation for the markdown card explaining why.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

type: markdown
content: >-
  - [ ] Checkbox unselected

  - [x] Checkbox selected

Additional information

• This PR fixes or closes issue: Fixes Markdown checkboxes #10084
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[balloob]

Can we limit what values type can be?

[aav7fl]

Can we limit what values type can be?

I believe it can be done by customizing the onTagAttr handler: https://github.com/leizongmin/js-xss#customize-the-handler-function-for-attributes-of-matched-tags

If we return nothing (or undefined), it will continue the default behavior and render the tags and attributes we're checking for.

Else, we return an empty string '' to render nothing for that tag. It still leaves us with an empty <input> tag on improper tags though.

I pushed up a change that does as you describe.

- [ ] Checkbox
- [x] Checkbox
<li><input type="button"></li>
- [x] Checkbox

creates this:

[aav7fl]

Hi @balloob. I was wondering if you have the chance to offer more feedback on the code I added where it's using the onTagAttr as a way to limit the attribute values.

One area I'm not certain about is the usage of returning undefined. The xss library we're using states retuning "nothing" will follow the default behavior in the lib, but our linter doesn't like that (so I return undefined). I can always override the line and return nothing.

Or if the current solution is acceptable, we're good to go.

[balloob]

Tested locally and looks all good 👍 Thanks!