Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

head > meta > content escaping issue

See original GitHub issue

Do you want to request a feature or report a bug?

I’m guessing it’s a bug.

What is the current behavior?

The following source code,

<meta property="og:image" content="https://onepixel.imgix.net/60366a63-1ac8-9626-1df8-9d8d5e5e2601_1000.jpg?auto=format&q=80&mark=watermark%2Fcenter-v5.png&markalign=center%2Cmiddle&h=500&w=500&s=60ec785603e5f71fe944f76b4dacef08" />

, is being escaped once server side rendered:

<meta property="og:image" content="https://onepixel.imgix.net/60366a63-1ac8-9626-1df8-9d8d5e5e2601_1000.jpg?auto=format&amp;q=80&amp;mark=watermark%2Fcenter-v5.png&amp;markalign=center%2Cmiddle&amp;h=500&amp;w=500&amp;s=60ec785603e5f71fe944f76b4dacef08"/>

You can reproduce the behavior like this:

const React = require("react");
const ReactDOMServer = require("react-dom/server");
const http = require("http");

const doc = React.createElement("html", {
  children: [
    React.createElement("head", {
      children: React.createElement("meta", {
        property: "og:image",
        content:
          "https://onepixel.imgix.net/60366a63-1ac8-9626-1df8-9d8d5e5e2601_1000.jpg?auto=format&q=80&mark=watermark%2Fcenter-v5.png&markalign=center%2Cmiddle&h=500&w=500&s=60ec785603e5f71fe944f76b4dacef08"
      })
    }),
    React.createElement("body", { children: "og:image" })
  ]
});

//create a server object:
http
  .createServer(function(req, res) {
    res.write("<!DOCTYPE html>" + ReactDOMServer.renderToStaticMarkup(doc)); //write a response to the client
    res.end(); //end the response
  })
  .listen(8080); //the server object listens on port 8080

editor: https://codesandbox.io/s/my299jk7qp output : https://my299jk7qp.sse.codesandbox.io/

What is the expected behavior?

I would expect the content not being escaped. It’s related to https://github.com/zeit/next.js/issues/2006#issuecomment-355917446. I’m using the og:image meta element so my pages can have nice previews within Facebook 😃.

capture d ecran 2018-10-12 a 14 15 26

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? 16.5.2

Issue Analytics

State:
Created 5 years ago
Reactions:34
Comments:25 (6 by maintainers)

Top GitHub Comments

10reactions

equinusociocommented, Aug 18, 2020

In meta tags escaped paths don’t work… otherwise, this bug would not have be opened.

5reactions

jbraithwaitecommented, Aug 17, 2020

This is not a bug in React. Using an entity reference for & (e.g. &) is the correct behavior for xhtml documents:

In both SGML and XML, the ampersand character (“&”) declares the beginning of an entity reference (e.g., ® for the registered trademark symbol “®”). Unfortunately, many HTML user agents have silently ignored incorrect usage of the ampersand character in HTML documents - treating ampersands that do not look like entity references as literal ampersands. XML-based user agents will not tolerate this incorrect usage, and any document that uses an ampersand incorrectly will not be “valid”, and consequently will not conform to this specification. In order to ensure that documents are compatible with historical HTML user agents and XML-based user agents, ampersands used in a document that are to be treated as literal characters must be expressed themselves as an entity reference (e.g. “&”). For example, when the href attribute of the a`` element refers to a CGI script that takes parameters, it must be expressed as http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user rather than as http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user.

In the HTML spec you do not need to use a character reference for & as long as what follows it is not a string that forms a named character reference.

The example they give is:

<a href="?bill&ted">Bill and Ted</a> <!-- &ted is ok, since it's not a named character reference -->
<a href="?art&amp;copy">Art and Copy</a> <!-- the & has to be escaped, since &copy is a named character reference -->

Personally, I feel like React made the right call with escaping & since that works in both XHTML and HTML5.

Top Results From Across the Web

Escaping Meta Tag Content? Help - support - HUGO

Hi there. I'm currently running into a frustrating issue that I can't seem to figure out =/ I've got a template that looks...

Meta tag code is breaking and showing in wordpress site's ...

The problem is: In some posts that code is breaking the meta tag code, ... of the post is showing up on the...

What's in the head? Metadata in HTML - MDN Web Docs

The <title> element is metadata that represents the title of the overall HTML document (not the document's content.) ...

4.2.5 The meta element — HTML5: Edition for Web Authors

If the http-equiv attribute is present but not in the Encoding declaration state: in a noscript element that is a child of a...

HTML meta tag - W3Schools

The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data. <meta> tags always go inside the <head> element, ......