EOL: Legacy Chat Embed

The embed looks to work better now, but there are some issues with the border.
There’s a left and right border on there, which makes it look very odd on light-theme (on the .tw-border-l class)

Would be great if that border would get removed so we can use our own borders, thanks!

Capture

1 Like

Also a problem with the background on dark theme, where it’s not properly set to the dark background, which results in problems when doing border-radius.

Should add this to fix it:

.tw-theme–dark.tw-c-background-alt-2 { background-color: #0e0c13!important; }

1 Like

Whoops! Great catch.

I’ll make sure folks see this.

Thank you!

I’d also like to take the opportunity to thank everyone contributing to the dialogue as we navigate this process. I greatly appreciate the feedback you’ve all provided on this change.

Please continue to speak up in the future as well!

We’re actively working to improve our processes, and we obviously still have room to grow.

:bleedPurple:

Thanks again for the report! I’ve just received confirmation that a fix has been made. Expect it to roll out prior to 4/20!

You’ve been mentioning clickjacking a lot, and there are some fairly intrusive defenses against it, so I figured I should ask - is Twitch seeing actual evidence of active exploitation of clickjacking on legacy chat?

It seems like something that would be fairly hard to pull off, especially with needing to target a specific moderator / chat pairing.

I doubt that’s something they can comment on publicily

Do remember they don’t need to match a mod to a channel. The broadcaster works as a target too! And most broadcasters are rocking popout chat over dashboard or main channel anyway [citation missing]

Popout and embed are separate, and the problem with clickjacking is that it’s mostly invisible to the victim. They might think it’s a fun new browser game they’re playing when in reality they’re spamming malicious links in chat, for example.

2 Likes

Please do domain whitelisting for the embed chat. No moderation features on it absolutely kills my site speedrun.tv – surely there is a pragmatic way to implement moderation without clickjacking. This should be a top priority.

Also, if no white/dark chat is set it should go with what the user has set. Some people like white, some people like dark, and in some cases it is good to let the user decide.

Lastly, what is the point of the massive banner that says “Stream Chat” at the top?

We’ve definitely heard the request for whitelisting, but it’s not something we can do at this time. I will definitely post here on the dev forums if that becomes a possibility.

The theme used is determined solely by the embed parameters, but this is something you could configure if you’re storing session states / persisting preferences for your users!

As for the “Stream Chat” banner, this indicates that the chat embed is showing the stream’s chat, rather than one of the rooms that the broadcaster may have created. Rooms chat is something we’re open to adding support for in the embeds if it’s something folks find valuable.

I hope this helps! Happy to answer any follow-up questions as well.

Here’s how the border-radius is messed up in Chrome:

It is pretty problematic that moderation and whitelisting will not happen.
This basically means the embed is useless for many purposes, and I (and I assume many others) will have to roll my own custom code, all written from scratch.

Maybe it’s time to ditch the iframe embed entirely, and start up a library where we host our own code for interacting with Twitch chat?

I know there’s already TMI.js, but it’s just a basic frame for connecting and reading to chat, and does not display anything, and is missing a lot of features.

1 Like

How come the new popup version or the embed version will not load in the .NET web browser like the legacy version did? Does it not support IE or does it require a referrer or user agent?

I’m seeing the chat embed redirecting to the mobile app on iOS

I’ve been playing around with user agents trying to solve my problem. I was able to get a broken mobile version to load through my bot while using:

User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 10_2_1 like Mac OS X)

If I try any other user agent like:

Mozilla/5.0 (Windows NT 10.0; Win64; x64)

it won’t load anything at all.

This isn’t specific to the chat though, it won’t load twitch.tv either without tinkering with the User Agent, just wish I knew what it was looking for exactly.

The chat embed does not work on iOS, even with the non-documented “?no-mobile-redirect=true” param.
See the screens:

1 Like

Well that’s certainly not good. The team has been notified. Thank you, and my apologies!

We will post here once we know more.

1 Like

We’ve filed a bug report, and expect this should be addressed within a week.

Thanks again!

The embedded chat has a link “more colors”. This link does not work. To fix this bug, Twitch devs should add target="_blank" to that link.

Good news, everyone!

We have deployed an update to embedded chat that adds moderation actions.

Please see the announcement for more information.