Why does Shopify alter my custom HTML and CSS for new window links?

[fuegoyhumo]

I am using the Dawn theme up to date and have written custom HTML and CSS on one of my pages.

I simply wanted my buttons to open in a new window so I added the attribute "target=_blank". After saving, shopify automatically added this

data-sanitized-

to my target attribute (see below) rendering it useless and my links still opening in the same tab. It also removed the rel="noopener noreferrer" attribute I had added after target="_blank" for good measure.

<div class="rich-text_buttons"><a data-sanitized-target="_blank" href="https://goo.gl/maps/SehrJSk6ECbtDvXN8" class="button button--primary" style="color: rgb(var(--color-button-text));">Google Maps Link</a></div>

Why is this happening and how do I get shopify to stop?

[jdshaw]

Same thing is happening to me. Must be a glitch with shopify. It's actually adding "data-sanitized-" to a lot of things. This is causing some things to break (example: target="_blank") and others still work as they should.

Upon save this is a snip of our code:

<!-- Button trigger modal --> <button type="button" class="storieslink font-weight-normal" data-toggle="modal" data-sanitized-data-toggle="modal" data-target="#alyssabio" data-sanitized-data-target="#alyssabio"> Read Bio </button> <!-- Modal -->
<div class="modal fade" id="alyssabio" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" data-sanitized-aria-labelledby="exampleModalLabel" aria-hidden="true" data-sanitized-aria-hidden="true">

[AHuser]

Same thing here. All my codes are infected with "data-sanitized-" which is affecting the behaviour of my attributes (especially the target attribute)! No matter how much I clear the code, this reappears every time I save my page. Hoping that Shopify fixes this soon...

[TothDigital]

Same issue here

[paulatemijay]

I'm not sure if you were able to solve it on your own, but I found that adding rel="noopener" after target="_blank" worked for the links on the page I was trying to keep from being data-sanitized.

[nuwud]

I had this issue and it turned out to be a missing quotation mark in an earlier part of my script.

[nurfz]

I just asked the Shopify support. It's intended and they don't want to change the behavior:

---

Thank you for your patience! I have reviewed this with the team and as it turns out, Shopify does sanitize certain HTML attributes, including "target="_blank", for security reasons to minimize potential risks such as phishing attacks. Unfortunately, there is no direct solution for this within the Shopify platform. If you need a link to open in a new tab, you could suggest users to right-click the link and select "Open link in new tab" as an alternative.

---

[TobiEcom]

You can easily solve that by adding this snippet of javascript-code into your theme (or liquid file "main-article.liquid")

<script>
document.addEventListener('DOMContentLoaded', function (event) {
let aElements = document.querySelectorAll('a[data-sanitized-target="_blank"]');
aElements.forEach((eElem) => {
eElem.setAttribute('target', '_blank');
});
});

</script>

What this script does?

After the page has loaded if finds all the links that have the attribute target="_blank" (which was changed by Shopify internally).

In the loop, it sets a new attribute target="_blank".

Let me know if you need help by that.

[plezor]

Hi Tobi

The code helped stop target="_self" changing to target="_blank" automatically on page loading. I changed...

data-sanitized-target="_blank" to target="_blank"

and 'target', '_blank' to 'target', '_self'

 ...thanks for your help with the code.