Refused to display site in an iframe, X-Frame-Options to 'SAMEORIGIN' (ok)

https://stackoverflow.com/questions/24421260/refused-to-display-site-in-an-iframe-x-frame-options-to-sameorigin

PreviousShow Heading (ok)Next--------- Start AppML --------------

Last updated 4 years ago

Was this helpful?

Refused to display site in an iframe, X-Frame-Options to 'SAMEORIGIN' (ok)

https://stackoverflow.com/questions/24421260/refused-to-display-site-in-an-iframe-x-frame-options-to-sameorigin

Đã ok.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>X-Frame-Bypass For Global CI calendar</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        iframe {
            display: block;
            width: calc(100% - 40px);
            height: calc(100% - 40px);
            margin: 20px;
            border: 0;
        }

    </style>

    <!-- To bypass the CROSS ORIGIN Resource issue -->
        <script src="x-frame-bypass.js" type="module"></script>

    <!-- Support Customized built-in elements for Safari-->
        <script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>

</head>
<body>
    <iframe is="x-frame-bypass" src="https://www.link_to_any_website.com"></iframe>
</body>
</html>

Getting an error when i try to inspect element in chrome:

How to display a site inside an iframe in which the website has 'X-Frame-Options' to 'SAMEORIGIN'?

4 Answers

Web server conf,

for me i use nginx.conf

find add_header X-Frame-Options SAMEORIGIN; and change it toadd_header X-Frame-Options "ALLOWALL";

To solve this error:

You just place this code in your .htaccess file according to the access level you want to provide:

X-Frame-Options: deny
X-Frame-Options: sameorigin
X-Frame-Options: "allow-from https://example.com/"

To test it, just save this code in an index.html file and place in the same directory the file x-frame-bypass.js that you can download from the above Github repository.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>X-Frame-Bypass For Global CI calendar</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        iframe {
            display: block;
            width: calc(100% - 40px);
            height: calc(100% - 40px);
            margin: 20px;
            border: 0;
        }

    </style>

    <!-- To bypass the CROSS ORIGIN Resource issue -->
        <script src="x-frame-bypass.js" type="module"></script>

    <!-- Support Customized built-in elements for Safari-->
        <script src="https://unpkg.com/@ungap/custom-elements-builtin"></script>

</head>
<body>
    <iframe is="x-frame-bypass" src="https://www.link_to_any_website.com"></iframe>
</body>
</html>

PreviousShow Heading (ok)Next--------- Start AppML --------------

Last updated 4 years ago

Was this helpful?