ilja/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Don't require # in the data-mfm-color attribute

Browse source 
For colour in MFM attributes, we expected a `#`, but that's apparently wrong. The BE
translates the `color` attribute in `$[fg.color=000 text]` into `data-mfm-color=000`.
But for the SCSS to work, we need to put it in the style attribute as `--mfm-color: #000`.

Generally we just add the attribute value as-is in the `style` attribute, but now we
have a special exception for color so we add a `#` before the value.
This commit is contained in:
ilja 2024-08-18 15:48:22 +02:00
parent 6666a273a4
commit 25681cf5f6
2 changed files with 40 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/rich_content/rich_content.jsx
View file

@ -194,12 +194,13 @@ export default {
// Turn data-mfm- attributes into a string for the `style` attribute
// If they have a value different than `true`, they need to be added to `style`
// e.g. `attrs={'data-mfm-some': '1deg', 'data-mfm-thing': '5s'}` => "--mfm-some: 1deg;--mfm-thing: 5s;"
// Note that we only add the value to `style` when they contain only letters, numbers, dot, hash, or plus or minus signs
// Note that we only add the value to `style` when they contain only letters, numbers, dot, or minus signs
// At the moment of writing, this should be enough for legitimite purposes and reduces the chance of injection by using special characters
// There is a special case for the `color` value, who is provided without `#`, but requires this in the `style` attribute
let mfm_style = Object.keys(attrs).filter(
(key) => key.startsWith('data-mfm-') && attrs[key] !== true && /^[a-zA-Z0-9.\-+#]*$/.test(attrs[key])
(key) => key.startsWith('data-mfm-') && attrs[key] !== true && /^[a-zA-Z0-9.\-]*$/.test(attrs[key])
).map(
(key) => '--mfm-' + key.substr(9) + ': ' + attrs[key] + ';'
(key) => '--mfm-' + key.substr(9) + (key === 'data-mfm-color' ? ': #' : ': ') + attrs[key] + ';'
).reduce((a,v) => a+v, '')
if (mfm_style !== '') {
return [

43
test/unit/specs/components/rich_content.spec.js
View file

@ -40,9 +40,9 @@ describe('RichContent', () => {
expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(html))
})
it('does not allow injection through MFM data- attributes', () => {
const html_ok = '<span class="mfm-spin" data-mfm-speed="-0.2s" data-mfm-color="#000" data-mfm-deg="+30">brrr</span>'
const expected_ok = '<span class="mfm-spin" data-mfm-speed="-0.2s" data-mfm-color="#000" data-mfm-deg="+30" style="--mfm-speed: -0.2s; --mfm-color: #000; --mfm-deg: +30;">brrr</span>'
it('it adds a # to the MFM color style value', () => {
const html_ok = '<span class="mfm-fg" data-mfm-color="fff">this text is not white</span>'
const expected_ok = '<span class="mfm-fg" data-mfm-color="fff" style="--mfm-color: #fff;">this text is not white</span>'
const wrapper_ok = shallowMount(RichContent, {
global,
props: {
@ -53,20 +53,49 @@ describe('RichContent', () => {
html: html_ok
}
})
const html_nok = '<span class="mfm-spin" data-mfm-speed="<" data-mfm-color="\\">brrr</span>'
const wrapper_nok = shallowMount(RichContent, {
expect(wrapper_ok.html()).to.eql(compwrap(expected_ok))
})
it('does not allow injection through MFM data- attributes', () => {
const html_ok = '<span class="mfm-spin" data-mfm-speed="-0.2s">brrr</span>'
const expected_ok = '<span class="mfm-spin" data-mfm-speed="-0.2s" style="--mfm-speed: -0.2s;">brrr</span>'
const wrapper_ok = shallowMount(RichContent, {
global,
props: {
attentions,
handleLinks: true,
greentext: true,
emoji: [],
html: html_nok
html: html_ok
}
})
const html_nok1 = '<span class="mfm-spin" data-mfm-speed="<">brrr</span>'
const wrapper_nok1 = shallowMount(RichContent, {
global,
props: {
attentions,
handleLinks: true,
greentext: true,
emoji: [],
html: html_nok1
}
})
const html_nok2 = '<span class="mfm-spin" data-mfm-speed="\\">brrr</span>'
const wrapper_nok2 = shallowMount(RichContent, {
global,
props: {
attentions,
handleLinks: true,
greentext: true,
emoji: [],
html: html_nok2
}
})
expect(wrapper_ok.html()).to.eql(compwrap(expected_ok))
expect(wrapper_nok.html()).to.eql(compwrap(html_nok))
expect(wrapper_nok1.html()).to.eql(compwrap(html_nok1))
expect(wrapper_nok2.html()).to.eql(compwrap(html_nok2))
})
it('unescapes everything as needed', () => {