67

Google Chrome started implementing Blocking the load of cross-origin, parser-blocking scripts inserted via document.write in the main frame on slow networks, which causes the following error:

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

However, my web page requires loading a third party script synchronously, using document.write('<script src="..."></script>'). How to circumvent that blockade?

More about that change:

12
  • 2
    Why does it have to be via document.write?
    – CBroe
    Sep 21, 2016 at 8:12
  • 1
    @CBroe Because this is the script I got from a third-party and I am not authorized to change it (plus browsers should not suddenly break long-standing pages).
    – niutech
    Sep 21, 2016 at 8:20
  • 1
    Well that 3rd party will need to modify their code they give out to customers anyway, if they want it to continue to work in browsers that implement this. So you should talk to them.
    – CBroe
    Sep 21, 2016 at 8:29
  • 3
    @CBroe What about web pages that are no longer updated? Browsers should load them as they always did, not break them.
    – niutech
    Sep 22, 2016 at 16:27
  • 1
    @CBroe my Wordpress google analytics dashboard plugin broke when this was implemented
    – KhoPhi
    Sep 27, 2016 at 9:45

3 Answers 3

38

According to Google Developers article, you can:

6
  • 9
    Are you sure that submission link is genuine, I was just about to fill it in when I noticed it's just a Google Form that someone has created, and has spelling and grammar mistakes all over it... Doesn't look genuine.
    – Lee
    Oct 25, 2016 at 9:55
  • 6
    @Lee That link appears in the official article above.
    – niutech
    Nov 4, 2016 at 1:26
  • Using asynchronous scripts means that your page can render more quickly. Instead of forcing users to wait for a script to finish downloading before the page renders, a script can be downloaded in the background. Although most scripts were originally synchronous, newer versions of the scripts have been designed to load asynchronously. Check developers.google.com/speed/docs/insights/UseAsync Dec 22, 2016 at 7:53
  • 3
    Mangesh: some scripts must be loaded synchronously (e.g. if another script depends on the first one).
    – CpnCrunch
    Feb 21, 2017 at 23:43
  • 1
    I've faced this issue today and adding "async" did the trick. Thanks! Dec 14, 2018 at 15:38
19

@niutech I was having the similar issue which is caused by Rocket Loader Module by Cloudflare. Just disable it for the website and it will sort out all your related issues.

5
  • I have the exact same issue with the Rocket Loader Module of Cloudflare, which is in beta. If there are more people submitting it to be whitelisted by Google it might help
    – SHamel
    Apr 20, 2017 at 13:03
  • This happens to me on the first access to my site's url and is associated with the activation of the Rocket Loader module indeed, but it is a pitty if I have to disable it, because it gave me some good points on google page insights. Any other option? Apr 29, 2017 at 19:31
  • @MauricioMoraes Rocket Loader Module is in Beta at this stage. Need to wait until Cloudflare update it and launch it as Stable version. Or as an alternative, you use niutech's answer. May 1, 2017 at 6:49
  • 3
    Thanks, if someone is wondering as I was, the Rocket Loader Module is in the Speed section on Cloudflare. May 4, 2017 at 23:04
  • Rocket Loader is no longer showing up as in beta. Seems to be now in production. The help section says to add data-cfasync="false" to the <script> attributes to have Rocket Loader ignore that specific script. Adding the attribuite did not work for my case. Disabled Rocket Loader to fix this issue. Thanks @VaibhavMistry Oct 12, 2018 at 20:30
4

Don't use document.write, here is workaround:

var script = document.createElement('script');  
script.src = "....";  
document.head.appendChild(script);
3
  • 3
    Many times you cannot modify a third-party script which is using document.write.
    – niutech
    Feb 19, 2018 at 12:38
  • 1
    @niutech I think all listed solutions are trying to change sync loading to async, but you are asking for loading 3rd-party script synchronously, then I'm thinking it may be hard to get a solution if the 3rd-party script is using document.wrtie. Let me know if you find a solution.
    – Gray
    Feb 20, 2018 at 14:57
  • Or put the 3rd-party script in the same domain of your script may resolve this issue. This solution need handle the synchronization between local copy and original copy.
    – Gray
    Feb 20, 2018 at 15:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.