Feat: frame busting script added

gatsby-config.js

@@ -17,19 +17,6 @@ module.exports = {
   },
   trailingSlash: "never",
   plugins: [
-    {
-      resolve: "gatsby-plugin-netlify",
-      options: {
-        headers: {
-          "/*": [
-            "X-Frame-Options: SAMEORIGIN",
-            "Content-Security-Policy: frame-ancestors 'self'",
-          ],
-        },
-        mergeSecurityHeaders: true,
-        mergeCachingHeaders: true,
-      },
-    },
     {
       resolve: "gatsby-plugin-webpack-bundle-analyser-v2",
       options: {

onRenderBody.js

@@ -15,14 +15,14 @@ const MagicScriptTag = (props) => {
           let colorMode;
           switch (themeFromLocalStorage) {
               case '${ThemeSetting.SYSTEM}':
-                colorMode = isDarkModeActive() ? '${ThemeSetting.DARK}' : '{ThemeSetting.LIGHT}'
-                break
+                colorMode = isDarkModeActive() ? '${ThemeSetting.DARK}' : '${ThemeSetting.LIGHT}';
+                break;
               case '${ThemeSetting.DARK}':
               case '${ThemeSetting.LIGHT}':
-                colorMode = themeFromLocalStorage
-                break
+                colorMode = themeFromLocalStorage;
+                break;
               default:
-                  colorMode = '${ThemeSetting.LIGHT}'
+                  colorMode = '${ThemeSetting.LIGHT}';
             }
           const root = document.documentElement;
           const iterate = (obj) => {
@@ -35,15 +35,50 @@ const MagicScriptTag = (props) => {
               }
             })
           }
-          const parsedTheme = JSON.parse('${JSON.stringify(props.theme)}')
-          const theme = parsedTheme[colorMode]
+          const parsedTheme = JSON.parse('${JSON.stringify(props.theme)}');
+          const theme = parsedTheme[colorMode];
           iterate(theme)
           root.style.setProperty('--initial-color-mode', colorMode);  
        })()
   `;
   return <script dangerouslySetInnerHTML={{ __html: codeToRunOnClient }} />;
 };
 
-export const onRenderBody = ( { setPreBodyComponents }) => {
-  setPreBodyComponents(<MagicScriptTag key="theme-injection" theme={themes} />);
+const AntiClickjackStyle = (
+  <style
+    key="anti-clickjack-style"
+    id="antiClickjack"
+    dangerouslySetInnerHTML={{
+      __html: "body{display:none !important;}",
+    }}
+  />
+);
+
+const AntiClickjackScript = (
+  <script
+    key="anti-clickjack-script"
+    type="text/javascript"
+    dangerouslySetInnerHTML={{
+      __html: `
+        if (self === top) {
+          var antiClickjack = document.getElementById("antiClickjack");
+          if (antiClickjack && antiClickjack.parentNode) {
+            antiClickjack.parentNode.removeChild(antiClickjack);
+          }
+        } else {
+          top.location = self.location;
+        }
+      `,
+    }}
+  />
+);
+
+export const onRenderBody = ({ setHeadComponents, setPreBodyComponents }) => {
+  setHeadComponents([
+    AntiClickjackStyle,
+    AntiClickjackScript,
+  ]);
+  setPreBodyComponents([
+    <MagicScriptTag key="theme-injection" theme={themes} />,
+  ]);
 };

package.json

@@ -66,7 +66,6 @@
     "gatsby-plugin-manifest": "^5.11.0",
     "gatsby-plugin-mdx": "3.20.0",
     "gatsby-plugin-meta-redirect": "github:layer5labs/gatsby-plugin-meta-redirect",
-    "gatsby-plugin-netlify": "^5.1.1",
     "gatsby-plugin-preload-fonts": "^4.11.0",
     "gatsby-plugin-robots-txt": "^1.8.0",
     "gatsby-plugin-sharp": "^5.11.0",