Desktop: Youtube Videos show a "Video not found" preview

[lfbrock]

Reproduced on Mattermost v3.1 (pre-release.mattermost.com):

1. Post a youtube video link (eg https://www.youtube.com/watch?v=JsUh89t6F24)

Observed: Preview shows as "Video not found" in Desktop App. (Preview shows correctly in a browser).

Expected: Youtube Preview should show.

[yuya-oc]

In my side, youtube preview appears on 3.1.0-rc3. (pre-release.mattermost.com)

Mattermost desktop: 1.2.1
OS: OS X 10.11.3
Mattermost server: 3.1.0-rc3

Could you check whether the console shows error messages? (View -> Toggle Developer Tools)

[Razzeee]

I also get the problem, as far as I can see there is nothing that point in the correct direction in the log.

Mattermost desktop: current master branch
OS: Win 10
Mattermost server: 3.1.0-rc3

[yuya-oc]

Reproduced also with the latest dev branch on Win 10. Then, Mattermost server 3.0.0(3.0.3) doesn't cause this problem. So this might be caused by something changed on server side, however now I'm not sure why this happens. The console doesn't show related messages.

[yuya-oc]

https://www.googleapis.com returns 403 in the desktop app.
The error can be found in tab's developer tools.

// in the developer tool console,
var webview = document.getElementById('mattermostView0');
webview.openDevTools();

[jasonblais]

Adding this to the v1.3 milestone as well, anyone from the community open to work on the issue?

[yuya-oc]

Just checked again now on pre-release.mattermost.com. The API (https://www.googleapis.com/youtube/v3/videos?part=snippet&id=vParUo90fn4&key=AIzaSyCv7Hu4d4w-40biLANfkQXzL6t3l8Bxa4A) returns following error.

domain: "usageLimits"
extendedHelp: "https://console.developers.google.com/apis/credentials?project=400589284558"
message: "The referrer null does not match does not match the referrer restrictions configured on your API key. Please use the API Console to update your key restrictions."
reason: "ipRefererBlocked"

Unfortunately I'm not familiar at the API...

[jnugh]

This happens because we use disablewebsecurity for our webviews. This is because there is no other way to load images and other resources via http at the moment.
This depends on: https://github.com/electron/electron/issues/2749 which would allow us to switch to allowDisplayingInsecureContent.

https://github.com/mattermost/platform/issues/2184 would be the _right_ way to fix these sort of issues imho.

[yuya-oc]

Sorry, I'm not sure why disablewebsecurity is the reason by reading your comment. Would you tell me that?

[jnugh]

disablewebsecurity has a few implications, the one relevant here is, that it disables the same-origin policy which is implemented in a way that breaks the youtube api call:

It removes the Origin header which is sent by ajax requests completely - and youtube does not like that. The reason is obvious, youtube is not able to check if the origin matches the used api key.
Without this check, I could just pick a youtube api key from some website and use it for my own project, so it's pretty obvious why it is implemented that way.

BTW: I'm not entirely sure if this behavior is intended, it might also be a bug in the webview implementation...

[jasonblais]

Thanks everyone! I'll reach out the platform team to see the best way forward here, and what the status on https://github.com/mattermost/platform/issues/2184 might be

[jasonblais]

Hello everyone again, I think I may have found the root cause for this.

The option Allow mixed content (Enabling allows both secure and insecure content, images and scripts to render and execute. Disabling allows only secure content.) seems to be backwards. When I have the option turned on, YouTube videos show "Video not found" in the preview -- but if I have the option turned off, YouTube videos play properly.

This has been reproduced on both Windows and OS X.

Would love to have someone's help switching the option so that

• Enabling allows both secure and insecure content, images and scripts to render and execute.
• Disabling allows only secure content.

[jnugh]

Yeah that option toggels what I explained in https://github.com/mattermost/desktop/issues/161#issuecomment-229651485

What does not work when you disable the switch, is embedding http content on https mattermost server.

e.g. try to post a link to an image reachable via http. The preview will not work. Currently we can't have both working at the same time.

[jasonblais]

I'm still not sure that why the Allow mixed content .... option behaves this way though.

• if it's enabled, https://www.youtube.com/watch?v=eKFTSSKCzWA doesn't work
• if it's disabled (i.e. do NOT allow insecure content like http), https://www.youtube.com/watch?v=eKFTSSKCzWA works

Shouldn't it be the other way around?

[jnugh]

Nope, I actually explained it in the comment above. https://github.com/mattermost/desktop/issues/161#issuecomment-229651485

[jasonblais]

I see what you mean now, sorry for not understanding it at first.

So the youtube api call breaks and we're currently blocked on either

• electron/issues/2749, or
• platform/issues/2184

Would the latest activity on electron/issues/2749 be of any use?

The platform team is aware of the linked issue, but isn't currently included on our roadmap.

[jnugh]

Yes, looks like we could configure the webview during will-create-webview once this has been implemented.

[jasonblais]

Thanks! I've marked this as pending for now.

Let's track activity on electron/issues/2749 and I'll monitor if there's any progress on the Mattermost end

[jasonblais]

Wondering if we could get someone's help submitting a PR to fix the issue reported in https://github.com/electron/electron/issues/2749

Perhaps @jnugh when you're back in a couple of weeks?

[jasonblais]

A pull request has been submitted https://github.com/electron/electron/pull/7431 that should help resolve the issue on Electron's side.

There is still a bit of work on our end after Electron's new release, but it gets us one step closer to fixing this issue.

[jasonblais]

Electron v1.4.5 released with added support for a webpreferences attribute to webview tags that can be used to set additional options similar to the webPreferences option on the BrowserWindowconstructor.

If we bump our Electron dependency to v1.4.5, then we can work on a fix for the YouTube videos.

@jnugh Were you interested in taking a look? I know you were also planning to work on https://github.com/mattermost/desktop/issues/319 with Settings page updates.

[jabis]

This issue reappeared with 3.6.* server version on 3.5.0 desktop client + accessing thru web, regression?

[jasonblais]

@jabis can you share a screenshot of your selected app options on the Settings page (via File > Settings)?

Which operating system do you have (Windows / Mac / Linux)?

Which YouTube video caused the issue?

[jabis]

Here you go:
Windows 10, happens also on multiple Windows 7's and all the videos behave the same.

[jabis]

Happens both with http and https schemes:

[jasonblais]

Thanks for the screenshots! Can you help share one more --> what does your "Help > Version" dropdown menu say?

Just want to make sure the desktop app v3.5 installation was successful and you have the correct version.

[jabis]

Version 3.5.0 - I did try to reinstall the client, but it does happen on web client as well, so I'm now doubting it has something more to do with platform and not desktop client.

[jasonblais]

Hmm, Mattermost has a setting in the System Console to specify the Google API key.

Wondering if the related documentation would be of any help?

EDIT: Image removed for potential confidentiality reasons.

[jabis]

The google api key is valid and in use on multiple sites, so that doesn't do much. I still think this is a regression but maybe in mattermost/platform not in client.

[jabis]

If you have the authority maybe you could transfer this issue to platform side?

[jabis]

Here you can see the key is enabled, and limited to the server's making the requests. Everything worked in 3.4.* but upgrading to 3.6.2 it suddenly stopped working again.

[jabis]

Regenerating the api-keys for youtube resolved the issue.

[jasonblais]

Ah I see. Glad to hear it got resolved

[jasonblais]

I also added couple of steps for troubleshooting YouTube video issues to our docs: https://github.com/mattermost/docs/pull/873