fix: Arcade embeds fullscreen permission (#10527)

* fix: grant arcarde embeds fullscreen permission globally * add `allow="fullscreen"` to all arcade embeds * . * fix missing >
getsentry · Jun 27, 2024 · c08811d · c08811d
1 parent 750e68a
commit c08811d
Show file tree

Hide file tree

Showing 24 changed files with 46 additions and 7 deletions.
diff --git a/docs/concepts/data-management/event-grouping/index.mdx b/docs/concepts/data-management/event-grouping/index.mdx
@@ -88,6 +88,7 @@ You can see a fingerprint by opening an issue, clicking "{} View JSON", and find
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="View Issue Fingerprint"
   ></iframe>

diff --git a/docs/concepts/key-terms/environments/index.mdx b/docs/concepts/key-terms/environments/index.mdx
@@ -48,6 +48,7 @@ Follow along with the gif below to see how to hide and unhide environments.
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Environments - Hide/show"
   ></iframe>

diff --git a/docs/concepts/key-terms/tracing/trace-view.mdx b/docs/concepts/key-terms/tracing/trace-view.mdx
@@ -36,7 +36,7 @@ By default, the waterfall view shows a list of transactions. If you need more gr
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
-    allow="clipboard-write"
+    allow="clipboard-write; fullscreen;"
     style={{
       colorScheme: "light",
       height: "100%",
@@ -75,7 +75,7 @@ If you're doing a comparison and want an easy way to go back and forth between h
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
-    allow="clipboard-write"
+    allow="clipboard-write; fullscreen;"
     style={{
       colorScheme: "light",
       height: "100%",
@@ -109,7 +109,7 @@ your scroll wheel.
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
-    allow="clipboard-write"
+    allow="clipboard-write; fullscreen;"
     style={{
       colorScheme: "light",
       height: "100%",

diff --git a/docs/organization/integrations/integration-platform/index.mdx b/docs/organization/integrations/integration-platform/index.mdx
@@ -45,6 +45,7 @@ up as a service in the action section when creating or updating an alert rule. T
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Create Internal Integration &amp; Alert Rule"
   ></iframe>

diff --git a/docs/organization/integrations/integration-platform/webhooks/issue-alerts.mdx b/docs/organization/integrations/integration-platform/webhooks/issue-alerts.mdx
@@ -16,6 +16,7 @@ The gif below shows how to set up an internal integration that can receive issue
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Create Internal Integration &amp; Alert Rule"
   ></iframe>

diff --git a/docs/organization/integrations/integration-platform/webhooks/metric-alerts.mdx b/docs/organization/integrations/integration-platform/webhooks/metric-alerts.mdx
@@ -16,6 +16,7 @@ The gif below shows how to set up an internal integration that can receive Sentr
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Create Internal Integration &amp; Alert Rule"
   ></iframe>

diff --git a/docs/product/alerts/create-alerts/routing-alerts.mdx b/docs/product/alerts/create-alerts/routing-alerts.mdx
@@ -56,6 +56,7 @@ The gif below shows how to set up an integration that can receive Sentry alerts.
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Create Internal Integration &amp; Alert Rule"
   ></iframe>

diff --git a/docs/product/crons/job-monitoring.mdx b/docs/product/crons/job-monitoring.mdx
@@ -37,6 +37,7 @@ The table of recent check-ins lists previously scheduled jobs and their statuses
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{
       position: 'absolute',
       top: 0,

diff --git a/docs/product/explore/metrics/metrics-explorer-page.mdx b/docs/product/explore/metrics/metrics-explorer-page.mdx
@@ -20,6 +20,7 @@ Once you've started sending metrics to Sentry, you can explore them in the produ
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Sentry Metrics Explorer - Query &amp; Visualize"
   ></iframe>
@@ -47,6 +48,7 @@ Sometimes observing one metric is enough to reach an insight. However, it's ofte
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Sentry Metrics Explorer - Multiple Metrics"
   ></iframe>
@@ -74,6 +76,7 @@ Below your metric charts, the "Span Samples" tab shows a list of exemplars assoc
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Sentry Metrics Explorer - Sample Transactions"
   ></iframe>
@@ -100,6 +103,7 @@ When it comes to custom metrics, you can use the code locations tab to see the l
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Sentry Metrics Explorer - Code Location"
   ></iframe>
@@ -117,6 +121,7 @@ In order to stay ahead of issues, you can also create metric-based alerts to get
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Sentry Metrics Explorer - Create Alerts &amp; Dashboards"
   ></iframe>

diff --git a/docs/product/insights/assets.mdx b/docs/product/insights/assets.mdx
@@ -14,7 +14,7 @@ If you have performance monitoring enabled for your frontend, you can see how yo
 
 Starting with the [**Assets** page](#assets-page), you get a high-level overview of how your assets are doing. From there, you can drill into a specific asset's [**Asset Summary** page](#asset-summary-page) and then investigate sample events from the [Sample List](#sample-list) to better understand the context of its performance in a specific page.
 
-<div style={{position: 'relative', paddingBottom: 'calc(50.86013462976814% + 41px)', height: 0}}><iframe src="https://demo.arcade.software/c7lgN0cFkg0R2tb9t0jH?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', colorScheme: 'light'}}></iframe></div>
+<div style={{position: 'relative', paddingBottom: 'calc(50.86013462976814% + 41px)', height: 0}}><iframe src="https://demo.arcade.software/c7lgN0cFkg0R2tb9t0jH?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="fullscreen;" style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', colorScheme: 'light'}}></iframe></div>
 
 ## Prerequisites and Limitations
 

diff --git a/docs/product/insights/caches/index.mdx b/docs/product/insights/caches/index.mdx
@@ -24,6 +24,7 @@ Starting with the [Cache page](https://sentry.io/orgredirect/organizations/:orgs
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Performance -> Caches Module Walkthrough"
   ></iframe>

diff --git a/docs/product/insights/queries.mdx b/docs/product/insights/queries.mdx
@@ -14,7 +14,7 @@ Starting with the [**Queries** page](#queries-page), you get a high-level overvi
 
 The gif below demonstrates how to get insights on your query performance.
 
-<div style={{"height":"0px","paddingBottom":"calc(48.6806% + 41px)","position":"relative","width":"100%"}}><iframe src="https://demo.arcade.software/YwpxKWDVwi6CtDcOOw6a?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}} title="[Walkthrough] Insights -> Queries"></iframe></div>
+<div style={{"height":"0px","paddingBottom":"calc(48.6806% + 41px)","position":"relative","width":"100%"}}><iframe src="https://demo.arcade.software/YwpxKWDVwi6CtDcOOw6a?embed" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="fullscreen;" style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}} title="[Walkthrough] Insights -> Queries"></iframe></div>
 
 <br />
 

diff --git a/docs/product/insights/queue-monitoring/index.mdx b/docs/product/insights/queue-monitoring/index.mdx
@@ -24,6 +24,7 @@ The **Queues** page gives you a high-level overview so that you can see where me
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Performance -> Queues Module Walkthrough"
   ></iframe>

diff --git a/docs/product/insights/requests.mdx b/docs/product/insights/requests.mdx
@@ -18,6 +18,7 @@ On the [**Requests** page](#requests-page), you get an overview of the domains t
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="[Walkthrough] Insights -> Requests"
   ></iframe>

diff --git a/docs/product/insights/web-vitals/index.mdx b/docs/product/insights/web-vitals/index.mdx
@@ -20,6 +20,7 @@ The gif below walks through how to get insights on your web vitals.
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
   ></iframe>
 </div>
@@ -62,6 +63,7 @@ At the center of the **Page Overview**, Web Vital p75 values and scores are disp
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', colorScheme: 'light'}}
   ></iframe>
 </div>
@@ -109,7 +111,7 @@ Opportunity score calculation is also weighted based on the traffic that a page
 
 ### Prerequisites and Limitations
 
-**Web Vitals** and **Performance Scores** are automatically captured by Sentry's JavaScript SDKs through the [BrowserTracing](/platforms/javascript/configuration/integrations/browsertracing/) integration. 
+**Web Vitals** and **Performance Scores** are automatically captured by Sentry's JavaScript SDKs through the [BrowserTracing](/platforms/javascript/configuration/integrations/browsertracing/) integration.
 
 You can find out how to set up Sentry on your web application in the [installation docs](/platforms/javascript/). If you are using a JavaScript framework, you may need to follow additional setup instructions for your specific framework:
 
@@ -123,4 +125,4 @@ Although Sentry provides auto instrumentation for many frontend frameworks, ther
 - **Performance Scores** only support **Chrome**, **Firefox**, **Safari**, **Opera**, and **Edge** desktop browsers. Mobile browsers are NOT supported.
 - A page load must capture a minimum set of web vitals in order to be eligible for **Performance Score** calculation. For example, Chrome page loads must contain LCP, FCP, CLS, and TTFB; otherwise they will not appear in the Web Vitals page.
     - This requirement varies depending on the client browser. Find out the full list of required web vitals in the [Browser Support](/product/insights/web-vitals/web-vitals-concepts/#browser-support) table.
-    - Some web vitals may not be captured as frequently depending on the unique behavior of your web page or your user's browser. 
+    - Some web vitals may not be captured as frequently depending on the unique behavior of your web page or your user's browser.
diff --git a/docs/product/issues/suspect-commits/index.mdx b/docs/product/issues/suspect-commits/index.mdx
@@ -24,6 +24,7 @@ Suspect commits and suggested assignees are then displayed on the **Issue Detail
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="FE Tutorial -> See Suspect Commits & Suggested Assignees"
   ></iframe>
@@ -112,6 +113,7 @@ Follow along with the animated gif below to see how to integrate your GitHub acc
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="FE Tutorial -> Install GitHub Config & Add Code Mapping"
   ></iframe>

diff --git a/docs/product/performance/retention-priorities/index.mdx b/docs/product/performance/retention-priorities/index.mdx
@@ -132,6 +132,7 @@ To make changes to a project's retention priorities in Sentry, go to **Settings
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="General Settings — totes-ma-gotes — Sentry"
   ></iframe>

diff --git a/docs/product/projects/index.mdx b/docs/product/projects/index.mdx
@@ -30,6 +30,7 @@ The **Projects** page lists all the projects assigned to teams you're a member o
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Projects -> Star Project"
   ></iframe>

diff --git a/docs/product/projects/project-details/index.mdx b/docs/product/projects/project-details/index.mdx
@@ -23,6 +23,7 @@ The two graphs below the cards show the value of a specific metric over the spec
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Project Details -> Graphs"
   ></iframe>
@@ -57,6 +58,7 @@ Click the **Create Alert** button at the top right to set up either an [Issue Al
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Project Details -> Create Alert"
   ></iframe>
@@ -74,6 +76,7 @@ The **Latest Alerts** section in the right sidebar shows the 3 latest triggered
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Project Details -> Latest Alerts"
   ></iframe>
@@ -99,6 +102,7 @@ To help you triage issues, the **Project Details** page shows you the 5 most fre
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Project Details -> Triage Issue"
   ></iframe>
@@ -124,6 +128,7 @@ Click on a team to see that team's members and their roles. If you are a team ad
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Project Details -> Project Teams"
   ></iframe>
@@ -141,6 +146,7 @@ Use the settings icon at the top of the page to access **Project Settings**. Mod
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="Project Details -> Project Settings"
   ></iframe>

diff --git a/docs/product/sentry-basics/integrate-frontend/configure-scms.mdx b/docs/product/sentry-basics/integrate-frontend/configure-scms.mdx
@@ -38,6 +38,7 @@ Follow along with the animated gif below to see how to integrate your GitHub acc
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="FE Tutorial -> Install GitHub Config & Add Code Mapping"
   ></iframe>
@@ -146,6 +147,7 @@ The gif below shows how to view suspect commits and suggested assignees for an i
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="FE Tutorial -> See Suspect Commits & Suggested Assignees"
   ></iframe>
@@ -173,6 +175,7 @@ The gif below shows how to view commits associated with the release.
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="FE Tutorial -> See Release Commit Data"
   ></iframe>
@@ -204,6 +207,7 @@ The gif below walks through how to set up and view stack trace links in the UI.
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="FE Tutorial -> Add Stack Trace Linking"
   ></iframe>

diff --git a/docs/product/sentry-basics/integrate-frontend/create-new-project.mdx b/docs/product/sentry-basics/integrate-frontend/create-new-project.mdx
@@ -46,6 +46,7 @@ The animated gif below walks through how to create a new project in the UI.
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="FE Tutorial -> Create Project"
   ></iframe>

diff --git a/docs/product/sentry-basics/integrate-frontend/generate-first-error.mdx b/docs/product/sentry-basics/integrate-frontend/generate-first-error.mdx
@@ -38,6 +38,7 @@ If you're using your own source code, skip this step. Instead, select your [plat
        webkitallowfullscreen
        mozallowfullscreen
        allowfullscreen
+       allow="fullscreen;"
        style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
        title="FE Tutorial -> Checkout Demo"
      ></iframe>
@@ -82,6 +83,7 @@ The animated gif below walks through how to view error details in Sentry.
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="FE Tutorial - View First Error"
   ></iframe>

diff --git a/docs/product/sentry-basics/integrate-frontend/upload-source-maps.mdx b/docs/product/sentry-basics/integrate-frontend/upload-source-maps.mdx
@@ -134,6 +134,7 @@ If your project has a different configuration, use the [Sentry Wizard](/platform
     webkitallowfullscreen
     mozallowfullscreen
     allowfullscreen
+    allow="fullscreen;"
     style={{"colorScheme":"light","height":"100%","left":"0px","position":"absolute","top":"0px","width":"100%"}}
     title="FE Tutorial -> View Readable Stack Trace"
   ></iframe>

diff --git a/vercel.json b/vercel.json
@@ -15,6 +15,10 @@
           "key": "X-XSS-Protection",
           "value": "1; mode=block"
         },
+        {
+          "key": "Permissions-Policy",
+          "value": "fullscreen=(self \"https://demo.arcade.software\")"
+        },
         {
           "key": "Content-Security-Policy",
           "value": "upgrade-insecure-requests; default-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval' *.sentry-cdn.com www.googletagmanager.com plausible.io vercel.live; connect-src 'self' *.sentry.io sentry.io *.algolia.net *.algolianet.com *.algolia.io plausible.io reload.getsentry.net storage.googleapis.com; img-src * 'self' data: www.google.com www.googletagmanager.com; style-src 'self' 'unsafe-inline'; font-src 'self' fonts.gstatic.com; frame-src demo.arcade.software player.vimeo.com; worker-src blob:; report-uri https://o1.ingest.sentry.io/api/1297620/security/?sentry_key=b3cfba5788cb4c138f855c8120f70eab; report-to csp"