bug: youtube error fix (#432)

* youtube error fix

* implemented suggestions

Author: Saksham-Sirohi

prod/nginx.conf

@@ -29,7 +29,7 @@ http {
 
 	access_log /var/log/nginx/access.log private;
 	error_log /var/log/nginx/error.log;
-	add_header Referrer-Policy same-origin;
+	add_header Referrer-Policy strict-origin-when-cross-origin;
 
 	gzip on;
 	gzip_disable "msie6";

server/venueless/middleware.py

@@ -1,20 +1,17 @@
 from django.utils.deprecation import MiddlewareMixin
 
+REFERRER_POLICY = "strict-origin-when-cross-origin"
+
 
 class XFrameOptionsMiddleware(MiddlewareMixin):
     def process_response(self, request, response):
-        # Don't set it if it's already in the response
-        if response.get("X-Frame-Options") is not None:
-            return response
-
-        # Don't set it if they used @xframe_options_exempt
-        if getattr(response, "xframe_options_exempt", False):
-            return response
+        has_xfo = response.get("X-Frame-Options")
+        is_exempt = getattr(response, "xframe_options_exempt", False)
+        is_zoom = request.path.startswith("/zoom")
 
-        # Don't set for zoom app
-        # We don't use xframe_options_exempt here since that doesn't catch error pages
-        if request.path.startswith("/zoom"):
-            return response
+        if has_xfo is None and not is_exempt and not is_zoom:
+            response["X-Frame-Options"] = "DENY"
 
-        response["X-Frame-Options"] = "DENY"
+        if "Referrer-Policy" not in response:
+            response["Referrer-Policy"] = REFERRER_POLICY
         return response

webapp/src/components/MediaSource.vue

@@ -12,13 +12,13 @@
 	janus-call(v-else-if="room && module.type === 'call.janus'", ref="janus", :room="room", :module="module", :background="background", :size="background ? 'tiny' : 'normal'", :key="`janus-${room.id}`")
 	janus-channel-call(v-else-if="call", ref="janus", :call="call", :background="background", :size="background ? 'tiny' : 'normal'", :key="`call-${call.id}`", @close="$emit('close')")
 	.iframe-error(v-if="iframeError") {{ $t('MediaSource:iframe-error:text') }}
-	iframe#video-player-translation(v-if="languageIframeUrl", :src="languageIframeUrl", style="position: absolute; width: 50%; height: 100%; z-index: -1", frameborder="0", gesture="media", allow="autoplay; encrypted-media", allowfullscreen="true")
+	iframe#video-player-translation(v-if="languageIframeUrl", :src="languageIframeUrl", style="position: absolute; width: 50%; height: 100%; z-index: -1", frameborder="0", gesture="media", allow="autoplay; encrypted-media", allowfullscreen="true", :referrerpolicy="referrerPolicy")
 </template>
 <script>
 // TODO functional component?
 import { mapState, mapGetters } from 'vuex'
 import isEqual from 'lodash/isEqual'
-import api from 'lib/api'
+import api, { REFERRER_POLICY } from 'lib/api'
 import JanusCall from 'components/JanusCall'
 import JanusChannelCall from 'components/JanusChannelCall'
 import Livestream from 'components/Livestream'
@@ -38,7 +38,8 @@ export default {
 			iframeError: null,
 			iframe: null, // Track the iframe element
 			languageAudioUrl: null, // URL for the selected language audio
-			languageIframeUrl: null // URL for the language iframe // Added languageIframeUrl to data
+			languageIframeUrl: null, // URL for the language iframe // Added languageIframeUrl to data
+			referrerPolicy: REFERRER_POLICY
 		}
 	},
 	computed: {
@@ -125,6 +126,7 @@ export default {
 				const iframe = document.createElement('iframe')
 				iframe.src = iframeUrl
 				iframe.classList.add('iframe-media-source')
+				iframe.setAttribute('referrerpolicy', this.referrerPolicy)
 				if (hideIfBackground) {
 					iframe.classList.add('hide-if-background')
 				}
@@ -169,7 +171,7 @@ export default {
 			this.destroyIframe()
 			this.initializeIframe(mute) // Initialize iframe with the appropriate mute state
 			// Set the language iframe URL when language changes
-			this.languageIframeUrl = this.getLanguageIframeUrl(languageUrl)
+			this.languageIframeUrl = this.getLanguageIframeUrl(languageUrl, this.module?.config?.enablePrivacyEnhancedMode)
 		},
 		getYoutubeUrl(ytid, autoplay, mute, hideControls, noRelated, showinfo, disableKb, loop, modestBranding, enablePrivacyEnhancedMode) {
 			const params = new URLSearchParams({
@@ -183,12 +185,16 @@ export default {
 				modestbranding: modestBranding ? '1' : '0',
 				playlist: ytid,
 			})
+			const origin = this.getPlayerOrigin()
+			if (origin) {
+				params.set('origin', origin)
+			}
 
 			const domain = enablePrivacyEnhancedMode ? 'www.youtube-nocookie.com' : 'www.youtube.com'
 			return `https://${domain}/embed/${ytid}?${params}`
 		},
 		// Added method to get the language iframe URL
-		getLanguageIframeUrl(languageUrl, enablePrivacyEnhancedMode) {
+		getLanguageIframeUrl(languageUrl, enablePrivacyEnhancedMode = false) {
 			// Checks if the languageUrl is not provided the retun null
 			if (!languageUrl) return null
 			const params = new URLSearchParams({
@@ -202,9 +208,20 @@ export default {
 				showinfo: '0',
 				playlist: languageUrl,
 			})
+			const origin = this.getPlayerOrigin()
+			if (origin) {
+				params.set('origin', origin)
+			}
 
 			const domain = enablePrivacyEnhancedMode ? 'www.youtube-nocookie.com' : 'www.youtube.com'
 			return `https://${domain}/embed/${languageUrl}?${params}`
+		},
+		getPlayerOrigin() {
+			try {
+				return window.location.origin
+			} catch (error) {
+				return ''
+			}
 		}
 	}
 }

webapp/src/lib/api.js

@@ -3,6 +3,8 @@ import config from 'config'
 import store from 'store'
 import WebSocketClient from './WebSocketClient'
 
+export const REFERRER_POLICY = 'strict-origin-when-cross-origin'
+
 const api = Object.create(WebSocketClient.prototype)
 api.connect = function({token, clientId, inviteToken}) {
 	if (api._socket) {

webapp/src/views/exhibitors/item.vue

@@ -4,7 +4,7 @@ scrollbars.c-exhibitor(y)
 		.content
 			img.banner(:src="exhibitor.banner_detail", v-if="exhibitor.banner_detail && !bannerIsVideo && !bannerIsFrame")
 			.iframe-banner(v-else-if="bannerIsFrame")
-				iframe(:src="bannerVideoSource", allowfullscreen, allow="fullscreen")
+				iframe(:src="bannerVideoSource", allowfullscreen, allow="fullscreen", :referrerpolicy="referrerPolicy")
 			.video-banner(v-else-if="bannerIsVideo")
 				video(:src="exhibitor.banner_detail", autoplay, controls, loop)
 			markdown-content.text(v-if="exhibitor.text_legacy", :markdown="exhibitor.text_legacy")
@@ -44,7 +44,7 @@ scrollbars.c-exhibitor(y)
 // TODO
 // - user action for staff list?
 import { mapState, mapGetters } from 'vuex'
-import api from 'lib/api'
+import api, { REFERRER_POLICY } from 'lib/api'
 import Avatar from 'components/Avatar'
 import ContactExhibitorPrompt from 'components/ContactExhibitorPrompt'
 import ChatUserCard from 'components/ChatUserCard'
@@ -64,7 +64,8 @@ export default {
 			exhibitorApi: null,
 			selectedUser: null,
 			showContactPrompt: false,
-			getIconByFileEnding
+			getIconByFileEnding,
+			referrerPolicy: REFERRER_POLICY
 		}
 	},
 	computed: {