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

fix: skip flattening spread object with __proto__ #14759

Merged
merged 5 commits into from Jul 18, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
30 changes: 27 additions & 3 deletions packages/babel-plugin-transform-react-jsx/src/create-plugin.ts
Expand Up @@ -39,6 +39,15 @@ const get = (pass: PluginPass, name: string) =>
const set = (pass: PluginPass, name: string, v: any) =>
pass.set(`@babel/plugin-react-jsx/${name}`, v);

function hasProto(node: t.ObjectExpression) {
return node.properties.some(
value =>
t.isObjectProperty(value, { computed: false, shorthand: false }) &&
(t.isIdentifier(value.key, { name: "__proto__" }) ||
t.isStringLiteral(value.key, { value: "__proto__" })),
);
}

export interface Options {
filter?: (node: t.Node, pass: PluginPass) => boolean;
importSource?: string;
Expand Down Expand Up @@ -422,7 +431,7 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
if (t.isJSXSpreadAttribute(attribute.node)) {
const arg = attribute.node.argument;
// Collect properties into props array if spreading object expression
if (t.isObjectExpression(arg)) {
if (t.isObjectExpression(arg) && !hasProto(arg)) {
nicolo-ribaudo marked this conversation as resolved.
Show resolved Hide resolved
array.push(...arg.properties);
} else {
array.push(t.spreadElement(arg));
Expand Down Expand Up @@ -718,7 +727,17 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
}

if (objs.length === 1) {
return objs[0];
if (
!(
t.isSpreadElement(props[0]) &&
// If an object expression is spread element's argument
// it is very likely to contain __proto__ and we should stop
// optimizing spread element
t.isObjectExpression(props[0].argument)
Copy link
Contributor Author

@JLHwung JLHwung Jul 15, 2022

Choose a reason for hiding this comment

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

The check here is necessary if we have pattern {...{ __proto__: null }}, but it is not sufficient: {...{...{ foo }}}, after optimized into {...{ foo }} by accumulateAttribute, won't further pass the check here. I think this is fine as practically such pattern is rare.

)
) {
return objs[0];
}
}

// looks like we have multiple objects
Expand Down Expand Up @@ -755,7 +774,12 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
accumulateAttribute(props, attr);
}

return props.length === 1 && t.isSpreadElement(props[0])
return props.length === 1 &&
t.isSpreadElement(props[0]) &&
// If an object expression is spread element's argument
// it is very likely to contain __proto__ and we should stop
// optimizing spread element
!t.isObjectExpression(props[0].argument)
? props[0].argument
: props.length > 0
? t.objectExpression(props)
Expand Down
Expand Up @@ -2,6 +2,10 @@

<div {...props}>{contents}</div>;

<img alt="" {...{src, title}} />;
<img alt="" {...{src, title, __proto__}} />;

<blockquote {...{cite}}>{items}</blockquote>;

<pre {...{["__proto__"]: null }}></pre>;

<code {...{[__proto__]: null }}></code>;
Expand Up @@ -14,11 +14,22 @@ _jsx("div", { ...props,
_jsx("img", {
alt: "",
src,
title
title,
__proto__
});

/*#__PURE__*/
_jsx("blockquote", {
cite,
children: items
});

/*#__PURE__*/
_jsx("pre", {
["__proto__"]: null
});

/*#__PURE__*/
_jsx("code", {
[__proto__]: null
});
@@ -0,0 +1,3 @@
<p {...{__proto__: null}}>text</p>;

<div {...{"__proto__": null}}>{contents}</div>;
@@ -0,0 +1,15 @@
import { jsx as _jsx } from "react/jsx-runtime";

/*#__PURE__*/
_jsx("p", { ...{
__proto__: null
},
children: "text"
});

/*#__PURE__*/
_jsx("div", { ...{
"__proto__": null
},
children: contents
});
Expand Up @@ -2,6 +2,10 @@

<div {...props}>{contents}</div>;

<img alt="" {...{src, title}} />;
<img alt="" {...{src, title, __proto__}} />;

<blockquote {...{cite}}>{items}</blockquote>;

<pre {...{["__proto__"]: null }}></pre>;

<code {...{[__proto__]: null }}></code>;
Expand Up @@ -8,10 +8,21 @@ React.createElement("div", props, contents);
React.createElement("img", {
alt: "",
src,
title
title,
__proto__
});

/*#__PURE__*/
React.createElement("blockquote", {
cite
}, items);

/*#__PURE__*/
React.createElement("pre", {
["__proto__"]: null
});

/*#__PURE__*/
React.createElement("code", {
[__proto__]: null
});
@@ -0,0 +1,3 @@
<p {...{__proto__: null}}>text</p>;

<div {...{"__proto__": null}}>{contents}</div>;
@@ -0,0 +1,3 @@
{
"BABEL_8_BREAKING": false
}
@@ -0,0 +1,9 @@
/*#__PURE__*/
React.createElement("p", babelHelpers.extends({
__proto__: null
}), "text");

/*#__PURE__*/
React.createElement("div", babelHelpers.extends({
"__proto__": null
}), contents);
@@ -0,0 +1,3 @@
<p {...{__proto__: null}}>text</p>;

<div {...{"__proto__": null}}>{contents}</div>;
@@ -0,0 +1,3 @@
{
"BABEL_8_BREAKING": true
}
@@ -0,0 +1,11 @@
/*#__PURE__*/
React.createElement("p", { ...{
__proto__: null
}
}, "text");

/*#__PURE__*/
React.createElement("div", { ...{
"__proto__": null
}
}, contents);
@@ -0,0 +1 @@
<p __proto__={null} class="bar">text</p>;
Copy link
Contributor Author

@JLHwung JLHwung Jul 15, 2022

Choose a reason for hiding this comment

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

Both TS and Babel interpret __proto__ in JSXAttributeKey as the special __proto__ accessor, though JSX spec does not specify such behaviour.

This PR does not change such behaviour, I added a new test case.

@@ -0,0 +1,5 @@
/*#__PURE__*/
React.createElement("p", {
__proto__: null,
class: "bar"
}, "text");