はじめに
QiitaにはCodepenを埋め込めるはずですが、新しく作成した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.