4.5.4 - 4.6.0 livestream popup doesn't work

[franckadil]

Description:

Steps to reproduce:

1. go to your livestream channel
2. add a youtube video URL
3. The reader popup doesn't work

Expected behavior:

The reader popup should display and allow playing the video.

Actual behavior:

Server Setup Information:

• Version of Rocket.Chat Server: 4.6.0
• Operating System: Ubuntu 20.04 lts / 18.04 lts
• Deployment Method: Docker / Digital Ocean image
• Number of Running Instances: 1
• DB Replicaset Oplog:
• NodeJS Version: v14.18.3
• MongoDB Version: 4.2.0 / 5.0.6 / wiredTiger (oplog Enabled)

Client Setup Information

• Desktop App or Browser Version: Google Chrome / Microsoft Edge latest / Mozilla Firefox Latest / Apple Safari / Brave
• Operating System: Windows / Mac Osx / Fedora / Ubuntu / Manjaro

Relevant logs:

0f6307921c60cb01b70885b26651947c8262f4da.js?meteor_js_resource=true:5 fuselage: 0.31.6
0f6307921c60cb01b70885b26651947c8262f4da.js?meteor_js_resource=true:1498 

       Deprecated: RoomCoordinator.getRouteData received a room object
getRouteData @ 0f6307921c60cb01b70885b26651947c8262f4da.js?meteor_js_resource=true:1498
0f6307921c60cb01b70885b26651947c8262f4da.js?meteor_js_resource=true:1498 

       Deprecated: RoomCoordinator.getRouteData received a room object
getRouteData @ 0f6307921c60cb01b70885b26651947c8262f4da.js?meteor_js_resource=true:1498
0f6307921c60cb01b70885b26651947c8262f4da.js?meteor_js_resource=true:1498 

       Deprecated: RoomCoordinator.getRouteData received a room object
getRouteData @ 0f6307921c60cb01b70885b26651947c8262f4da.js?meteor_js_resource=true:1498
0f6307921c60cb01b70885b26651947c8262f4da.js?meteor_js_resource=true:1498 

       Deprecated: RoomCoordinator.getRouteData received a room object
getRouteData @ 0f6307921c60cb01b70885b26651947c8262f4da.js?meteor_js_resource=true:1498
0f6307921c60cb01b70885b26651947c8262f4da.js?meteor_js_resource=true:1498 

       Deprecated: RoomCoordinator.getRouteData received a room object
getRouteData @ 0f6307921c60cb01b70885b26651947c8262f4da.js?meteor_js_resource=true:1498
0f6307921c60cb01b70885b26651947c8262f4da.js?meteor_js_resource=true:1496 

       Refused to load the script 'https://www.youtube.com/player_api' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'sha256-jqxtvDkBbRAl9Hpqv68WdNOieepg8tJSYu1xIy7zT34='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

(anonymous) @ 0f6307921c60cb01b70885b26651947c8262f4da.js?meteor_js_resource=true:1496

[amottier]

I get the same error on version 4.7.0:

GET https://www.youtube.com/player_api CSP
Loading failed for the <script> with source “https://www.youtube.com/player_api”. livestream:1:1
Content Security Policy: The page’s settings blocked the loading of a resource at https://www.youtube.com/player_api (“script-src”). 28f042d48dc7212074cc2b3601f91762d103324d.js:1512:296820

In fact <script src="https://www.youtube.com/player_api" type="text/javascript"></script> is include in the root document so response header such as:

content-security-policy | default-src  'self' ; connect-src *; font-src 'self'  data:; frame-src *; img-src *  data: blob:; media-src * data:; script-src 'self' 'unsafe-eval'  'sha256-jqxtvDkBcRAl9Hpqv62WdNOieepg8tJSYu1xIy7zT24='  ; style-src  'self' 'unsafe-inline'

will not cover loading script from www.youtube.com (script-src 'self' 'unsafe-eval' 'sha256-jqxtvDkBcRAl9Hpqv62WdNOieepg8tJSYu1xIy7zT24=' ;)