Merge pull request #247 from storyblok/feat/load-bridge-when-visual-e…

…ditor feat: load the bridge only on Visual Editor
storyblok · Feb 28, 2023 · 8c887c3 · 8c887c3
2 parents b90ebaa + ac6590f
commit 8c887c3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/lib/cypress/e2e/index.cy.js b/lib/cypress/e2e/index.cy.js
@@ -56,7 +56,7 @@ describe("@storyblok/js", () => {
 
   describe("Bridge", () => {
     it("Is loaded by default", () => {
-      cy.visit("http://localhost:5173/");
+      cy.visit("http://localhost:5173/?_storyblok_tk[timestamp]=1677494658");
       cy.get(".with-bridge").click();
       cy.get("#storyblok-javascript-bridge").should("exist");
     });

diff --git a/lib/index.ts b/lib/index.ts
@@ -70,8 +70,13 @@ export const storyblokInit = (pluginOptions: SbSDKOptions = {}) => {
     result = { ...result, ...pluginFactory(options) };
   });
 
-  // Load bridge
-  if (bridge !== false) {
+  /*
+  ** Load bridge if you are on the Visual Editor
+  ** For more security: https://www.storyblok.com/faq/how-to-verify-the-preview-query-parameters-of-the-visual-editor
+  */
+  const isServer = typeof window === "undefined";
+  const inEditor = !isServer && window.location?.search?.includes('_storyblok_tk');
+  if (bridge !== false && inEditor) {
     loadBridge(bridgeLatest);
   }
 

diff --git a/playground/index.html b/playground/index.html
@@ -7,6 +7,9 @@
   </head>
   <body>
     <div>Hello</div>
+    <button class="fake-visual-editor" onclick="window.location.href = '/?_storyblok_tk[timestamp]=1675712641'">
+      Fake being inside Visual Editor
+    </button>
     <button class="with-bridge" onclick="initWithBridge()">
       storyblokInit With Bridge
     </button>