Techioz Blog

Github ページ上のアルフォリオ Web サイトに Twitter タイムラインを埋め込む

概要

私は al-folio テンプレートを使用して、github ページでホストする個人の Web サイトを構築しています。 Twitterのタイムラインを埋め込みたいです。

https://publish.twitter.com/ にアクセスし、https://twitter.com/StackOverflow と入力すると、次のコードを Web サイトに貼り付ける必要があると表示されます。

<a class="twitter-timeline" href="https://twitter.com/StackOverflow?ref_src=twsrc%5Etfw">Tweets by StackOverflow</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

ただし、そうするとタイムラインが表示されなくなります。開発者コンソールを見ると、次のように表示されます。

Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

追加してみました

<meta http-equiv="Content-Security-Policy" content="default-src *;
    img-src * 'self' data: https: http:;
    script-src 'self' 'unsafe-inline' 'unsafe-eval' *;
    style-src  'self' 'unsafe-inline' *">

しかし：

助言がありますか？ありがとう。

解決策

どこかにコンテンツをブロックするポリシーがあります。メタで行うように別のポリシーを追加しても、ポリシーが厳しくなるだけなので、役に立ちません。

ページ上には、含めたいコンテンツを許可するために変更する必要がある CSP がある可能性があります。コンソール エラーを確認して、どのソースとディレクティブが必要であるかを正確に確認してください。

これが Twitter CSP に起因する場合は、それに対してできることは何もありません。