fix(frontend/MkUrlPreview): allow fullscreen from tweets (#11712)

* fix(frontend/MkUrlPreview): allow fullscreen from tweets

* Update url-preview.test.ts

.github/workflows/docker-develop.yml

@@ -16,7 +16,7 @@ jobs:
         uses: actions/checkout@v3.5.3
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v2.3.0
+        uses: docker/setup-buildx-action@v2.9.1
         with:
           platforms: linux/amd64,linux/arm64
       - name: Docker meta

.github/workflows/docker.yml

@@ -15,7 +15,7 @@ jobs:
         uses: actions/checkout@v3.5.3
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v2.3.0
+        uses: docker/setup-buildx-action@v2.9.1
         with:
           platforms: linux/amd64,linux/arm64
       - name: Docker meta

.github/workflows/ok-to-test.yml

@@ -23,7 +23,7 @@ jobs:
         private_key: ${{ secrets.DEPLOYBOT_PRIVATE_KEY }}
 
     - name: Slash Command Dispatch
-      uses: peter-evans/slash-command-dispatch@v1
+      uses: peter-evans/slash-command-dispatch@v3
       env:
         TOKEN: ${{ steps.generate_token.outputs.token }}
       with:

.github/workflows/reviewer_lottery.yml

@@ -8,6 +8,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v3.5.3
-    - uses: uesteibar/reviewer-lottery@v2
+    - uses: uesteibar/reviewer-lottery@v3
       with:
         repo-token: ${{ secrets.GITHUB_TOKEN }}

packages/frontend/src/components/MkUrlPreview.vue

@@ -28,7 +28,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 <template v-else-if="tweetId && tweetExpanded">
 	<div ref="twitter">
-		<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${defaultStore.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
+		<iframe
+			ref="tweet"
+			allow="fullscreen;web-share"
+			sandbox="allow-popups allow-scripts allow-same-origin"
+			scrolling="no"
+			:style="{ position: 'relative', width: '100%', height: `${tweetHeight}px`, border: 0 }"
+			:src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${defaultStore.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"
+		></iframe>
 	</div>
 	<div :class="$style.action">
 		<MkButton :small="true" inline @click="tweetExpanded = false">

packages/frontend/test/url-preview.test.ts

@@ -13,7 +13,7 @@ import MkUrlPreview from '@/components/MkUrlPreview.vue';
 
 type SummalyResult = Awaited<ReturnType<typeof summaly>>;
 
-describe('MkMediaImage', () => {
+describe('MkUrlPreview', () => {
 	const renderPreviewBy = async (summary: Partial<SummalyResult>): Promise<RenderResult> => {
 		if (!summary.player) {
 			summary.player = {
@@ -143,4 +143,13 @@ describe('MkMediaImage', () => {
 		assert.exists(iframe, 'iframe should exist');
 		assert.strictEqual(iframe?.parentElement?.style.paddingTop, '200px');
 	});
+
+	test('Loading a tweet in iframe', async () => {
+		const iframe = await renderAndOpenPreview({
+			url: 'https://twitter.com/i/web/status/1685072521782325249',
+		});
+		assert.exists(iframe, 'iframe should exist');
+		assert.strictEqual(iframe?.getAttribute('allow'), 'fullscreen;web-share');
+		assert.strictEqual(iframe?.getAttribute('sandbox'), 'allow-popups allow-scripts allow-same-origin');
+	});
 });