情報科学屋さんを目指す人のメモ

方法・手順・解説を書き残すブログ。私と同じことを繰り返さずに済むように。

「A Parser-blocking, cross-origin script,…, is invoked via document.write.」警告が表示される問題についてメモ

Chrome (67) JavaScript (13)

このブログのコンソールに、「A Parser-blocking, cross-origin script, http://ajax.cloudflare.com/cdn-cgi/nexp/(略)/cloudflare.min.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.」が表示されていることに気が付きました。

この警告表示(エラーではなくWarnings)についてメモしておきます。

表示される警告表示

ChromeのDeveloper Toolsのコンソールに表示されるログには、次の通り表示されます。

a-parser-blocking-cross-origin-script-is-invoked-via-document-write

(index):13 A Parser-blocking, cross-origin script, http://ajax.cloudflare.com/cdn-cgi/nexp/dok3v=088620b277/cloudflare.min.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.

意味

最初、.jsが実行できていないのかとも思ったのですが、よくよく読めば、「低速な(不安定な)回線だった場合に、document.writeを使って追加実行したこのparser-blockingでcross-originなこの.jsは実行されないかもよ!」みたいな意味でした。

つまり早い話、document.writeを使うな、と。

警告についての詳細情報

この警告って前から出ていたっけなぁ?などとこの警告について調べてみると、この警告について詳細に書かれているページが見つかりました(英語)。

どうやら、2016年9月から、この警告が表示されるようになったようです。

対策について

対策については、そのページに以下の通り書かれています。

How do I fix this?

This simple answer is don't inject scripts using document.write(). We are maintaining a set of known services that provide asynchronous loader support that we encourage you to keep checking.

If your provider is not on the list and does support asynchronous script loading then please let us know and we can update the page to help all users.

If your provider does not support the ability to asynchronously load scripts into your page then we encourage you to contact them and let us and them know how they will be affected.

If your provider gives you a snippet that includes the document.write(), it might be possible for you to add an async attribute to the script element, or for you to add the script elements with DOM API's like document.appendChild() or parentNode.insertBefore() much like Google Analytics does. 引用元

結局、blockするscriptタグをdocument.writeで追加するな、ということなので最悪asyncの追加すればよい、と。

今回はcloudflareの.jsなので・・・

いかし今回問題のコードは、CDNサービスcloudflareを経由して.htmlを配信する際に、高速化のために自動追加してもらっているjsを配置するコードの影響なので、直接直す、と言うわけにもいかず、ひとまずcloudflare側の対応待ちかな、と思っています(もしくは、この状態のままでも問題の無い工夫が別の箇所で実施されているかも知れません)。

ただ現状、2Gが対象で、3Gは対象外ということで、よほどpoorな回線でなければ影響を受けることはなさそうです。

多いのはgoogle analytics?

ちょっといろいろなサイトを見ていると、

A Parser-blocking, cross-origin script, http://www.google-analytics.com/ga.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.

のように、Google Analyticsのコードが多そうです。

コメント(0)

新しいコメントを投稿