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.

https://github.com/niutech/x-frame-bypass

<!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>

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

Ask QuestionAsked 6 years agoActive 5 months agoViewed 31k times52

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

Refused to display 'http://www.samplesite.com/' in a frame because it is set 'X-Frame-Options' to 'SAMEORIGIN'.

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

add a comment

4 Answers

ActiveOldestVotes3

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";

add a comment1

To solve this error:

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

  1. X-Frame-Options: deny

  2. X-Frame-Options: sameorigin

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

Me too I had a similar problem. Loading my web page into an iframe on another website I was getting this error: Refused to display 'https://mywebsite.com' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

I've solved using this web component that allow an IFrame to bypass the X-Frame-Options: deny/sameorigin response header. https://github.com/niutech/x-frame-bypass

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.

Since Safari doesn't support Customized built-in elements, I've added an extra script that allow the support. https://www.chromestatus.com/feature/4670146924773376

<!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>

  • 3Danger: This script works by passing everything through a proxy server. All data will be visible to the controller of the proxy server (including any login credentials submitted through the iframe). It depends on the proxy server being live (and open proxies like this tend to just strain under ever increasing load until they die and break your site which depends on them). Using a proxy to bypass X-Frame-Options dips into risky intellectual property territory too: you risk getting sued for copyright infringement. – Quentin Jan 22 '19 at 14:47

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

Last updated