Protect Google Tag Manager From Malicious Or Unfamiliar Code

How do you really prevent users from injecting malicious code into Google Tag Manager and only leave easy-to-implement tags? GTM lets you do it quite easily and protect your account.
A while ago, I wrote an extensive article on the dangers of implementing Google Tag Manager, surveying permissions and how it’s actually a system that injects code from outside, and all the implications that come with it. It is the most popular article on my site, to date, and I won’t be exaggerating when I say that each and every piece of advice was written in blood. I gave a series of general recommendations for protecting your account (two-step verification, etc.), but the real scoop is up ahead.
If you know a little bit about Google Tag Manager, you know that it lets you implement premade tags, like Google Ads’ conversion tracking pixel, or Google Analytics. These user-friendly tags are relatively simple to implement, protect the user from errors, and mainly let the average user work with the system and put the right pixels in the right place. Here are some friendly pixels that won’t put your site at risk:

But somewhere out there is a very powerful tag called Custom HTML, and others can use it to run unfamiliar scripts that can harm your site, whether by accident or on purpose. It’s the kind of thing IT Security doesn’t like.

Can you block Custom HTML or any other tags?

The answer is yes. Google Tag Manager does let you blacklist the tags you don’t want running on your site or whitelist the ones you do.
Apart from that, you can block tags of a certain type (say, Hotjar) or block a group of tags according to their type (e.g. “all of the tags associated with Google”). This might put your information security and developer teams at ease, but can also be limiting for you (you’ll see what I mean).
But wait, what do I mean by block? Does it mean that I’ll go into the Google Tag Manager and simply won’t have the option to create a certain tag? Will it just disappear from the screen?
Not exactly.

How it’s done

Remember when you first installed Google Tag Manager on your website? You got a script containing several lines of code, sent it over to the developer to implement on all of the pages throughout your site, and that was it. From that moment on, you worked solely through the Google Tag Manager interface.
For more advanced Google Tag Manager implementation, you asked your developers to add to each page an empty object called dataLayer, designed to work with Google Tag Manager. This is what the empty code looks like:

<script>
dataLayer = [];
</script>

Sorry to say, but now you have to go back to the developer, so he can add a special line of code to the dataLayer. This special line meant to scan the running tags, block any blacklisted ones and allow those that are whitelisted. If you put a certain tag or tag type in both lists, the tag won’t run (blacklists are stronger).
Each time you’d want to update your blacklist/whitelist, you’d have to get your developer to help. But don’t worry – you won’t have to update them often (I hope).

Which Line to Add?

Right here you can find a list of every GTM tag and embedded tool along with their code name, to help you set them up correctly.

Each tag type has a personal ID so that you can block (or approve) it specifically – for example, cegg represents all tags made by CrazyEgg, the heat mapping tool.

Every tag type belongs to a “family”, so you can block or allow only a certain type of tag if you want. These families are called “classes”, and you can see the class for every tag. Keep in mind that if you blocked a certain class type, every tag that belongs to this class will be blocked. Go over that list carefully, and make sure you’re not doing anything stupid.

Examples

Here’s a Custom HTML block (it’s also going to block custom javascript variables and anything the system considers as “free code”):

<script>
dataLayer = [{
'gtm.blacklist' : ['customPixels']
}];
</script>

And here’s a block for almost everything besides codes and pixels that belong to Google (Ad, Analytics, Doubleclick, etc.., are all going to pass through). By the way, if you accidentally blacklist instead of whitelisting them, you will block almost every Google Tag Manager, like click listening, JS variables, etc.

<script>
dataLayer = [{
'gtm.whitelist' : ['google']
}];
</script>

You get the gist? I’ll repeat. Go through this list and find the type of tag you want to block. Find its name or family (class). Add the tag ID or class to either your white or blacklists in the dataLayer – and that’s it.

But there’s a catch…

It’s all good and well, but if we use HTML block, we couldn’t add the Facebook pixel code. Fortunately, Google launched the Community Template Gallery which allows the community to add ready-made pixels that are not officially supported by Google. But if you can’t find your desired tag, you must contact your developers to manually add the code to your site. This would leave us to handle only the simple, ready-made GTM tags, and nothing else. That’s good news for information security teams, not so great news for everyone else. Good luck, defenders!