SecurityError: Permission denied to access property "pageXOffset" on cross-origin object

[jkostrhun]

Environment:

• Node.js version: 14.17.0
• NPM version: 6.14.13 (but using yarn 1.22.10)
• Browser name and version: Firefox 103.0
• Platform name and version: Linux
• WebdriverIO version: 7.19.5
• wdio-image-comparison-service version: 3.1.1

Config of WebdriverIO + wdio-image-comparison-service An example of how you configured the wdio-image-comparison-service

Firefox running on Selenium grid in Docker:
Hub: https://hub.docker.com/layers/hub/selenium/hub/4.3.0/images/sha256-f009530d6cbe2e6399bca61e09d907e34471dc98ec5fc2f4ecff84e79c54487b?context=explore
Firefox image: https://hub.docker.com/layers/node-firefox/selenium/node-firefox/103.0/images/sha256-e50a53879dcd59cc1e22c0705f11b2b139cc8189e8ba5a558e56098d4752607a?context=explore


        'maxInstances': 1,
        'browserName': 'firefox',
        'moz:firefoxOptions': {
            'args':[
                `-width=1920`,
                `-height=1080`
            ],
            'prefs':{
                'browser.download.dir': /tmp/downloads,
                'browser.download.folderList': 2,
                'browser.download.manager.showWhenStarting': false,
                'browser.helperApps.neverAsk.saveToDisk': 'text/plain, application/epub+zip, audio/mpeg, text/html, application/rtf'
            }

services: [
        ['image-comparison', {
            baselineFolder: join(process.cwd(), './ui/baseline/'),
            screenshotPath: join(process.cwd(), './output/'),
            formatImageName: '{tag}-{browserName}-{width}x{height}',
            returnAllCompareData: true,
            ignoreTransparentPixel: true,
            ignoreAntialiasing: true
        }],
    ]

Describe the bug On newer versions of Firefox I recieving SecurityError: Permission denied to access property "pageXOffset" on cross-origin object when using browser.checkElement() function on cross-origin iFrame, cannot provide our app, but can be simulated by test on example below. It's happening only on Firefox, works fine on newer versions Chrome.

To Reproduce Steps to reproduce the behavior:

Run

describe('cross', () => {
    it('should visual check iframe', () => {
        browser.url('https://olweus.sites.clemson.edu/js/html2canvas/tests/reftests/crossorigin-iframe.html')
        browser.$('//iframe').waitForDisplayed()
        browser.switchToFrame($('//iframe'))
        browser.checkElement($('//iframe'), './baseline')
    })
})

Expected behavior Comparison will work normally like on Chrome browser.

Log

[firefox 103.0 LINUX #1-0] SecurityError: Permission denied to access property "pageXOffset" on cross-origin object
[firefox 103.0 LINUX #1-0] unknown error: SecurityError: Permission denied to access property "pageXOffset" on cross-origin object
[firefox 103.0 LINUX #1-0]     at /Users/user/work/test/node_modules/webdriver-image-comparison/lib/methods/screenshots.ts:370:10
[firefox 103.0 LINUX #1-0] at Object.next (/Users/user/work/test/node_modules/webdriver-image-comparison/build/methods/screenshots.js:25:53)

[wswebcreation]

Hi @jkostrhun

this module never officially supported iframes so never looked into this. I know that there can be cross-origin security issues with iframes. Are you able to interact with an element? Like clicking on it and so on?

[jkostrhun]

Hi @wswebcreation ,

yes, this issue is only with browser.checkElement() function while taking screenshot.

[wswebcreation]

Closing this as it's a third party dependency issue, see also https://github.com/mozilla/geckodriver/issues/2068