Refused to display 'http://www.***.com/org/***' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. 触发原因：页面的返回头被设置 X-Frame-Options SAMEORIGIN ，只能被同源的iframe 引用。跨域名的iframe 没法显示了。

 

nginx 在 http://www.

***.com/org/ location下增加      

proxy_hide_header X-Frame-Options;

     add_header X-Frame-Options "ALLOW-FROM https://www.***.com/" always;

即可

 

 

server location 配置

 

location / {

     proxy_pass ​ ​http://192.168.0.206​​;

     proxy_hide_header Vary;

     proxy_hide_header X-Powered-By;

     proxy_hide_header X-Frame-Options;

     add_header X-Frame-Options "ALLOW-FROM ​ ​http://​​www.***.com:8181" always;

}

​

​

server {
listen 8100;
server_name localhost;
location / {
proxy_pass http://128.1.8.206;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $host:8100;
proxy_hide_header X-Frame-Options;
add_header X-Frame-Options "ALLOW-FROM http://128.1.8.103:8100/" always;
#add_header Content-Security-Policy "frame-ancestors 128.1.8.103" always;
#add_header X-Frame-Options "ALLOW-FROM 128.1.8.103";
}
}

 

 

nginx 跨域问题
跨域问题有两种解决方法，

让开发自己修改代码解决跨域问题
修改nginx配置解决跨域问题
这里是记录了nginx的解决方式
后端服务调用报错跨域问题，为解决跨域问题，在网上搜索一大坨跨域解决方案，可以先都粘过去，后面慢慢删挑选正确的跨域问题

        proxy_set_header Cookie $http_cookie;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_hide_header X-Frame-Options;
        add_header X-Frame-Options ALLOWALL;
        add_header Access-Control-Allow-Origin *; 
        add_header Access-Control-Allow-Headers *; 
        proxy_cookie_domain remote localhost;  
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        ignore_invalid_headers off;
        proxy_set_header Host $host;
        real_ip_recursive on;
        keepalive_timeout  65;

 

 

 

X-Frame-Options安全警告处理
发布于 2022-09-23 13:04:32
1.4K0
举报
前言
所述X-Frame-OptionsHTTP 响应报头可以被用来指示一个浏览器是否应该被允许在一个以呈现页面<frame>，<iframe>或<object>。通过确保其内容未嵌入其他网站，网站可以使用此功能来避免 点击劫持 攻击。

点击劫持（ClickJacking）是一种视觉上的欺骗手段。攻击者使用一个透明的iframe，覆盖在一个网页上，然后诱使用户在网页上进行操作，此时用户将在不知情的情况下点击透明的iframe页面。通过调整iframe页面的位置，可以诱使用户恰好点击在iframe页面的一些功能性按钮上。

X-Frame-Options有三种可能的指示：

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
X-Frame-Options: ALLOW-FROM https://example.com/
复制
作用：

DENY，从其他站点加载时，不仅尝试在框架中加载页面失败，从同一站点加载时尝试这样做将失败。
 
SAMEORIGIN，只要包含在框架中的站点与为页面提供服务的站点相同，仍然可以在框架中使用该页面。
 
ALLOW-FROM页面只能显示在指定网址的框架中。
 
ALLOWALL 表示该页面允许全部来源域名的frame展示。
\ALLOW-FROM uri Deprecated**

   这是一个被弃用的指令，不再适用于现代浏览器，请不要使用它。在支持旧版浏览器时，页面可以在指定来源的 frame 中展示。请注意，在旧版 Firefox 上，它会遇到与 SAMEORIGIN 相同的问题——它不会检查 frame 所有的祖先页面来确定他们是否是同一来源。

HTTP 响应头Content-Security-Policy 有一个 frame-ancestors 指令，你可以使用这一指令来代替。

Content-Security-Policy: frame-ancestors <source>;
Content-Security-Policy: frame-ancestors <source> <source>;
复制
配置
配置 Apache
要配置 Apache X-Frame-Options为所有页面发送响应头，请将其添加到您网站的配置中：

Header always set X-Frame-Options "SAMEORIGIN"
复制
要配置 Apache 来设置X-Frame-Options拒绝，请将其添加到您网站的配置中：

Header set X-Frame-Options "DENY"
复制
要配置 Apache 以将其设置X-Frame-Options为ALLOW-FROM特定主机，请将其添加到您网站的配置中：

Header set X-Frame-Options "ALLOW-FROM https://example.com/"
复制
配置 Nginx
要配置 nginx 发送X-Frame-Options头文件，请将其添加到您的 http，server 或者 location 的配置中：

add_header X-Frame-Options SAMEORIGIN;
复制
如果允许多个网址 使用空格隔开就好了！

add_header X-Frame-Options 'ALLOW-FROM  https://a.psvmc.cn  https://b.psvmc.cn';
复制
允许所有

add_header X-Frame-Options ALLOWALL;
复制
配置 IIS
要配置 IIS 发送X-Frame-Options标题，请添加此站点的Web.config文件：

<system.webServer>

  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
    </customHeaders>
  </httpProtocol>

</system.webServer>
复制
配置 HAProxy
要配置 HAProxy 发送X-Frame-Options标题，请将其添加到前端，监听或后端配置中：

rspadd X-Frame-Options:\ SAMEORIGIN
复制
在较新的版本中：

http-response set-header X-Frame-Options SAMEORIGIN
复制
配置 Express
   要配置 Express 以发送 X-Frame-Options 响应头，你可以使用借助了 frameguard 的 helmet 来设置首部。在你的服务器配置里面添加：

const helmet = require('helmet');
const app = express();
app.use(helmet.frameguard({ action: 'SAMEORIGIN' }));
复制
或者，你也可以直接用 frameguard：

const frameguard = require('frameguard')
app.use(frameguard({ action: 'SAMEORIGIN' }))
复制
测试
测试网站是否设置了X-Frame-Options
将如下的代码中iframe中的链接换成待测网站的，保存为.html文件，本地打开。

如果打不开待测的网站，则说明配置成功了。

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" >
    <title>点击劫持测试</title>
  </head>
  <body>
    <iframe src="http://www.psvmc.cn/" width="600" height="600" frameborder="10"> </iframe>
  </body>
</html>
复制
访问的时候会显示

image-20220819174353008
控制台中报错

Refused to display 'https://www.psvmc.cn/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
复制
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-08-19，如有侵权请联系 cloudcommunity@tencent.com 删除

 

 

 

​