Bug: README Text is 'BEING INJECTED' into page content!

On My first working animation page some text is …er… leaking out of the README area, and appearing in the background of the page:

Looking at the page source html … the problem seems to be:

  • the meta tag property=“og:description” content seems to contain the entire README file
  • and secondly, that content is not being escaped, so that we are seeing ‘HTML/Code-injection’ into the page

(I’ve inserted the problem code in this field below … but it may well not be inserted correctly in this discussion system.)

Good luck fixing this, and thanks for all you do!

MrWatson


meta property=“og:description” content="So, I’ve given up on making a word-cloud, but I have managed to make it rain words!Lots of things have come together all at once to make this work:ES6 ModulesI’ve at last cracked ES6 Modules (which had been baffling me a bit in VizHub)IMPORTANT!When importing modules don’t forget the ./ in the import module name!import { select } from ‘d3’;
import { appendRandomWord } from ‘./random’; // './
’ !
import { color } from ‘./color’
import { words } from ‘./data’;Data 'munging’Using map to add a (random) ‘fill’ property to the dataColor ScaleUsing…scaleSequentialwith an (unnecessarily explicit) domain of [0,1]which is great for random colors(Math.random delivers numbers in the range [0,1])interpolateRainbowwhich is a range of colors across the rainbowa custom color function to pass the value to the scale to convert it to a colorand choosing the necessary property.attr(‘fill’, d => color(d.fill) )AnimationAt last!Using….enter() - to add text objects.transition() - to animate the movement.duration() - to control the setTimeout - (recursive) to dynamically add data to the arraybetter:setInterval - to repeatedly add data to the array without recursioneven better:setInterval + setTimeout with clearInterval - to play an animation for a fixed durationthe best yet:a custom function to animate at a given rate for a given time:function playAnimation (animationFunc,rateMS,durationMS)svg text elementsanimating, appending text elements and defining their content svg.selectAll(‘text’)
.data(…)

.enter()
.append(“text”)
:
.text(d => d.text)anchoring text centrally using the svg-attributes .attr(‘text-anchor’,‘middle’)
.attr(‘dominant-baseline’,‘middle’)Parameterisationvariables for many aspects of the a location function to decide where the words are going to landNext steps:Rework the whole chart as a functionDON’TsIt’s been a real steep curve learning what you don’t need from the (sometimes very old or mediorchre) examples you find (out there … not the ones from [Curran]).You don’t need to wrap the .transition()-code in a .call(…)!So, NOT this:.call(e => e.transition() … );You don’t need to pass a duration parameter to the .transition() functionSo, NOT this:.call(e => e.transition(t)" />

OK … I’ve looked more closely at the README.

At some point it contains some code containing a greater-than sign

    .text(d =>  d.text)

The greater than sign is causing the meta data tag to be closed, so that all the remaining text AFTER it is confusing the browser and thus being output in the body area.

Thus the injected text starts with ‘d.text’ …

image

Done some testing.

I wanted to create a simple page to help you locate the problem more easily, so I forked and simplified the problem page.

In the resulting page the meta data tag has been retained.

Lol … have you fixed it for the mo? I see all twitter tags have disappeared and alleviated the problem.

So, I’ve made the “BUG” page private, so that it does not appear on the start page. :smiley:

lol thanks for the thorough debugging here, and for the reproduction case!

I think the solution is to sanitize the markdown more heavily, or rather the generated HTML, before rendering it to the page.

Will report back here when this is fixed. Thanks again!

Hi,

I’m getting the background text again, but this time only when I use the browsers BACK button.

  1. Go to my blog page.
  2. Click a link
  3. Go back

I get this:

  • Refreshing the page does NOT clear it.
  • Opening a new window (via the VizHub home button) and going to the page again clears it.

Hi,

I don’t think the problem is the rendering of the markdown to the page.

The problem has got something to do with the twitter description (or rather “og:description”) meta tag, and which text is used for that tag.

Some meta tags seem to be being added to the body rather than the head:

…which is then (after a ‘>’) leaking into the body text:

Yes exactly, the server-side code that injects the description into the meta tag is where the sanitization needs to happen. I thought the output would be clean, but more work to do. Hope to fix this soon!

I’m working on a fix and am searching for the page that reproduces this. I’m not able to find one yet. Could you please share it? Thanks!

By the way, if it’s private I can’t see it, so feel free to make it public.

I’ve implemented what I think is a fix, but not sure since I’m having trouble reproducing it.

This is solved now. Used https://www.npmjs.com/package/sanitize-html to do it.