こんにちは、ゆんつです。
HTMLやCSSのコード、またそれらのコードの実行結果を手軽にブログに掲載することができる「CodePen」。
とても便利なので、僕のブログでも結構使わせてもらっています。
ところがその「CodePen」に最近少し異変が起きています。
その異変とは
「CodePen」への接続が拒否されて表示されない
というものです。
具体的に言うと以下の画像のような感じです。
※Chromeの場合
※FireFoxの場合
本来なら「CodePen」を埋め込んでいる箇所はHTMLやCSSなどのコード、またはその実行結果などが表示されるようになっています。
ところがここ最近「CodePen」を埋め込んでいる箇所に
codepen.ioで接続が拒否されました
というメッセージが表示され、埋め込み部分にコードなどが表示されない現象が起きています。
僕がこの現象に気づいたのは5月初め。
自分のブログの過去の記事を読んでいたところ「CodePen」を埋め込んでいる箇所がこのようになっていました。
困ったなあ
この現象を改善したいですが、根本的な改善策は見つかりませんでいた。
ただ根本的な解決法ではありませんが、埋め込んだ「CodePen」を自分のブラウザに一時的に表示する解決法はあります！
一時的な解決法
CodePenの埋め込み箇所が「codepen.ioで接続が拒否されました」になっていたら。
まず使用しているブラウザで一旦「CodePen」のトップページにアクセスします。
すると「Checking your browser before accessing codepen.io」という画面が現れます。
そして5秒くらいすると自動的に「CodePen」のトップページにつながります。
これで準備はOK！
「codepen.ioで接続が拒否されました」となっているページに再アクセスするか、ページを開いているままならリロードしてみて下さい。
おそらく接続が拒否されていた「CodePen」が表示されていると思います。！
効果は1日くらい
この方法で1日くらいはそのブラウザで「CodePen」を表示できますが、時間が経つと再度「codepen.ioで接続が拒否されました」になると思います。
そのときは再度
にアクセスして同じ手順を踏んでみてください。
セキュリティ対策が原因みたいです
以前までの「CodePen」はアクセスしても「Checking your browser before accessing codepen.io」という画面は出ず、そのままダイレクトにトップページが表示されていました。
そして、そのときには「codepen.ioで接続が拒否されました」というような事態は起きていなかったと思います。
「Checking your browser before accessing codepen.io」という画面が出る理由ですが、これは「Cloudflare」という会社が提供しているDDos攻撃（アクセスを集中させてサーバーをダウンさせる攻撃）を防ぐための仕組みを「CodePen」が導入したため現れるようです。
詳しい仕組みは公式サイトをご覧ください。
これにより「CodePen」を表示するための接続が拒否されるようになっているみたいです。
まとめ
というわけで「CodePen」が埋め込まれている部分が「codepen.ioで接続が拒否されました」などになって表示されない場合。
「CodePen」の公式サイトにアクセスし「Checking your browser before accessing codepen.io」の画面を経て「CodePen」にアクセスしてください。
そのうえで「CodePen」が埋め込まれているページに再度アクセスするかリロードすれば、おそらくいつもの「CodePen」を目にすることができると思います。
ただし一時的な解決法なので時間が経つとまた表示されなくなる可能性が高いので、そうなったら再度手順を繰り返してください。
もし根本的な解決法がわかったら、また記事にしたいと思います。
それでは、またー。
コメント