QiitaにCodePenを埋め込めない問題の対策

はじめに

QiitaにはCodepenを埋め込めるはずですが、新しく作成したCodepenはなぜか正常に埋め込めませんでした。

Qiitaで記事にCodePenが埋め込めるようになりました

埋め込んだ結果はこんな感じ。

原因

codepenが生成する埋め込み用コード内に含まれるscriptのsrcが変更されていた。

赤枠の部分

<!-- これまでのscriptタグ -->
<script async src="https://static.codepen.io/assets/embed/ei.js"></script></script>

<!-- 2018/02/18時点のcodepen埋め込みコード -->
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

URLでアクセスできるjsファイルの中身は変化ありませんでした。恐らく、jsのURL変更により、Qiita上で動くjsのホワイトリストから漏れたのかなと予測。だとするなら、近いうちにQiitaが対応してくれそう。

対策

埋め込みコード内のscript urlを古いものに変更。

<p data-height="186" data-theme-id="0" data-slug-hash="WvPgPP" data-default-tab="html,result" data-user="plotly" data-embed-version="2" data-pen-title="Basic Line Plot with Plotly.js Charts" class="codepen">See the Pen <a href="https://codepen.io/plotly/pen/WvPgPP/">Basic Line Plot with Plotly.js Charts</a> by plotly (<a href="https://codepen.io/plotly">@plotly</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<!-- URLを古いものに変更 -->
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

ちゃんと動いた。

See the Pen my-plotly-sample by icchi (@icchi) on CodePen.