Forced htmlentities() encoding in custom css 'content: ">";'? #2386

Closed
opened 2026-02-05 03:54:47 +03:00 by OVERLORD · 6 comments
Owner

Originally created by @Wookbert on GitHub (Sep 11, 2021).

We injected some custom CSS code (in Settings > Custom HTML head content) to display an "north east arrow icon" ↗️ behind external links on BookStack pages, using the content property, code point ↗.

Since release 21.08.x BookStack is parsing the value behind content, and automatically re-encodes HTML entities, not only „high“ Unicode data points, but simply everything which supports HTML re-encoding, in particular also § towards §.

The change in 21.08.x unfortunately breaks our icon hack.

Here our said CSS injection:

<style type="text/css">
  /* adds arrow icon to external links */
  a[href*="//"]:not([href*="our.bookstack.com"])::after { 
    content: "↗️";
    text-decoration: none;
    padding-left: 0.15em;
    color: #999;
  }
  a[href*="//"]:not([href*="our.bookstack.com"]):hover::after {
    text-decoration: underline;
    text-decoration-color: red;
  }
</style>
<script>
  /* sets the target attribute to '_blank' if link doesn't begin with '#' or 'https://our.bookstack.com' */
  window.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.page-content a[href]').forEach(function(el, x, y) {
      if (el.getAttribute('href') && 
          (!el.getAttribute('href').startsWith('#')) &&
          (!el.getAttribute('href').startsWith('https://our.bookstack.com'))) {
        el.setAttribute('target', '_blank'); 
      }
    });
  });
</script>
Originally created by @Wookbert on GitHub (Sep 11, 2021). We injected some custom CSS code (in Settings > Custom HTML head content) to display an "north east arrow icon" ↗️ behind external links on BookStack pages, using the `content` property, code point `&#8599;`. Since release 21.08.x BookStack is parsing the value behind `content`, and automatically re-encodes HTML entities, not only „high“ Unicode data points, but simply everything which supports HTML re-encoding, in particular also `§` towards `&sect;`. The change in 21.08.x unfortunately breaks our icon hack. Here our said CSS injection: ``` <style type="text/css"> /* adds arrow icon to external links */ a[href*="//"]:not([href*="our.bookstack.com"])::after { content: "↗️"; text-decoration: none; padding-left: 0.15em; color: #999; } a[href*="//"]:not([href*="our.bookstack.com"]):hover::after { text-decoration: underline; text-decoration-color: red; } </style> <script> /* sets the target attribute to '_blank' if link doesn't begin with '#' or 'https://our.bookstack.com' */ window.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.page-content a[href]').forEach(function(el, x, y) { if (el.getAttribute('href') && (!el.getAttribute('href').startsWith('#')) && (!el.getAttribute('href').startsWith('https://our.bookstack.com'))) { el.setAttribute('target', '_blank'); } }); }); </script> ```
OVERLORD added the 🐛 Bug🏭 Back-End labels 2026-02-05 03:54:47 +03:00
Author
Owner

@ssddanbrown commented on GitHub (Sep 12, 2021):

Hi @Wookbert, Thanks for reporting and sorry for this.
Just so I can be sure, could you confirm the exact version you're on which has this issue?

I made some more significant changes to Custom HTML Head content within v21.08.2 which could have caused this but if you happen to be on v21.08 or v21.08.1 it'll be something unexpected.

@ssddanbrown commented on GitHub (Sep 12, 2021): Hi @Wookbert, Thanks for reporting and sorry for this. Just so I can be sure, could you confirm the exact version you're on which has this issue? I made some more significant changes to Custom HTML Head content within v21.08.2 which could have caused this but if you happen to be on v21.08 or v21.08.1 it'll be something unexpected.
Author
Owner

@Wookbert commented on GitHub (Sep 12, 2021):

I'm seeing this issue now on v21.08.2, which matches your explanation.

Would have to ask my partner if it appeared in earlier versions (don't think so though, as it broke just a few days ago, according to my observations).

@Wookbert commented on GitHub (Sep 12, 2021): I'm seeing this issue now on v21.08.2, which matches your explanation. Would have to ask my partner if it appeared in earlier versions (don't think so though, as it broke just a few days ago, according to my observations).
Author
Owner

@ssddanbrown commented on GitHub (Sep 12, 2021):

@Wookbert Thanks, That's all I need. Pretty sure it'd be a v21.08.2 change that's caused this but wanted to confirm just in case I was jumping to assumptions.

@ssddanbrown commented on GitHub (Sep 12, 2021): @Wookbert Thanks, That's all I need. Pretty sure it'd be a v21.08.2 change that's caused this but wanted to confirm just in case I was jumping to assumptions.
Author
Owner

@Wookbert commented on GitHub (Sep 12, 2021):

Just learned that we went from 21.05.4 straight to 21.08.2, and skipped the in-betweens.

@Wookbert commented on GitHub (Sep 12, 2021): Just learned that we went from 21.05.4 straight to 21.08.2, and skipped the in-betweens.
Author
Owner

@ssddanbrown commented on GitHub (Sep 12, 2021):

Just applied ef459ca4c4,
Will be part of the next patch release that should be released shortly.

Thanks again for raising @Wookbert.

@ssddanbrown commented on GitHub (Sep 12, 2021): Just applied ef459ca4c45bd2450ecd5d67a4d73c07f836ab25, Will be part of the next patch release that should be released shortly. Thanks again for raising @Wookbert.
Author
Owner

@Wookbert commented on GitHub (Sep 12, 2021):

Now that was quick. The icons are back. Thanks, mate!

image

@Wookbert commented on GitHub (Sep 12, 2021): Now that was quick. The icons are back. Thanks, mate! ![image](https://user-images.githubusercontent.com/3104762/132993938-aa9a1b7e-e888-4a7c-a96b-e8045061bc69.jpeg)
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#2386