admin管理员组

文章数量:1288016

I have two different domain applications.

  1. First.Com
  2. Second

I want to load SSO url of Second in First.Com page using iFrame.

Scenario 1:

  1. If I open First.Com and try to open Second in same page it is not loading
  2. If I open First.Com and try to open Second in another tab of same browser then reload First.Com it renders Second without any issue.

Both First.Com and Second have different tokens.

How can I load Second in First.Com without opening second tab using jQuery?

Any hint or reference would be a great help.

I have two different domain applications.

  1. First.Com
  2. Second

I want to load SSO url of Second in First.Com page using iFrame.

Scenario 1:

  1. If I open First.Com and try to open Second in same page it is not loading
  2. If I open First.Com and try to open Second in another tab of same browser then reload First.Com it renders Second without any issue.

Both First.Com and Second have different tokens.

How can I load Second in First.Com without opening second tab using jQuery?

Any hint or reference would be a great help.

  • jquery
  • single-sign-on
  • idp
Share Improve this question edited Feb 22 at 16:55 marc_s 755k184 gold badges1.4k silver badges1.5k bronze badges asked Feb 22 at 15:57 OxygenOxygen 8294 gold badges25 silver badges49 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 2 +25

Create an HTML file for First.Com that includes an iframe and a script to handle communication.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First.Com</title>
    <script src="https://code.jquery/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>First.Com</h1>
    <iframe id="sso-iframe" src="https://Second/sso" width="100%" height="500px"></iframe>

    <script>
        $(document).ready(function() {
            const iframe = $('#sso-iframe')[0]; // Get the iframe DOM element

            // Listen for messages from the iframe
            window.addEventListener('message', function(event) {
                // Ensure the message is from the expected origin
                if (event.origin !== 'https://Second') {
                    console.warn('Message received from untrusted origin:', event.origin);
                    return;
                }

                // Handle the message (e.g., authentication token)
                console.log('Received message from Second:', event.data);

                // Example: Send a response back to the iframe
                iframe.contentWindow.postMessage('Message received by First.Com', 'https://Second');
            });
        });
    </script>
</body>
</html>

Create an HTML file for Second that sends messages to the parent window (First.Com).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Second</title>
    <script src="https://code.jquery/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Second</h1>
    <button id="send-message">Send Message to First.Com</button>

    <script>
        $(document).ready(function() {
            // Send a message to the parent window (First.Com)
            $('#send-message').click(function() {
                const message = { token: 'example-token-from-Second' };
                window.parent.postMessage(message, 'https://First.Com');
            });

            // Listen for messages from the parent window (First.Com)
            window.addEventListener('message', function(event) {
                // Ensure the message is from the expected origin
                if (event.origin !== 'https://First.Com') {
                    console.warn('Message received from untrusted origin:', event.origin);
                    return;
                }

                // Handle the message
                console.log('Received message from First.Com:', event.data);
            });
        });
    </script>
</body>
</html>

Configure CORS and Frame Embedding

CORS Headers

Set the following headers on Second

Access-Control-Allow-Origin: https://First.Com
Access-Control-Allow-Credentials: true

Frame Embedding

Ensure Second allows embedding in iframes by setting the appropriate headers

Content-Security-Policy: frame-ancestors 'self' https://First.Com;
X-Frame-Options: ALLOW-FROM https://First.Com

The issues that you have are CORS and CSP issues.

CORS (Cross-origin Resource Sharing)

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by which browsers make a "preflight" request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.

Since you want to load your IDP inside the page of your SP as an iframe widget (probably a popup for logging in), you need to allow your IDP domain via your cors header to your SP domain:

Access-Control-Allow-Origin: <origin>

See more here.

CSP (Content-Security Policy):

Content Security Policy (CSP) is a feature that helps to prevent or minimize the risk of certain types of security threats. It consists of a series of instructions from a website to a browser, which instruct the browser to place restrictions on the things that the code comprising the site is allowed to do.

You may already have a CSP rule inside your IDP for frame-ancestors, in which case you will need to adjust this rule with the SP's domain.

本文标签： jqueryHow to perform SSO implementation in iFrameStack Overflow

版权声明：本文标题：jquery - How to perform SSO implementation in iFrame - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741335567a2373020.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。