0

I have two applications running on the same origin/server like app.myserver.com and portal.myserver.com. I embed a page from app.myserver.com to the portal.myserver.com using <embed>. How can I change the css style for the embed page from portal.myserver.com i.e I need to change/override the css style of the app from portal.

template inside the portal.server.com is as following

<object id="app-page" data="app.myserver.com/page" width="100%" height="100%">
    Error: Embedded data could not be displayed.
</object>

I can see the ispect element of the portal.myserver.com like below

<object id="app-page" data="app.myserver.com/page" width="100%" height="100%">
  #document
  <!DOCTYPE html>
  <html>
  <head><title>Hello</title></head>
  <body>
  <div class="first-div"><p>lorem ipsum</p></div>
</object>

I'm open to use any javascript or jquery solutions

Improve this question
2
  • I don't believe this is possible due to the same origin policy. Note that despite your assertion that they are the same origin they are not, the subdomains are different. For this to work the domains need to match exactly, even down to the port being used. Commented Feb 7, 2020 at 11:49
  • 1
    Your question title says they have the same origin, but your URLs have different origins! Commented Feb 7, 2020 at 11:50
Related questions
2854
Make a div fill the height of the remaining screen space
1655
How do I style a <select> dropdown with only CSS?
1655
How does the 'Access-Control-Allow-Origin' header work?
Load 6 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.