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(proxy): protect the program when getElementById throws an exception error #693

Merged

Conversation

AzronChan
Copy link
Contributor

  • 提交符合commit规范
  • npm run test通过
详细描述

#547想法一致,在子应用中document.getElementById会被代理成querySelector,而querySelector并不支持特殊字符的传递,比如当使用document.getElementById('aa/1'),会报错
image

正常情况下document.getElementById 应该支持特殊字符,并且找不到的时候返回null,并不期望会报错;因此需要对document.getElementById代理做兼容异常处理

@yiludege
Copy link
Collaborator

感谢贡献!

@yiludege yiludege merged commit 37dc95b into Tencent:master Sep 19, 2023
@AzronChan
Copy link
Contributor Author

AzronChan commented Dec 14, 2023

@yiludege 其实document.getElementById是不是不用代理成shadowRoot.querySelector也可以,而改成代理到shadowRoot.getElementById,这样可以避免querySelector特殊字符的限制;https://github.com/Tencent/wujie/blob/2f27479dcff04021b8c07c33857c7a46054a1c9b/packages/wujie-core/src/proxy.ts#L142C33-L142C33

getElementById的对象可以不是document

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>custom elements演示</h1>
    <example-component></example-component>
    <script>
      window.customElements.define(
        "example-component",
        class extends HTMLElement {
          constructor() {
            super();
            const mountPoint = document.createElement("div");
            this.attachShadow({ mode: "open" });
            mountPoint.innerHTML = `<h3>hello custom elements|<a id="aa" href="">aa</a></h3>`;
            this.shadowRoot?.appendChild(mountPoint);
          }
        }
      );

      document.querySelector('example-component').shadowRoot.getElementById('aa');  //<a id="aa" href="">aa</a>
    </script>
  </body>
</html>

demo会正常打印出#aa dom

@yiludege
Copy link
Collaborator

demo会正常打印出#aa dom

代理的目的就是为了在子应用内部 iframe的document.getElementById转发到 document.querySelector('example-component').shadowRoot.getElementById

@AzronChan
Copy link
Contributor Author

AzronChan commented Dec 14, 2023

demo会正常打印出#aa dom

代理的目的就是为了在子应用内部 iframe的document.getElementById转发到 document.querySelector('example-component').shadowRoot.getElementById

@yiludege 感谢回答,目的确实是为了这样。是我表达错误了,我修改了下问题为:document.getElementById是不是不用代理成shadowRoot.querySelector也可以,而改成代理到shadowRoot.getElementById,这样可以避免querySelector特殊字符的限制

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.

2 participants