elbywan/yett

document.write()

mindplay-dk opened this issue · 2 comments

Just wondering, will this capture document.write() statements?

A lot of embeds and other snippets issue document.write() injections synchronously in head or body during page-load.

I'm wondering if MutationObserver would pick these up - and in IE11 in particular.

Might be good to have test-coverage for this?

Hey @mindplay-dk, good question!

Just wondering, will this capture document.write() statements?

The answer seems to depend on the browser. I made a small test file to check it out:

<!DOCTYPE html>
<html>
  <head>
    <script>
      window.YETT_WHITELIST = [
        new RegExp("https://unpkg.com/yett")
      ]
    </script>
    <script src="https://unpkg.com/yett"></script>
    <script>
      document.write(`
        <script src="https://code.jquery.com/jquery-1.12.4.js"><\/script>
      `)
    </script>
  </head>
  <body>
    <button onclick="window.yett.unblock()">Unblock</button>
    <button onclick="alert(window.jQuery ? 'no' : 'yes')">does yett block scripts injected by document.write?</button>
  </body>
</html>

It works with Firefox v80, but not with Chrome v85.

On a side note, using document.write is very strongly discouraged even though I understand that some tracking companies are still using that.

With that said, a quick solution would be to group document.write contents into a single call:

<!-- instead of: -->
<script src="https://unpkg.com/yett"></script>
<script>
  document.write(`
    <script src="https://code.jquery.com/jquery-1.12.4.js"><\/script>
  `)
</script>

<!-- do: -->
<script>
  document.write(`
    <script src="https://unpkg.com/yett"><\/script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"><\/script>
  `)
</script>

These are all third-party scripts - whether or how they use document.write is nothing I have control of.

I'm surprised this doesn't work in Chrome - I suspected this would be a problem in IE, but not in Chrome... 😶