Manual blocking

Suggest Edits

The most fundamental way of blocking problematic scripts from running is to deliberately malform the script tag with Confirmic attributes. The two attributes you’ll need to add are:

KeyValueWhy?
typetext/x-metomicTells the browser that this is a data block and not a JavaScript script, causing the browser not process it. Additionally, it allows Confirmic to recognise the element as a blocked script.
data-micropolicyany valid micropolicy slugThe slug of the Micropolicy used to unblock this script. When the specified Micropoliocy is consented to, Confirmic will automatically unblock the script tag, converting it back to a JavaScript script, allowing the browser to execute it or download the associated external script.

Inline scripts

<script type="text/x-metomic" data-micropolicy="MY-POLICY-SLUG">
  /** This code only runs when 
      consent for MY-POLICY-SLUG has been given **/
  console.log("ok")
</script>

External scripts

<script 
  src="http://third-party.example/someScriptThatUsesCookies.js"
  type="text/x-metomic"
  data-micropolicy="MY-POLICY-SLUG"
>
</script>

Everything else

You can also prevent any html element (e.g. images, iframes, embeds etc) from being parsed and rendered by wrapping them in such a script tag:

<script
  type="text/x-metomic" 
  data-micropolicy="MY-POLICY-SLUG"
>

  <!-- this embed won't be loaded or rendered
       until consent for MY-POLICY-SLUG has been given --> 
  <iframe src="http://third-party.example/embedded-content"></iframe>
  
</script>

🚧

Note

The above technique relies on the content being HTML. If you are wrapping plain text, you will need to either wrap the text in an element, or begin the block with an html comment.

Avoid nesting scripts

Be careful not to nest <script> tags inside each other, or the first closing tag will close the entire block:

<script 
  type="text/x-metomic" 
  data-micropolicy="MY-POLICY-SLUG"
>
  <!-- This next line will be read as the `text` property of the opening
       script and thus will not load the third party script -->
  
  <script src="http://third-party.example/embedded-content.js">
    <!-- However, this closing tag will close the entire block -->
  </script>
  <p>
    This content will be rendered since the closing script tag
    already closed the entire block.
  </p>
</script>

A better way…

Blocking scripts manually is always an available option - but to help make things easier, Confirmic can do the work for you with Autoblocking.

Updated almost 3 years ago