nginx设置X-Frame-Options防止自己的网站被其他人iframe引入
本文介绍nginx设置X-Frame-Options属性，防止网站被别人用iframe嵌入使用。兼容大部分浏览器。
背景说明：在项目开发中，单独用了一台服务器进行图片保存，网站上所有的上传图片都放在了这台服务器上。基于这个需求我在这台服务器上开发了上传功能，图片上传成功后返回地址，然后把地址保存在数据库中。
使用方法：在需要上传图片的地方用iframe引入上传页面，进行上传。
出现问题：所有人都可以引入我这个iframe 页面把图片上传到我服务器。
解决方法：只允许我的域名或者网站才能引入iframe页面上传，有且只能是引入上传，不允许直接访问。这样就保证此iframe只有本服务器使用，其他人无权限。实现该功能需要在nginx配置中添加同源策略限制。
在nginx.conf配置的server中添加代码，可以在http中也可以在server中：
#设置iframe允许的域名访问，X-Frame-Options值有四种情况可以百度
add_header X-Frame-Options 'ALLOW-FROM www.baidu.com m.baidu.com';
#谷歌火狐浏览器识别不了上面的header,经过百度需要以下设置才可以
add_header Content-Security-Policy 'www.baidu.com m.baidu.com';
为了防止浏览器访问，并且必须是自己网站引入，在server中进行referer判断添加以下代码：
#防盗链判断，valid_referers 有多种判断，可以百度
valid_referers *.baidu.com;
if ($invalid_referer) {
return 403;
}
以上就是nginx设置网页只允许指定的页面使用iframe进行引入
上传图片页面html代码如下：
<html>
<head>
<title>上传</title>
<meta charset="utf-8">
<script>
document.domain="baidu.com";
</script>
</head>
<body>
<iframe name="myupiframe" id="myupiframe" style="display:none;"></iframe>
<form action="./sc.php" id="myform" method="post" enctype="multipart/form-data" target="myupiframe">
<input type="file" id="ycfile" name="ycfile" onchange="uploadimg(this)">
<input type="hidden" id="tupianlujing" name="tupianlujing" value="">
<div id="ycshowimg">
</div>
</form>
<script>
function opennewimg(img) {
window.top.open(img);
}
function showmsg(msg,type=0)
{
if (type==0) {
alert(msg);
return false;
} else {
var showimg = "<img οnclick='opennewimg(\""+msg+"\")' src='"+ msg +"' style='width:100px;height: 100px;'>";
document.getElementById('ycshowimg').innerHTML = showimg;
document.getElementById('tupianlujing').value = msg;
}
}
function uploadimg(obj) {
if (!obj) {
alert("请选择您要上传的图片");
return false;
}
var newfiles = new Array();
var files= document.getElementById('ycfile').files;
if (files.length>1) {
alert("每次可以上传一张图片");
return false;
}
let file = files[0];
var suffix = file.name.substr(file.name.lastIndexOf("."));
var fileTypes = '.png;.jpg;.jpeg;.gif;.bmp';
if(fileTypes.indexOf(suffix)==-1){
alert("只支持图片上传")
return;
}
if(file.size>2*1024*1024){
alert("图片大小限制为2M")
return;
}
document.getElementById("myform").submit();
}
</script>
</body>
</html>
php处理上传文件代码如下：
$file = isset($_FILES['ycfile']) ? $_FILES['ycfile'] : ''; //上传图片
if(empty($file))
{
exit("<script>document.domain='baidu.com';window.parent.showmsg('请选择上传的文件.',0);</script>");
}
exit("<script>document.domain='baidu.com';window.parent.showmsg('http://www.baidu.com/1.jpg',1);</script>");