[Error] Unable to post message to …【YouTube Data API】

Question

前提・実現したいこと

YouTube Data APIについてエラーを解決したく質問です。

github.com/youtube/api-samples/javascript/search.html

上記のhtmlファイルをブラウザで開いて、動画の検索をしたいと思っています。
以下の手順を行うとエラーが発生しました。

1. Google Cloud ConsoleにてYouTube Data APIを有効にする。
2. 「APIとサービス」の「認証情報を作成」から「OAuthクライアントID」を選択してクライアントIDを取得。
3. auth.jsのOAUTH2_CLIENT_IDにクライアントIDを設定。
4. search.htmlの//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.jsをhttps://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.jsに変更。
5. Safariでsearch.htmlを起動。

発生している問題・エラーメッセージ

[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.
[Error] Unable to post message to file://. Recipient has origin null.

該当のソースコード

[Error] Unable to post message to file://. Recipient has origin null.

	postMessage
	（anonymous関数） (cb=gapi.loaded_0:99:466)

試したこと

• YoutubeのAPI使おうとしたら「Unable to post message…」

search.htmlに<script src="https://www.youtube.com/iframe_api"></script>を記述。

• Chrome、Firefoxで確認。

補足情報（FW/ツールのバージョンなど）

Darwin Kernel Version 17.5.0: Fri Apr 13 19:32:32 PDT 2018; root:xnu-4570.51.2~1/RELEASE_X86_64
Safari バージョン11.1 (13605.1.33.1.4)

Answer 1

analytics_codelab.htmlまたは、playlist_updates.htmlを開いてあげて、authorizeしてあげれば検索できるようになりました。

Answer 2

自己解決しました。
「前提・実現したいこと」の「5. Safariでsearch.htmlを起動。」がまずかったみたいです。
ローカルのhtmlファイルを開くとfileプロトコルで開かれますが、
browser-syncを用いてsearch.htmlをhttpプロトコルで開いてみたところ、
[Error] Unable to post message to file://. Recipient has origin null.のエラーはなくなりました。

Comments

[syuma1214]

今は違うエラーに詰まってますが、とりあえずこの件は閉めます。

[syuma1214]

実現したいことできました。