无法使用 JavaScript 访问自定义 HTML 标签内的 DOM 元素

Question

我有几个带有很长下拉列表的后端 Salesforce (SF) 页面（例如多达 1,000 个选项），我想在 Chrome 书签中使用 JS 代码将过滤器框添加到页面上的任意 SELECT（代码如下）。我认为，问题在于我想要访问的节点位于名为force-aloha-page.就我而言，我要访问的第一个元素是自定义元素内的 IFRAME。（这不是跨站点安全问题，因为即使来源不好，JS 仍会获得 IFRAME，只是其中没有任何内容。）例如，我可以检查代码并查看自定义 HTML 元素，查看 iframe，并且可以查看页面上 iframe 的内容。如果我只是将节点转储到控制台，它会显示 JS 无法访问的 DOM 元素：document.getElementsByTagName("FORCE-ALOHA-PAGE")[0]<force-aloha-page data-data-rendering-service-uid="203" data-aura-rendered-by="505:0" force-alohapage_alohapage-host><div force-alohapage_alohapage class="iframe-parent slds-template_iframe slds-card"><iframe force-alohapage_alohapage height="100%" width="100%" scrolling="yes" allowtransparency="true" name="vfFrameId_1569557364522" title="Page Configuration" allowfullscreen="true" lang="en-US" allow="geolocation *; microphone *; camera *">…</iframe></div></force-aloha-page>我可以看到元素div的iframe内部和内部force-aloha-page。但是，如果我尝试访问 iframe，就会发生这种情况：document.getElementsByTagName('IFRAME')0document.querySelectorAll("iframe")0JS 可以看到自定义元素：document.getElementsByTagName("FORCE-ALOHA-PAGE").length1但里面什么都没有：document.getElementsByTagName("FORCE-ALOHA-PAGE")[0].childNodes.length0即使上面的“节点转储”有效，这也没有：document.getElementsByTagName("FORCE-ALOHA-PAGE")[0].innerHTML""进入 iframe 后，我可能会遇到其他问题，但我必须先通过该自定义标记。我试过的我在 Chrome 中创建了 JS 书签，它可以在主页和 IFRAME 中的 SELECT 上使用，并具有良好的 XSS。但不适用于自定义标签内的 SELECT。这是我在编写书签代码时使用的测试页。

Answer 1

该force-aloha-page元素可能是一个Web 组件，这可以解释为什么您无法访问内部的 DOM，因为它是一个Shadow DOM。

尝试使用该shadowRoot属性访问它，如下所示：

class ForceAlohaPage extends HTMLElement {

    

    constructor() {

        super();

        this.attachShadow({

            mode: 'open'

        }).innerHTML = '<iframe force-alohapage_alohapage height="100%" width="100%" scrolling="yes" allowtransparency="true" name="vfFrameId_1569557364522" title="Page Configuration" allowfullscreen="true" allow="geolocation *; microphone *; camera *"></iframe>';

    }

}

customElements.define("force-aloha-page", ForceAlohaPage);

console.log(document.getElementsByTagName('iframe').length);

console.log(document.getElementsByTagName("force-aloha-page")[0].childNodes.length);

console.log(document.getElementsByTagName("force-aloha-page")[0].innerHTML);

console.log(document.getElementsByTagName('force-aloha-page')[0].shadowRoot.childNodes[0]);

<force-aloha-page></force-aloha-page>