casesandberg / casesandberg/react-color

`getContainerRenderWindow` in Saturation component inside iframe is causing a crash

Open
#806 7 comments 8 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
12.3k
Forks
920
PR merge metrics
No merged PRs in 30d

Description

I'm rendering a custom picker inside an iframe that is using `Saturation` common component.
I'm receiving a CORS origin error that caused by the following code:

![image](https://user-images.githubusercontent.com/70090129/108634751-bc159180-7483-11eb-9cce-0d121bdf160d.png)

**getContainerRenderWindow**

```
var container = this.container;

var renderWindow = window;
while (!renderWindow.document.contains(container) && renderWindow.parent !== renderWindow) {
renderWindow = renderWindow.parent;
}
return renderWindow;
}
```

after evaluating `renderWindow = renderWindow.parent`, there's no document to access and it caused the failures. What is the propose behind that ?

a local fix was to override this method and return always `window`.

any insights ? it need to be used in prod

Contributor guide

Open the contributing guide

Research direction

Start at the Saturation component's getContainerRenderWindow method and reproduce the failure with a custom picker inside an iframe. Trace the parent-window traversal and establish the intended behavior for cross-origin frames; done means the component no longer crashes while still selecting the correct render window.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.