无法使用 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')

• 0

• document.querySelectorAll("iframe")

• 0

JS 可以看到自定义元素：

• document.getElementsByTagName("FORCE-ALOHA-PAGE").length

• 1

但里面什么都没有：

• document.getElementsByTagName("FORCE-ALOHA-PAGE")[0].childNodes.length

• 0

即使上面的“节点转储”有效，这也没有：

• 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 {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; constructor() {&nbsp; &nbsp; &nbsp; &nbsp; super();&nbsp; &nbsp; &nbsp; &nbsp; this.attachShadow({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mode: 'open'&nbsp; &nbsp; &nbsp; &nbsp; }).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>';&nbsp; &nbsp; }}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>