Problem/Motivation

Web components are becoming more popular
Web components allow you to create custom HTML elements
Custom elements and attributes are not able to be whitelisted
For structured content you can output the custom element in a twig template
However for some components it would be great to use the built-in Drupal rewrite functionality to map multiple items to a specific custom element
The rewrite functionality runs through the filterAdminXss which doesn't provide a way to pass allowlisted attributes
I've not found the cleanest way to implement this, but as components become more widely used this will need a more accessible way to safely allow web components to be used in rewrites and other places on a Drupal site

See attached views config for view with rewrite.
Here is the html that is output by the view:

<div class="view-content">
    <div class="views-row"><div class="views-field views-field-title">
        <span class="field-content">test basic page </span>
    </div></div>
</div>

Here is the expected output:

<div class="view-content">
    <div class="views-row"><div class="views-field views-field-title">
        <span class="field-content"><nic-component>test basic page </nic-component></span>
    </div></div>
</div>

Steps to reproduce

See attached view config.

  • Fresh install
  • Add basic page to site
  • Create new view
  • Create page display of content
  • Unformatted list of fields
  • Edit title field
  • Override output of this field with custom text
  • Enter: {{ title__value }}
  • Apply
  • Save

Proposed resolution

Provide a way to allowlist views rewrite custom html elements.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#7 views.view_.test.yml5.09 KBnicxvan

Comments

nicxvan created an issue. See original summary.

nicxvan’s picture

I'm looking for input on how this can be solved long term, there are security considerations.

Additional questions are around how you'd embed a custom element in a CKEditor field as a source.
Adding it to the list of available html still strips the element out as well

This works in CKEditor 5

nicxvan’s picture

Title: Create a way to allow custom HTML elements in rewrite rules for Views » Create a secure way to allow custom HTML elements and attributes in rewrite rules for Views

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

nicxvan’s picture

After retesting with ckeditor 5, if you allow list the custom element then you can add it to the ckeditor source and it is no longer stripped out.

This remains an issue with views rewrites.

wim leers’s picture

Status: Active » Postponed (maintainer needs more info)
Issue tags: +Needs steps to reproduce

After retesting with ckeditor 5, if you allow list the custom element then you can add it to the ckeditor source and it is no longer stripped out.

🥳

This remains an issue with views rewrites.

Could you please share a config export of a minimal view that triggers this problem? 🙏 (It doesn't need to load the actual web component — for the purpose of this issue/bug report AFAICT it's sufficient to observe <nic-webcomponent> to be present in the views rewrite but absent in the user-facing output).

nicxvan’s picture

Issue summary: View changes
Status: Postponed (maintainer needs more info) » Active
Issue tags: -Needs steps to reproduce
StatusFileSize
new5.09 KB

I've added steps to reproduce, and example of the view and actual output vs expected output to the issue summary.

Let me know if there is anything else to look at next.

wim leers’s picture

Assigned: Unassigned » wim leers

Thanks, will try to reproduce next week to narrow down 👍

wim leers’s picture

Assigned: wim leers » Unassigned

1 month later, didn't happen. And just got reassigned to a new project, so … definitely won't have time. 😬 Sorry.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.