Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drop runtime validation and lower case coercion of tag names #8563

Merged
merged 3 commits into from
Dec 13, 2016

Conversation

sebmarkbage
Copy link
Collaborator

@sebmarkbage sebmarkbage commented Dec 13, 2016

In #2756 we ended up using toLowerCase to allow case insensitive HTML tags. However, this requires extra processing every time we access the tag or at least we need to process it for mount and store it in an extra field which wastes memory.

So instead, we can just enforce case sensitivity for HTML since this might matter for the XML namespaces like SVG anyway.

We introduced runtime validation of tag names because we used to generate HTML that was supposed to be inserted into a HTML string which could've been an XSS attack.

However, these days we use document.createElement(tagName) in most cases. That already does its internal validation in the browser which throws. We're now double validating it. Stack still has a path where innerHTML is used and with this change we still apply validation there. However in Fiber we can remove it completely since we only use document.createElement(tagName) and never generate HTML.

Copy link
Collaborator

@gaearon gaearon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Accepting with nits:

  • Hyphens
  • Operation order
  • We can probably kill those hacks in ReactDOMFiber now?

warning(
isCustomComponent(type, props) ||
type === type.toLowerCase(),
'<%s /> is using upper-case HTML. Always use lower-case HTML tags ' +
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: I think it's just "uppercase" and "lowercase", no hyphen.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1

if (__DEV__) {
warning(
isCustomComponent(type, props) ||
type === type.toLowerCase(),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's put case match check first? I expect it's going to be true more often.

warning(
isCustomComponent(this._tag, props) ||
this._tag === this._currentElement.type,
'<%s /> is using upper-case HTML. Always use lower-case HTML tags ' +
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above regarding check order and hyphens.

@sebmarkbage
Copy link
Collaborator Author

cc @ealf (I know you're not working atm but just pinging for a sanity check later if you want to.)

@@ -408,7 +408,7 @@ const ARTRenderer = ReactFiberReconciler({
// Noop
},

commitUpdate(instance, oldProps, newProps) {
commitUpdate(instance, type, oldProps, newProps) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @bvaughn For ART changes.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! This also eliminates the need for ReactNativeFiber renderer to bundle along the viewConfig with each instance as well.

@sebmarkbage
Copy link
Collaborator Author

Addressed comments.

In facebook#2756 we ended up using toLowerCase to allow case insensitive HTML tags.
However, this requires extra processing every time we access the tag or
at least we need to process it for mount and store it in an extra field
which wastes memory.

So instead, we can just enforce case sensitivity for HTML since this might
matter for the XML namespaces like SVG anyway.
We introduced runtime validation of tag names because we used to generate
HTML that was supposed to be inserted into a HTML string which could've
been an XSS attack.

However, these days we use document.createElement in most cases. That
already does its internal validation in the browser which throws. We're now
double validating it. Stack still has a path where innerHTML is used and
we still need it there. However in Fiber we can remove it completely.
Instead of reading it from the DOM node.
@sebmarkbage sebmarkbage merged commit bd42583 into facebook:master Dec 13, 2016
@gaearon
Copy link
Collaborator

gaearon commented Dec 13, 2016

Should tag this as 15-next and minor? We'll want the new warning in open source I think.

@sebmarkbage
Copy link
Collaborator Author

sure

@gaearon gaearon added this to the 15-next milestone Dec 13, 2016
bvaughn pushed a commit to bvaughn/react that referenced this pull request Dec 14, 2016
Also removed the no-longer-necessary viewConfig from the NativeHostComponent. This config can be retrieved when necessary from commitUpdate() thanks to the newly-added type param
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants