Pass raw html to #markup

Question

I have some html content, it comes from a external library so i can not change it, it has many <span> and <div> tags with attributes like: <span style="color: #0000ff;">, but when i use:

$render = array(
  '#markup' => $myhtmlcontent,
);

In a render array, Drupal strips the attributes, and it keeps just <span> without the styles.

So, how can I avoid Drupal changes what I pass as markup, which doesn't need any filter because the library makes it safe, or at last make it allow styles?

Answer 1

Use inline template:

  return [
    '#type' => 'inline_template',
    '#template' => '{{ somecontent }}',
    '#context' => [
      'somecontent' => $somecontent
    ]
  ];

In your case without context, just straight up html.

You can also use the html_tag element for things like script or link and so on.

Answer 2

In a render array, simply do this:

return [
  '#children' => $html,
];

EDIT: Alternatively use the method described by @nvahalik in the other answer, in combination with '#markup'. I think this is closer to the intended usage of the render API.

use Drupal\Core\Render\Markup;

[..]
return [
  '#markup' => Markup::create($html),
];

E.g. if the $html was produced with PHP's highlight_string(), it will contain style attributes which would be removed with #markup. But #children preserves them.

How to test this?

Go to devel/php (with devel module installed).

$elements = [
 ['#markup' => '<div style="font-weight: bold;">markup onionpowder</div>' . "\n"],
 ['#children' => '<div style="font-weight: bold;">children onionpowder</div>' . "\n"],
 ['#markup' => \Drupal\Core\Render\Markup::create('<div style="font-weight: bold;">safe markup onionpowder</div>' . "\n")],
];

var_export(drupal_render($elements)->__toString());

I personally get this output:

"""
'<div>markup onionpowder</div>\n
<div style="font-weight: bold;">children onionpowder</div>\n
<div style="font-weight: bold;">safe markup onionpowder</div>\n
'
"""

(The "onionpowder" allows to set conditional break points in the render functions)

But perhaps it depends on the Drupal version?

Also it can happen that this will be (perhaps unintentionally) processed again in a different point in the pipeline.

Technical notes

See https://git.drupalcode.org/project/drupal/blob/8.8.x/core/lib/Drupal/Core/Render/Renderer.php#L184

The '#markup' is filtered in ->ensureMarkupIsSafe(), which is called from within ->doRender(). The same does not apply to '#children' in the version of Drupal I was using (It's a local test site, cannot update atm).

Answer 3

As documented in Render API overview, in Drupal 8 a #markup value is passed through \Drupal\Component\Utility\Xss::filterAdmin(), which strips known XSS vectors while allowing a permissive list of HTML tags that are not XSS vectors. You can use #allowed_tags to set the list of allowed tags, but that would not stop Drupal from stripping attributes (for example, the style attribute).

$output['audio_controller'] = array(
  '#markup' => '<audio src="//www.example.com/resources/sample.mp3" controls><p>Your browser does not support HTML5 audio tags.</p></audio>',
  '#allowed_tags' => ['audio'],
);

Since in your case you are passing complex HTML markup, you should use #type or #theme. In this case, #type seems a better solution.

You could also implement a new type, with a render element plugin, but if that is the only case where you need it, then implementing a render element plugin is probably excessive.

Answer 4

If you want to add plain Markup to render arrays, you can create it using \Drupal\Core\Render\Markup. This will allow you to put raw HTML into something. For instance, here's how it's used in the Permission Report module to put HTML into tables:

$rows[] = [
  [
    'data' => $this->l($meta['title'], new Url('permission_report.permission', ['user_permission' => $perm], $options)),
  ],
  ['data' => $users_having_role],
  ['data' => Markup::create(implode(', ', $display_roles))],
];