mlflow UI not working in iframe[BUG]--cross origin issue

[vasudeva02]

getting below error in UI console:

DevTools failed to load SourceMap: Could not load content for http://10.74.58.147:8753/static-files/bootstrap/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE react-dom.production.min.js:3282 DOMException: Blocked a frame with origin "http://10.74.58.147:8753" from accessing a cross-origin frame. at Function.value (http://10.74.58.147:8753/static-files/static/js/main.8790c2d7.chunk.js:1:9610) at t.value (http://10.74.58.147:8753/static-files/static/js/main.8790c2d7.chunk.js:1:189202) at commitLifeCycles (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4043867) at C (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4031668) at w (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4030478) at _ (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4030009) at b (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4029846) at v (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4029225) at u (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4028687) at Object.enqueueSetState (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4017873) _r @ react-dom.production.min.js:3282 commitErrorLogging @ react-dom.production.min.js:3619 C @ react-dom.production.min.js:4395 w @ react-dom.production.min.js:4296 _ @ react-dom.production.min.js:4263 b @ react-dom.production.min.js:4254 v @ react-dom.production.min.js:4213 u @ react-dom.production.min.js:4164 enqueueSetState @ react-dom.production.min.js:2267 y.setState @ react.production.min.js:71 a.onStateChange @ connectAdvanced.js:245 v @ createStore.js:174 (anonymous) @ index.js:114 (anonymous) @ index.js:11 dispatch @ applyMiddleware.js:46 (anonymous) @ index.js:202 Promise.then (async) (anonymous) @ index.js:228 (anonymous) @ index.js:11 (anonymous) @ bindActionCreators.js:3 value @ ExperimentPage.js:49 value @ ExperimentPage.js:113 commitLifeCycles @ react-dom.production.min.js:3558 C @ react-dom.production.min.js:4394 w @ react-dom.production.min.js:4296 _ @ react-dom.production.min.js:4263 b @ react-dom.production.min.js:4254 v @ react-dom.production.min.js:4213 u @ react-dom.production.min.js:4164 enqueueSetState @ react-dom.production.min.js:2267 y.setState @ react.production.min.js:71 a.onStateChange @ connectAdvanced.js:245 v @ createStore.js:174 (anonymous) @ index.js:114 (anonymous) @ index.js:11 dispatch @ applyMiddleware.js:46 (anonymous) @ index.js:202 Promise.then (async) (anonymous) @ index.js:228 (anonymous) @ index.js:11 dispatchListExperimentsApi @ HomePage.js:49 value @ HomePage.js:22 mountClassInstance @ react-dom.production.min.js:2327 beginWork @ react-dom.production.min.js:2912 o @ react-dom.production.min.js:4051 i @ react-dom.production.min.js:4068 w @ react-dom.production.min.js:4296 _ @ react-dom.production.min.js:4263 b @ react-dom.production.min.js:4254 v @ react-dom.production.min.js:4213 u @ react-dom.production.min.js:4164 t @ react-dom.production.min.js:4601 updateContainer @ react-dom.production.min.js:4636 wo.render @ react-dom.production.min.js:5513 (anonymous) @ react-dom.production.min.js:5849 unbatchedUpdates @ react-dom.production.min.js:4519 ko @ react-dom.production.min.js:5848 render @ react-dom.production.min.js:5871 2145 @ index.js:18 i @ (index):1 963 @ no-experiments.svg:1 i @ (index):1 a @ (index):1 e @ (index):1 (anonymous) @ main.8790c2d7.chunk.js:1 AppErrorBoundary.js:19 DOMException: Blocked a frame with origin "http://10.74.58.147:8753" from accessing a cross-origin frame. at Function.value (http://10.74.58.147:8753/static-files/static/js/main.8790c2d7.chunk.js:1:9610) at t.value (http://10.74.58.147:8753/static-files/static/js/main.8790c2d7.chunk.js:1:189202) at commitLifeCycles (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4043867) at C (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4031668) at w (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4030478) at _ (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4030009) at b (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4029846) at v (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4029225) at u (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4028687) at Object.enqueueSetState (http://10.74.58.147:8753/static-files/static/js/2.04e2d2ac.chunk.js:1:4017873)

[mshetty27]

