Electron Twitch Embeds

[Oyed]

Has there been any movement on a fix for Electron Apps using Twitch embeds?

Twitch Embedded Player Updates in 2020

Hi everyone, as the purpose of this topic was to announce embed changes, we’re going to close it for further comments. However, I’m going to include many of the tips that were discussed above that helped resolved many issues. Please review these items for troubleshooting before opening a new topic. Thank you! Top troubleshooting tips Make sure you have SSL enabled for your website, this is required for embeds to function (i.e. When going to your site, “https://” is in the URL) Do not include “…

[BarryCarlyon]

How will Twitch Embed updates affect mobile app embeds?

In Electron you can use onHeadersReceived to modify the Content-Security-Policy header and strip out the frame-ancestors part of it.

[Oyed]

Tried this to no avail:

session.webRequest.onHeadersReceived({
    urls: ['*://*/*'],
}, (details, done) => {
    console.log(details.url, JSON.stringify(details.responseHeaders));
    done({
        cancel: false,
        responseHeaders: details.responseHeaders,
    });
});

Giving this for https://player.twitch.tv/?channel=oyed:

{
    "Accept-Ranges": [
        "bytes"
    ],
    "Connection": [
        "keep-alive"
    ],
    "Content-Length": [
        "0"
    ],
    "Date": [
        "Mon, 27 Jul 2020 12:52:06 GMT"
    ],
    "Location": [
        "/embed-error.html?errorCode=NoParent&content=player.twitch.tv%2F%3Fchannel%3Doyed"
    ],
    "Server": [
        "nginx"
    ],
    "Set-Cookie": [
        "unique_id=r4zgG3QlXKaK75BWs4bYpYiDqLYASvdj; expires=Sat, 27 Jul 2030 12:52:05 GMT; domain=.twitch.tv; path=/; secure; samesite=none",
        "unique_id_durable=r4zgG3QlXKaK75BWs4bYpYiDqLYASvdj; expires=Sat, 27 Jul 2030 12:52:05 GMT; domain=.twitch.tv; path=/; secure; samesite=none; httponly"
    ],
    "Strict-Transport-Security": [
        "max-age=31536000"
    ],
    "Vary": [
        "Access-Control-Request-Headers, Access-Control-Request-Method, Origin"
    ],
    "Via": [
        "1.1 varnish"
    ],
    "X-Cache": [
        "MISS"
    ],
    "X-Cache-Hits": [
        "0"
    ],
    "X-Content-Type-Options": [
        "nosniff"
    ],
    "X-Served-By": [
        "cache-hkg17922-HKG"
    ],
    "X-Timer": [
        "S1595854326.917389,VS0,VE86"
    ],
    "X-XSS-Protection": [
        "1; mode=block"
    ]
}

Couldn’t find any Content-Security-Policy

[BarryCarlyon]

After some jiggery pokery

Your problem is you were using the “Embed Everywhere” code and that doesn’t “behave” as easily outta the box for header looking and killing

I have got both “Embed Everywhere” and “dumb embeds” working.

You can refer to this GitHub Example

BarryCarlyon/twitch_misc

[Oyed]

That seems to do the trick - thanks for the quick turnaround on this one!

[ryankashi]

Thanks for posting up this github repo. I am new to JavaScript, Node, and Electron so this was a lot of help for me!

Also, in order to embed strictly twitch chat via the iframe with contents:
src=“https://twitch.tv/embed/monstercat/chat?parent=localhost”

I had to add:
‘https://www.twitch.tv/embed/*’

into the onHeadersReceived callback. Do you know why it has to have the “www.” in front of twitch.tv in this case? I could not get it to work without that, regardless of whether my ifram src included the www. or not