LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

fix(chat): fix missing alt tags on custom emoji. Closes #3106

Browse Source
This commit is contained in:
Gabe Kangas 2023-06-26 11:37:34 -07:00
parent b696efb0eb
commit d33f117a82
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
5 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
core/chat/events/events.go
View File

@ -125,9 +125,9 @@ func RenderMarkdown(raw string) string {
} }
var ( var (
_sanitizeReSrcMatch = regexp.MustCompile(`(?i)^/img/emoji/[^\.%]*.[A-Z]*$`) _sanitizeReSrcMatch = regexp.MustCompile(`(?i)^/img/emoji/[^\.%]*.[A-Z]*$`)
_sanitizeReAltTitleMatch = regexp.MustCompile(`:\S+:`) _sanitizeReClassMatch = regexp.MustCompile(`(?i)^(emoji)[A-Z_]*?$`)
_sanitizeReClassMatch = regexp.MustCompile(`(?i)^(emoji)[A-Z_]*?$`) _sanitizeNonEmptyMatch = regexp.MustCompile(`^.+$`)
) )
func sanitize(raw string) string { func sanitize(raw string) string {
@ -153,7 +153,7 @@ func sanitize(raw string) string {
// Allow img tags from the the local emoji directory only // Allow img tags from the the local emoji directory only
p.AllowAttrs("src").Matching(_sanitizeReSrcMatch).OnElements("img") p.AllowAttrs("src").Matching(_sanitizeReSrcMatch).OnElements("img")
p.AllowAttrs("alt", "title").Matching(_sanitizeReAltTitleMatch).OnElements("img") p.AllowAttrs("alt", "title").Matching(_sanitizeNonEmptyMatch).OnElements("img")
p.AllowAttrs("class").Matching(_sanitizeReClassMatch).OnElements("img") p.AllowAttrs("class").Matching(_sanitizeReClassMatch).OnElements("img")
// Allow bold // Allow bold

15
core/chat/messageRendering_test.go
View File

@ -10,17 +10,14 @@ import (
// and fully rendered HTML out of it. // and fully rendered HTML out of it.
func TestRenderAndSanitize(t *testing.T) { func TestRenderAndSanitize(t *testing.T) {
messageContent := ` messageContent := `
Test one two three! I go to http://yahoo.com and search for _sports_ and **answers**. Test one two three! I go to http://yahoo.com and search for _sports_ and **answers**.
Here is an iframe <iframe src="http://yahoo.com"></iframe> Here is an iframe<iframe src="http://yahoo.com"></iframe>
## blah blah blah
## blah blah blah [test link](http://owncast.online)
[test link](http://owncast.online) <img class="emoji" src="/img/emoji/bananadance.gif">`
<img class="emoji" alt="bananadance.gif" width="600px" src="/img/emoji/bananadance.gif">
<script src="http://hackers.org/hack.js"></script>
`
expected := `Test one two three! I go to <a href="http://yahoo.com" rel="nofollow noreferrer noopener" target="_blank">http://yahoo.com</a> and search for <em>sports</em> and <strong>answers</strong>. expected := `Test one two three! I go to <a href="http://yahoo.com" rel="nofollow noreferrer noopener" target="_blank">http://yahoo.com</a> and search for <em>sports</em> and <strong>answers</strong>.
Here is an iframe Here is an iframe
blah blah blah blah blah blah
<a href="http://owncast.online" rel="nofollow noreferrer noopener" target="_blank">test link</a> <a href="http://owncast.online" rel="nofollow noreferrer noopener" target="_blank">test link</a>
<img class="emoji" src="/img/emoji/bananadance.gif">` <img class="emoji" src="/img/emoji/bananadance.gif">`

2
web/components/chat/ChatTextField/ChatTextField.tsx
View File

@ -179,7 +179,7 @@ export const ChatTextField: FC<ChatTextFieldProps> = ({ defaultText, enabled, fo
// Custom emoji images // Custom emoji images
const onCustomEmojiSelect = (name: string, emoji: string) => { const onCustomEmojiSelect = (name: string, emoji: string) => {
const html = `<img src="${emoji}" alt="${name}" title=${name} class="emoji" />`; const html = `<img src="${emoji}" alt="${name}" title="${name}" class="emoji" />`;
insertTextAtCursor(html); insertTextAtCursor(html);
}; };

2
web/components/chat/ChatTextField/EmojiPicker.tsx
View File

@ -43,7 +43,7 @@ export const EmojiPicker: FC<EmojiPickerProps> = ({ onEmojiSelect, onCustomEmoji
}); });
picker.addEventListener('emoji:select', event => { picker.addEventListener('emoji:select', event => {
if (event.url) { if (event.url) {
onCustomEmojiSelect(event.name, event.url); onCustomEmojiSelect(event.label, event.url);
} else { } else {
onEmojiSelect(event.emoji); onEmojiSelect(event.emoji);
} }

1
web/components/chat/ChatUserMessage/ChatUserMessage.tsx
View File

@ -81,6 +81,7 @@ export const ChatUserMessage: FC<ChatUserMessageProps> = ({
if (isAuthorBot) { if (isAuthorBot) {
badgeNodes.push(<BotUserBadge key="bot" userColor={displayColor} />); badgeNodes.push(<BotUserBadge key="bot" userColor={displayColor} />);
} }
return ( return (
<div <div
className={cn( className={cn(