Adding href and id property leads to framing error

Question

After fetching a list of images, I want to show them on a grid; it works after patching frames, but it keeps spiting out the following error: TypeError: win[(("HTML" + (intermediate value)) + "Element")] is undefined

Relevant code:

const grid = document.querySelector('#img-grid')
var results = [
    {score: 7, favs: 4, id: 1234, preview: 'example.com/image.png'}
    // etc...
]
function showPosts() {
    grid.replaceChildren()
    results.map((post, i) => {
        const article = document.createElement('article')
        const a       = document.createElement('a')
        const div     = document.createElement('div')
        const img     = document.createElement('img')
        
        article.classList.add(['img-res'])
        // `viewing-page` is just a div that holds a bigger image
        a.href = '#viewing-page' //! This line leads to the error
        a.onclick = view
        a.id = i
        img.src = post['preview']
        div.innerText = getSortVal(post) // `getSortVal` return either `.score`, `.favs`, or `.id`, based on a `select` sorting option
        
        a.appendChild(img)
        article.appendChild(a)
        article.appendChild(div)
        grid.appendChild(article) // Traceback points to this line on my code
    })
}

The href is just for the page to scroll down from the gallery to the viewing page.

On a NoScript library, it tries to access a HTMLFrameElement property from the a anchor:

// NoScript Commons Library (patchWindow.js)
function modifyFramingElements(win) { // win is the `a` element when the error occurs
    for (let property of ["contentWindow", "contentDocument"]) {
      for (let iface of ["Frame", "IFrame", "Object"]) {
        let proto = win[`HTML${iface}Element`].prototype; // throws here
        modifyContentProperties(proto, property)
      }
    }
    // ...

I've discovered that the win argument will be whatever was assigned the id i. So if I do img.id = i instead, then win will be the img element.

The HTMLFrameElement interface is deprecated, so I don't even know why it's still trying to access it.

After removing the href assignment, it stops giving errors, which is very strange, as it's just a way to scroll down to the viewing page area.

Changing the appending order didn't stop the error.

Here's the whole error message:

TypeError: win[(("HTML" + (intermediate value)) + "Element")] is undefined
    modifyFramingElements moz-extension://d5a0cd25-8ab0-4971-bfe9-992ee8de967f/nscl/content/patchWindow.js:291
    modifyWindow moz-extension://d5a0cd25-8ab0-4971-bfe9-992ee8de967f/nscl/content/patchWindow.js:268
    patchAll moz-extension://d5a0cd25-8ab0-4971-bfe9-992ee8de967f/nscl/content/patchWindow.js:304
    apply moz-extension://d5a0cd25-8ab0-4971-bfe9-992ee8de967f/nscl/content/patchWindow.js:321
    showPosts http://localhost:8080/script.js:65
    showPosts http://localhost:8080/script.js:49
    search http://localhost:8080/script.js:30
    onclick http://localhost:8080/#viewing-page:1
 Patching frames[0] patchWindow.js:306:19
    patchAll moz-extension://d5a0cd25-8ab0-4971-bfe9-992ee8de967f/nscl/content/patchWindow.js:306
    apply moz-extension://d5a0cd25-8ab0-4971-bfe9-992ee8de967f/nscl/content/patchWindow.js:321
    showPosts http://localhost:8080/script.js:65
    showPosts http://localhost:8080/script.js:49
    search http://localhost:8080/script.js:30

Answer 1

Basically, the NoScript extension is still using the aforementioned HTMLFrameElement interface, which is deprecated, causing it to throw when it cannot read its attributes.

It's still weird as I have localhost as trusted, and NoScript disabled (not as an extension, though).

I opened an issue on their repository.