Metomic

The duck-sharpie-rocketship Developer Hub

Welcome to the duck-sharpie-rocketship developer hub. You'll find comprehensive guides and documentation to help you start working with duck-sharpie-rocketship as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    API Reference

Manual blocking

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

Key
Value
Why?

type

text/x-metomic

Tells the browser that this is a data block and not a JavaScript script, causing the browser not process it. Additionally, it allows Metomic to recognise the element as a blocked script.

data-micropolicy

any valid micropolicy slug

The slug of the Micropolicy used to unblock this script. When the specified Micropoliocy is consented to, Metomic 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.com/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.com/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.com/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, Metomic can do the work for you with Autoblocking.

Updated 4 months ago


What's Next

Once you've learned how Autoblocking can help you, check out how Placeholders give your users a meaningful way of unblocking content:

Autoblocking
Placeholders

Manual blocking


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.