There is a method in "/src/common/utils/Utils.js" called updatePageTitle. It does a window.parent.postMessage as it should do when communicating with a cross orgin window. However, it accesses "window.parent.location.origin" while setting the "targetOrigin" method parameter. which is the problem. You could put "*" instead but it is not recommended for security reasons. Better would be to specify the exact domain where you are going to embed the mlflow UI in an iframe.

[vasudeva02]

Thanks @mshetty27 , it worked !

[browser-bug]

Is it possible to pass a list of accepted domains? Or maybe allow at least localhost for testing purposes.

[browser-bug]

As an update, changing window.parent.location.origin to window.location.origin seems to do the trick. At least in my use case scenario. I don't know if this could be a disruptive action or not but for the little testing I did it seems just fine.

[Euraxluo]

Is it fixed? I also have this problem in the 1.27.0 version

[daniel-sali]

I had a similar issue with MLFlow 2.0.1, had to remove the window.top?.location.href references from the JS front-end code.

[ewaldbervoets]

Does anyone have a solution for MlFlow v2.1.1?

[ewaldbervoets]

I had a similar issue with MLFlow 2.0.1, had to remove the window.top?.location.href references from the JS front-end code.

@daniel-sali I'm struggling to get the working in an Iframe, did you remove the references from the bundle or from the react components and rebuild the frontend yourself?

[daniel-sali]

@ewaldbervoets Yes, I removed the references from the react components, rebuilt the front-end with craco and copied the built files to mlflow/server/js/build.

[ewaldbervoets]

I was overcomplicating it by trying to change the bundled main.js file. Thanks a lot @daniel-sali , that works!

[dshakey]

@ewaldbervoets @daniel-sali novice question, how do you rebuild from frontend with craco? and what do i need to change?

this line ? https://github.com/mlflow/mlflow/blob/378b9238efc64c15b1786cce3acccc53e0685abd/mlflow/server/js/src/experiment-tracking/components/experiment-page/components/header/ExperimentViewHeaderShareButton.tsx#L16

[ewaldbervoets]

@dshakey I changed the line you linked to link={window.location.href}

The frontend is bootstrapped with create-react-app and can be rebuild by:

• first installing the dependencies with yarn install
• running yarn build in the mlflow/mlflow/server/js folder. This command uses craco to rebuild the frontend.

This should generate a new bundle in /build/static/js with the changes you made

[dshakey]

@dshakey I changed the line you linked to link={window.location.href}

The frontend is bootstrapped with create-react-app and can be rebuild by:

• first installing the dependencies with yarn install
• running yarn build in the mlflow/mlflow/server/js folder. This command uses craco to rebuild the frontend.

This should generate a new bundle in /build/static/js with the changes you made

thanks, should have read the Dockerfile first, will give the above a try, just need to sort out error i get with yarn install, get the below and then fails

➤ YN0041: │ websocket-driver@npm:0.6.5: Invalid authentication (as an anonymous user)
➤ YN0041: │ whatwg-fetch@npm:3.6.2: Invalid authentication (as an anonymous user)
➤ YN0041: │ which-module@npm:2.0.0: Invalid authentication (as an anonymous user)

[dshakey]

thanks all sorted, been awhile since used yarn cli and some of parameters have changed, we use an internal aritfactory so needed to configure to that

    npm install --global yarn && \
    # set yarn config in build folder
    cd mlflow/server/js && \
    yarn config set npmAuthIdent ${ARTYUSER} && \
    yarn config set npmAuthToken ${ARTYTOKEN} && \
    yarn config set npmRegistryServer https://xxxxxxxxx/artifactory/api/npm/npm-virtual/ 


    # fix for working mlflow in iframe
RUN sed 's/window.top?.location.href || window.location.href/window.location.href/g' -i /app/mlflow-${ML_VERSION}/mlflow/server/js/src/experiment-tracking/components/experiment-page/components/header/ExperimentViewHeaderShareButton.tsx && \
    cd mlflow/server/js && \
    yarn install && \
    yarn build && \

[Zhangjiawei-Beinloft]

when i running yarn build in the mlflow/mlflow/server/js folder , it report an error like:

craco:  *** Cannot find ESLint plugin (ESLintWebpackPlugin). ***
C:\Users\zhangjiawei16\Desktop\MLflow\mlflow-branch-2.1\mlflow\server\js\craco.config.js:87
    throw new Error('Failed to fix CSS paths!');

Has anyone encountered this problem and how can I solve it?