Disallow URL BB Code around Unicode emojis

[frm]

This is the first time I've seen an emoji used for spam.

Without hovering over an emoji, you would never know it's a link unless a CSS setting underlines it or somehow shows it as a link. For this reason, BBCode URLs shouldn't be able to wrap Unicode emojis unless the default XF style addresses this by making them appear clearly as links and not render them as seemingly innocent (JoyPixel) emojis. Otherwise, each emoji in a post needs careful review by staff and forum members of the respective communities.

Example spam (admin/staff must edit this post to see the example for a way to address it):


Hesitant to report this as a bug, as it isn't so much; therefore, posting this as a suggestion, and also looking for solutions that anyone has found before I try to tackle this on my own.

 

[frm]

You're also able to do it around any emoji, however inserted

But automated spam is less likely to use native XenForo :cautious: over Unicode in automated spam unless targeting XF specifically.

I know some users use a sentence around an emoji as a link sometimes.

I New York

So, this needs addressed in multiple ways to mark it visibly spam vs. legitimate content without breaking it into two links (e.g. "I" and "New York").

 

[frm]

This is a simple CSS edit for extra.less to make emojis pop out if they are links, but it can have undesirable effects, as seen in the "I New York" example above.

a > img.smilie.smilie--emoji:only-child {
    width: 2em;
    filter: drop-shadow(0 0 6px gold);
}

This can be fixed if you add this JavaScript to PAGE_CONTAINER:

<xf:js>
function highlightEmojis() {
    document.querySelectorAll('a > img.smilie.smilie--emoji').forEach(img => {
        const a = img.parentElement;
        if (a.children.length === 1 && !a.textContent.trim()) {
            a.classList.add('emoji-only');
        }
    });
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', highlightEmojis);
} else {
    highlightEmojis();
}
</xf:js>

And use this extra.less CSS:

a.emoji-only > img.smilie.smilie--emoji {
    width: 2em;
    filter: drop-shadow(0 0 6px gold);
}

Edit: More aggressive detection if there is a split link ("I" to X, " " to Y, and "New York" back to X):
Same CSS in extra.less

With this JS:

<xf:js>
function highlightEmojis() {
    document.querySelectorAll('a > img.smilie.smilie--emoji').forEach(img => {
        const a = img.parentElement;

        a.classList.toggle('emoji-only',
            a.children.length === 1 &&
            !a.textContent.trim()
        );
    });
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', highlightEmojis);
} else {
    highlightEmojis();
}
</xf:js>

Ideally, this should be tackled in the core, though.

 

[QuackieMackie]

Personally I don't think the emojis are the problem. I think your solution would fix a possible problem, but I think it's more the fact that you can just click on a link and be redirected off to somewhere else.

Wouldn't the better solution be to have a warning, telling the user they are about to be redirected to x? Like for example:


The problem I saw with the css route is, you'd need to know the sites conventions for that to make sense. If one emoji is larger than another in a wall of text I don't think i'd understand what that meant.

Heres the link to the add-on Github Sylphian/LinkWarning if you wanted to check then use it.

I think this would actually help with reviewing links, by not making it a moderator task. It falls on the users then to report suspicious links they have seen in the warnings.

 

[frm]

Personally I don't think the emojis are the problem. I think your solution would fix a possible problem, but I think it's more the fact that you can just click on a link and be redirected off to somewhere else.

Wouldn't the better solution be to have a warning, telling the user they are about to be redirected to x? Like for example:
View attachment 350206

The problem I saw with the css route is, you'd need to know the sites conventions for that to make sense. If one emoji is larger than another in a wall of text I don't think i'd understand what that meant.

Heres the link to the add-on Github Sylphian/LinkWarning if you wanted to check then use it.

I think this would actually help with reviewing links, by not making it a moderator task. It falls on the users then to report suspicious links they have seen in the warnings.

There are still SEO problems that exist, albeit low due to ugc and nofollow, with this low quality link spam.

I do like the exit pop-up to confirm external links, but these shouldn't be there regardless because it can demonstrate to search engines that your community is unmoderated.

To be fair, it'd take much more than 1 or 2. But if you can't detect even 1 and let it slide, how many are going to keep coming back doing the same thing?

If one emoji is larger than another in a wall of text I don't think i'd understand what that meant.

The CSS is mainly for staff so it can be easily moderated, not for the users.