Gatsby: Bad rendering in iframe through gatsby-source-wordpress

[jerolan]

Description

I'm trying to render an iframe in a blog post via gatsby-source-wordpress, but the iframe source is not rendered as expected

in console.log
<span style="vertical-align: inherit;">&lt;iframe width = &#8220;560&#8221; height = &#8220;315&#8221; src = &#8220;https://www.youtube.com/embed/FMR5STC4STA&#8221; frameborder = &#8220;0&#8221; allow = &#8220;autoplay; encrypted-media&#8221; allowfullscreen&gt; &lt;/ iframe&gt;</span>

in component (using div with dangerouslySetInnerHTML)
Plain String
"<iframe width = “560” height = “315” src = “https://www.youtube.com/embed/FMR5STC4STA” frameborder = “0” allow = “autoplay; encrypted-media” allowfullscreen> </ iframe>"

Steps to reproduce

Have a wordpress blog post and render this.props.data.wordpressPost.content through

<div
  className='content'
  dangerouslySetInnerHTML={{ __html: post.content }}
/>

Expected result

Render the iframe like all other content elements

Actual result

All elements are rendered except the iframe

Environment

"gatsby": "^1.9.45",
"gatsby-source-wordpress": "^2.0.0",

File contents (if changed)

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `...`,
    subtitle: `...`
  },
  plugins: [
    // https://public-api.wordpress.com/wp/v2/sites/gatsbyjsexamplewordpress.wordpress.com/pages/
    /*
     * Gatsby's data processing layer begins with “source”
     * plugins. Here the site sources its data from Wordpress.
     */
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        /*
        * The base URL of the Wordpress site without the trailingslash and the protocol. This is required.
        * Example : 'gatsbyjswpexample.wordpress.com' or 'www.example-site.com'
        */
        baseUrl: `...`,
        // The protocol. This can be http or https.
        protocol: `http`,
        // Indicates whether the site is hosted on wordpress.com.
        // If false, then the asumption is made that the site is self hosted.
        // If true, then the plugin will source its content on wordpress.com using the JSON REST API V2.
        // If your site is hosted on wordpress.org, then set this to false.
        hostingWPCOM: false,
        // If useACF is true, then the source plugin will try to import the Wordpress ACF Plugin contents.
        // This feature is untested for sites hosted on Wordpress.com
        useACF: true,
        auth: {
          // If auth.user and auth.pass are filled, then the source plugin will be allowed
          // to access endpoints that are protected with .htaccess.
          htaccess_user: '...',
          htaccess_pass: '...',
          htaccess_sendImmediately: false
        },
        // Set verboseOutput to true to display a verbose output on `npm run develop` or `npm run build`
        // It can help you debug specific API Endpoints problems
        verboseOutput: true
      }
    },
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-jsx`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`
  ]
}

[KyleAMathews]

It might actually be you can't use dangerouslySetInnerHTML & iframes together...

https://stackoverflow.com/questions/35028591/react-dangerouslysetinnerhtml-to-render-an-iframe-youtube-embed-from-props

[KyleAMathews]

Can't seem to find better verification for this from quick googling though.

[jerolan]

i found that this might be related

https://www.npmjs.com/package/gatsby-remark-responsive-iframe/v/1.4.6
https://stackoverflow.com/questions/49760573/show-embed-url-iframe-as-a-string-on-page

[jerolan]

I solved my problem by doing this

<div
  className='content'
  dangerouslySetInnerHTML={{
    __html: post.content
      .replace(/&lt;/g, '<')
      .replace(/&gt;/g, '>')
      .replace(/&#8221;/g, '"')
      .replace(/&#8220;/g, '"')
      .replace(' </ iframe', '</iframe')
  }}
 />

[KyleAMathews]

Ah! Good ol html escaping :-)