Case Sensitive Custom Tags #41

mustafa519 · 2020-06-09T22:49:55Z

Hello,

Thank you for the amazing library. I was always looking for that kind of library. I think i have found it finally. But when i trying to create my own tags, i'm having a problem. I'm trying to sanitize non-html my custom React Components from Front-end. But i just couldn't able to make the library accept like <User id="5" /> fake DOM node. So, i need to create a tag as PascalCase to make compitable with my React nodes.

Is there any way to define case sensitive custom tags? By the way, It would be so nice to have a tricky solution instead of to wait the next release.

Example Code

class UserNode extends AbstractTagNode
{
  use IsChildlessTrait;

  public function getTagName(): string
  {
    return 'User';
  }
}

class UserNodeVisitor extends AbstractNodeVisitor implements NamedNodeVisitorInterface
{
  use IsChildlessTagVisitorTrait;

  protected function getDomNodeName(): string
  {
    return 'User';
  }

  public function getDefaultAllowedAttributes(): array
  {
    return ['type', 'width', 'height'];
  }

  public function getDefaultConfiguration(): array
  {
    return ['custom_config' => NULL];
  }

  protected function createNode(\DOMNode $domNode, Cursor $cursor): NodeInterface
  {
    return new UserNode($cursor->node);
  }
}

class CustomExtension implements ExtensionInterface
{
  public function getName(): string
  {
    return 'custom';
  }

  public function createNodeVisitors(array $config = []): array
  {
    return [
      'User' => new UserNodeVisitor($config['tags']['User'] ?? []),
    ];
  }
}

$fakeHtml = <<<HTML
<div>
asd
<p>hmm</p> // p
<User type="test" /> // User type="test"
<user type="test" /> // user type="test"
<test /> // test
## Hmmm
** Yeah? **
<br> <br /> // br
<hr> <hr /> // hr
</div>
HTML;

$builder = new \HtmlSanitizer\SanitizerBuilder();
$builder->registerExtension(new CustomExtension());
$sanitizer = $builder->build(['extensions' => ['custom']]);

$safeHtml = $sanitizer->sanitize($fakeHtml);

echo trim($safeHtml);

Thanks,
Mustafa.

The text was updated successfully, but these errors were encountered:

tgalopin · 2020-06-10T11:26:12Z

That's a very interesting use-case, I didn't think about it. Is the problem specifically related to having an uppercase first letter? Does it work as expected if you put your tag name in lowercase (on the html-sanitize side of course, it wouldn't work with React)?

mustafa519 · 2020-06-10T13:56:51Z

React lets us to create our custom virtual DOM components that contains also Native HTML elements. Actually it's all about separate between Native HTML and JSX of React rules.

Here is a simple example:

const MyCustomComponent = (props) => (
  <strong>
    {props.giveMeAWord}
  </strong>
);

// Output Component:

export default () => (
  <h1>
    Hello <MyCustomComponent giveMeAWord="world" />!
    <p>Also we could able to use native html content in JSX</p>
  </h1>
);

As above example, you can see that Native HTML and my custom MyCustomComponent had to be separate between them as case sensivity.

I have a content parser. It's going to parse raw semi HTML text and to replace raw MyCustomComponent to React's Virtual MyCustomComponent.

Yes, i can use lowercase tags like <image /> instead of <Image />. But surely i will have trouble or many compatibility problems about converting names in frontend side. Because, in JSX logic, it uses lowercase names for Native HTML, and PascalCase Custom Created Components, and camelCase for all attributes.

It's kind of complicated. There are many linter rules, JSX rules about case sensitivity. So it's really would be nice that able to use Custom Tag Names, custom attributes.

Also the library would be, completely compatible for almost all use cases after that support. Already we just defining our custom logic in our classes. No security conflict for other use cases.

tgalopin · 2020-06-10T13:58:27Z

I'm comfortable with React and JSX, no worry about that :) . My question was more whether the issue in solely related to case sensitivity or not.

I'll have a look :) .

mustafa519 · 2020-06-10T14:17:39Z

Thank you! I'm looking forward.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Case Sensitive Custom Tags #41

Case Sensitive Custom Tags #41

mustafa519 commented Jun 9, 2020

tgalopin commented Jun 10, 2020

mustafa519 commented Jun 10, 2020

tgalopin commented Jun 10, 2020 •

edited

Loading

mustafa519 commented Jun 10, 2020

Case Sensitive Custom Tags #41

Case Sensitive Custom Tags #41

Comments

mustafa519 commented Jun 9, 2020

Example Code

tgalopin commented Jun 10, 2020

mustafa519 commented Jun 10, 2020

Here is a simple example:

tgalopin commented Jun 10, 2020 • edited Loading

mustafa519 commented Jun 10, 2020

tgalopin commented Jun 10, 2020 •

edited

Loading