Prevent parsing of <script> tags inside <template> tags

Hey :)

I'm currently working on a small solution to put arbitrary HTML snippets (e.g. Twitter feed embeds or iframes) behind a "consent container" - the content should not be loaded until you explicitly give your consent, usually by clicking a button.

The content is rendered in the template in a <template> tag and then copied by Alpine into another <div> when consent is given.

This works great so far, however I now have the problem especially with Twitter Embeds that the snippets also contain <script> tags, which are apparently immediately evaluated and loaded. Now reading in various places that <template> tags shouldn't actually do that. Well, they shouldn't, right?

Can this be due to Alpine (e.g. because Apine also parses the content again) or was this just always the case?

Niush

4 years ago

Best Answer

Level 50

This little snippet's <script> is only loading when open is true. As expected:

<div class="min-h-screen p-6 md:p-32 bg-white">
	<div x-data="{open: false}" class="relative max-w-3xl mx-auto">

		<button x-text="'Open:' + open" @click="open = !open"></button>

		<template x-if="open">
			<div>
				<blockquote class="twitter-tweet">
					<p lang="en" dir="ltr">
						<a href="https://twitter.com/Interior/status/463440424141459456?ref_src=twsrc%5Etfw">
							@Interior - May 5, 2014
						</a>
					</p>
				</blockquote>
				<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
			</div>
		</template>

	</div>
</div>

Could be browser specific issue?

Helmchen

4 years ago

Level 15

i'll give that a try, thank you :)

the only difference is the x-if on the <template> - maybe that does make a difference here.

Helmchen

4 years ago

Level 15

I just tested this with Chrome and it works as expected. Strange. Firefox loads the script in advance in any case, possibly due to the "async" attribute.

It didn't occur to me to test that in another browser, so you helped me with your answer anyway :)

Please or to participate in this conversation.