Browser-sync: [Violation] Avoid using document.write()

[bramjoosten]

Issue details

Chrome nags about using document.write(), it's a bad practice and may break in the future.

Steps to reproduce/test case

1. open chrome devtools
2. set error reporting to verbose.

Please specify which version of Browsersync, node and npm you're running

• Browsersync [2.24.7]
• Node [8.9.4]
• Npm [5.6.0]

Affected platforms

• [ ] linux
• [ ] windows
• [x] OS X
• [ ] freebsd
• [ ] solaris
• [ ] other _(please specify which)_

Browsersync use-case

• [ ] API
• [x] Gulp
• [ ] Grunt
• [ ] CLI

for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

const browserSync = BrowserSync.create();

[WillsB3]

This also affects using BrowserSync on sites which use a Content Security Policy. See _Refactor calls to JS APIs incompatible with CSP_ in this documentation.

[machito]

+1

[haydenbr]

For what it's worth, I took a shot at fixing this, but I ran into trouble actually building browser-sync locally.

using node v8.15.0, npm v6.4.1

Version: webpack 3.12.0
Time: 942ms
        Asset     Size  Chunks                    Chunk Names
    js/app.js  1.44 MB       0  [emitted]  [big]  main
js/app.js.map  1.75 MB       0  [emitted]         main
   [4] ./module.js 82 bytes {0} [built]
  [25] multi ./app.js 28 bytes {0} [built]
  [26] ./app.js 1.16 kB {0} [built]
  [35] ./modules/bsDisconnect.js 1.89 kB {0} [built]
  [36] ./modules/bsNotify.js 2 kB {0} [built]
  [37] ./modules/bsHistory.js 1.29 kB {0} [built]
  [38] ./modules/bsClients.js 1.05 kB {0} [built]
  [39] ./modules/bsSocket.js 2.4 kB {0} [built]
  [67] ./services/Pages.js 1.44 kB {0} [built]
  [68] ./services/Options.js 296 bytes {0} [built]
  [69] ./modules/bsStore.js 1.34 kB {0} [built]
  [72] ./main/controller.js 3.34 kB {0} [built]
  [73] ./filters.js 413 bytes {0} [built]
  [75] ./directives.js 293 bytes {0} [built]
  [77] ./directives/link-to.js 656 bytes {0} [built]
    + 65 hidden modules

ERROR in js/app.js from UglifyJs
Unexpected token: name (index) [js/app.js:224,5]
+ Results from 'build-all'
└─┬ build-all
  └─┬ build-js
    └─┬ webpack
      └── x @npm webpack (1.47s)
          Previous command failed with exit code 2

[haydenbr]

And I'm thinking this is the change that should be made to fix the original issue.

Replace the contents of script-tags.tmpl with this:

<script id="__bs_script__">//<![CDATA[
    let bsScript = document.createElement('script');
    bsScript.setAttribute('async', '');
    setAttribute('src', '%script%'.replace("HOST", location.hostname))
//]]></script>

[maxzz]

And I'm thinking this is the change that should be made to fix the original issue.

Replace the contents of script-tags.tmpl with this:

<script id="__bs_script__">//<![CDATA[
    let bsScript = document.createElement('script');
    bsScript.setAttribute('async', '');
    setAttribute('src', '%script%'.replace("HOST", location.hostname))
//]]></script>

A slightly corrected version will remove annoying message in DevTools:

<script id="__bs_script__">//<![CDATA[
    let script = document.createElement('script');
    script.setAttribute('async', '');
    script.setAttribute('src', '%script%'.replace("HOST", location.hostname));
    document.body.appendChild(script);
//]]></script>

[haydenbr]

@maxzz Oh yeah. That makes more sense. Looking back at what I wrote, I don't think I completed the thought.

Were you able to get browser-sync to build locally?

[glen-84]

// TODO: Workaround for https://github.com/BrowserSync/browser-sync/issues/1600.
snippetOptions: {
    rule: {
        match: /<\/head>/u,
        fn(snippet, match) {
            const {
                groups: {src}
            } = /src='(?<src>[^']+)'/u.exec(snippet);

            return `<script src="${src}" async></script>${match}`;
        }
    }
}