Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: set headers so playground works again #3381

Conversation

brian-smith-tcril
Copy link
Contributor

@brian-smith-tcril brian-smith-tcril commented Jan 15, 2025

The playground wasn't loading, it was showing the following error:

Refused to display 'https://deploy-preview-3367--paragon-openedx-v23.netlify.app/' in a frame because it set 'X-Frame-Options' to 'deny'.

I looked into it a bit and found https://answers.netlify.com/t/breaking-change-x-frame-options-set-to-deny/102220, after which I tried what was recommended in https://answers.netlify.com/t/breaking-change-x-frame-options-set-to-deny/102220/3

For the Redash project we found that we could overcome this by setting the Content-Security-Policy header in gatsby-config.js

  headers: [
    {
      source: '*',
      headers: [
        {
          key: 'Content-Security-Policy',
          value: 'frame-ancestors *;',
        },
      ],
    },
  ],

This works because X-Frame-Options is obsolete: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

Also see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

Warning: Instead of this header, use the frame-ancestors directive in a Content-Security-Policy header.

This made it so the main playground loaded correctly, but the iframes nested within the playground were failing with the same X-Frame-Options error.

I then started looking for ways to set the headers for playroom. I found https://docs.netlify.com/routing/headers/#syntax-for-the-netlify-configuration-file which mentioned netlify.toml, so I just added a headers section to our netlify.toml file and everything worked!

Everything working: https://deploy-preview-3381--paragon-openedx-v22.netlify.app/playground

Copy link

netlify bot commented Jan 15, 2025

Deploy Preview for paragon-openedx-v22 ready!

Name Link
🔨 Latest commit f666b3b
🔍 Latest deploy log https://app.netlify.com/sites/paragon-openedx-v22/deploys/67880d1aac39ef0008006cc0
😎 Deploy Preview https://deploy-preview-3381--paragon-openedx-v22.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

codecov bot commented Jan 15, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.44%. Comparing base (8979107) to head (f666b3b).
Report is 2 commits behind head on braden/react-gatsby-bump.

Additional details and impacted files
@@                    Coverage Diff                    @@
##           braden/react-gatsby-bump    #3381   +/-   ##
=========================================================
  Coverage                     93.44%   93.44%           
=========================================================
  Files                           251      251           
  Lines                          4519     4519           
  Branches                       1016     1055   +39     
=========================================================
  Hits                           4223     4223           
  Misses                          293      293           
  Partials                          3        3           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@brian-smith-tcril brian-smith-tcril changed the title test gatsby 5 playground fix fix: set headers so playground works again Jan 15, 2025
@brian-smith-tcril brian-smith-tcril changed the base branch from release-22.x to braden/react-gatsby-bump January 15, 2025 19:42
@brian-smith-tcril brian-smith-tcril marked this pull request as ready for review January 15, 2025 19:42
@bradenmacdonald
Copy link
Contributor

Nice, thanks!

@bradenmacdonald bradenmacdonald merged commit d749203 into openedx:braden/react-gatsby-bump Jan 15, 2025
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants