head > meta > content escaping issue #13838
Description
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&q=80&mark=watermark%2Fcenter-v5.png&markalign=center%2Cmiddle&h=500&w=500&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 8080editor: 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 vercel/next.js#2006 (comment).
I'm using the og:image meta element so my pages can have nice previews within Facebook :).
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
16.5.2