A Parser-blocking, cross-origin script is invoked via document.write - how to circumvent it?

Question

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:

@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 '16 at 08:20
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 '16 at 08:29
@CBroe What about web pages that are no longer updated? Browsers should load them as they always did, not break them. — niutech, Sep 22 '16 at 16:27
Same problem, tried to add a ad script. But shows this error and the ads are not working. Anyone could help me regarding this ? — Ashish Dung Dung, Sep 22 '16 at 18:00
@CBroe my Wordpress google analytics dashboard plugin broke when this was implemented — KhoPhi, Sep 27 '16 at 09:45
So the plugin author needs to update it. Again: So what? That happens all the time in the world of plugins. — CBroe, Sep 27 '16 at 11:48
@CBroe You don't mean (possibly) millions of websites should be updated or they will stop loading, do you? The main principle of the Internet has always been backward compatibility (back to the [first website](http://info.cern.ch/)) and now Google breaks it. Not nice. — niutech, Oct 10 '16 at 09:55
@niutech: Backwards compatibility is a double-edged sword. Yes, we need it to a certain degree - but it can also easily become a hindrance to progress. — CBroe, Oct 10 '16 at 10:01
@CBroe, I had to laugh at your comment to Rexford regarding the google analytics dashboard. Do you not see the irony there? Google broke their own plugin! — Andrew Steitz, Dec 27 '16 at 15:00

score 38 · Accepted Answer · answered Sep 21 '16 at 08:13

38

According to Google Developers article, you can:

Use asynchronous script loading, using <script src="..." async> or element.appendChild(),
Submit the script provider to Google for whitelisting.

answered Sep 21 '16 at 08:13

niutech

28,923
15
96
106

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 '16 at 09:55
6

@Lee That link appears in the official [article](https://developers.google.com/web/updates/2016/08/removing-document-write#how_do_i_fix_this) above. – niutech Nov 04 '16 at 01: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 https://developers.google.com/speed/docs/insights/UseAsync – Mangesh Sathe Dec 22 '16 at 07:53
3

Mangesh: some scripts must be loaded synchronously (e.g. if another script depends on the first one). – CpnCrunch Feb 21 '17 at 23:43
1

I've faced this issue today and adding "async" did the trick. Thanks! – Daniel Vukasovich Dec 14 '18 at 15:38
@nuitech Is there a way to do this and still load all my scripts synchronously? I have second script that is dependent on certain things loading from the first one. When I do the above solutions `async` or `element.appendChild()` the first script gets delayed being loaded causing errors in the 2nd script. – rolinger Sep 11 '20 at 02:29

score 19 · Answer 2 · answered Jan 20 '17 at 13:53

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.

answered Jan 20 '17 at 13:53

Vaibhav Mistry

338
2
9

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](https://docs.google.com/forms/d/e/1FAIpQLSdMQ7PfoVMob5OTXSgodoG5V1eNC5CyQ_qo4skbN62RDSEPcg/viewform) it might help – SHamel Apr 20 '17 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? – Mauricio Moraes Apr 29 '17 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. – Vaibhav Mistry May 01 '17 at 06:49
3

Thanks, if someone is wondering as I was, the Rocket Loader Module is in the Speed section on Cloudflare. – Felipe Barnett May 04 '17 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 – bananaforscale Oct 12 '18 at 20:30

Gray · Answer 3 · 2018-02-15T15:21:28.803

4

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

var script = document.createElement('script');  
script.src = "....";  
document.head.appendChild(script);

edited Feb 15 '18 at 15:21

answered Feb 15 '18 at 15:08

Gray

67
3

3

Many times you cannot modify a third-party script which is using `document.write`. – niutech Feb 19 '18 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 '18 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 '18 at 15:07

A Parser-blocking, cross-origin script is invoked via document.write - how to circumvent it?

3 Answers3

Linked