Handling Drupal core's oEmbed warning

If you manage a modern Drupal site with the Media module enabled, then you're probably not a stranger to the "potentially insecure to display oEmbed content" warning that greets you whenever you visit your site's Status Report.

In this article, I'll tell you what this means, and what you can do to update your site to remove this warning. 

What does it mean?

When you enable the Drupal core Media module, one of the media types that is automatically created is Remote Video. This media type allows you to add a link to a YouTube or Vimeo video which then is embedded on your site - super duper!

This is accomplished via an HTML iframe - normally something like this:

<iframe src="https://drupaleasy.com/media/oembed?url=https%3A//youtu.be/EYiI0QhDqPg&amp;max_width=0&amp;max_height=0&amp;hash=ykZPEBJjHVy-lIEmdlods4FTRZRt3mZuYOzawp_Ti6g" width="200" height="113" class="media-oembed-content" loading="lazy" title="Inline Entity Form basics in under 4 minutes"></iframe>

Note that the URL to the video is passed as an argument to the https://drupaleasy.com/media/oembed path - this means that any content loaded in the iframe has access to cookies from the drupaleasy.com domain.

To keep this from happening (and to further bolster security from XSS and other attacks,) it is recommended to set up a different domain (or subdomain) from which to serve the iframe; in other words:

<iframe src="https://SOME-OTHER-SUBDOMAIN.drupaleasy.com/media/oembed?url=https%3A//youtu.be/EYiI0QhDqPg&amp;max_width=0&amp;max_height=0&amp;hash=ykZPEBJjHVy-lIEmdlods4FTRZRt3mZuYOzawp_Ti6g" width="200" height="113" class="media-oembed-content" loading="lazy" title="Inline Entity Form basics in under 4 minutes"></iframe>

Step 1 - set up a new subdomain with your host

I normally begin by setting up a new subdomain with the hosting provider. This new subdomain points to the same place as the main domain. For example, I set up oembed.drupaleasy.com to point to drupaleasy.com.

Step 2 - add the new subdomain to your DNS records

From wherever your DNS settings are managed (Cloudflare, GoDaddy, etc…,) add the necessary records to your main domain's DNS settings. Normally, your hosting provider will tell you exactly what you need to add to your DNS settings. I use Pantheon hosting and this information is readily available on my live site's "Domains" area. 

Step 3 - modify response headers to allow the new subdomain

While there's (at least) a couple of ways to do this, the easiest is perhaps with a modification to your site's main settings.php file. For example:

// Modify content security policy for oembed.drupaleasy.com
if (isset($_SERVER['HTTP_HOST']) && $_SERVER['HTTP_HOST'] === 'oembed.drupaleasy.com') {
    header("Content-Security-Policy: frame-ancestors https://www.drupaleasy.com;");
}

This allows embedded content from oembed.drupaleasy.com to be displayed on www.drupaleasy.com pages. 

This type of change can also be made in your site's .htaccess file (assuming your web server uses this file) using the mod_headers Apache module.

Step 4 - configure Media module to use the new subdomain

The final, and easiest, step is to let Media module know about your new subdomain via the Configuration | Media | Media settings page (/admin/config/media/media-settings.)

Conclusion

Once complete, the potential security threat will be neutralized and your Status Report will have one less warning 😃.

Fundamental topics like this are an important part of a modern Drupal site's day-to-day maintenance tasks. In our 12-week, 2x/week Drupal Career Online program, we cover this and many other helpful site maintenance tasks.