Case Sensitive Custom Tags

mustafa519 commented 4 years ago

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.

tgalopin commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Thank you! I'm looking forward.

tgalopin / html-sanitizer

Case Sensitive Custom Tags #41

Example Code

Here is a simple example: