freks blog

Gatsbyで静的ページを作成して、iframeで表示してみました

ページを用意

Routing | Gatsby

あたりを見てファイルを用意します

src/pages/sample/test.js

import React from 'react'
import './test.css'

export default function Test() {
  return (
    <div className="sample-test">
      <h2>Test</h2>
      <p>This is a test page.</p>
    </div>
  )
}

src/pages/sample/test.css

.sample-test {
  h2 {
    color: salmon
  }
}

h2 にグローバルにあてるとサイト全体（他のページにも）適用されてしまうので注意です

とかで /sample/test にアクセスすると表示されます

iframeで表示(失敗)

/samples/test.js を表示してみます

<iframe
  id="iframeSample"
  title="iframe Sample"
  width="640"
  height="200"
  src="/samples/test">
</iframe>

を書くと

npm run start のローカルでは表示されますが、デプロイ後はX-Frame-Options: denyでブロックされてしまいます

htmlとcssのコード紹介にいいかもと思ったのですが、X-Frame-Options をなんとかしないとiframeは使えないですね