摘要
本文主要讲述了：
- 作用
- 取值范围
正文
作用
表示是否允许网页在<iframe>等元素中渲染
注意：无法通过<meta>设置X-Frame-Options
取值范围
deny
禁止网页在<iframe>中渲染
示例：
nginx.conf
1
2
3
4
5
6
7
8
9
10
| server {
listen 80;
server_name a.foo.com;
location / {
root html/a.foo.com;
index index.html index.htm;
add_header X-Frame-Options deny;
}
}
|
a.foo.com/index.html
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>index</h1>
<iframe src="./back.html"></iframe>
</body>
</html>
|
a.foo.com/back.html
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>back</h1>
</body>
</html>
|
sameorigin
仅允许网页在同源网站的<iframe>中渲染
示例：
nginx.conf
1
2
3
4
5
6
7
8
9
10
| server {
listen 80;
server_name a.foo.com;
location / {
root html/a.foo.com;
index index.html index.htm;
add_header X-Frame-Options sameorigin;
}
}
|
a.foo.com/index.html
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>index</h1>
<iframe src="./back.html"></iframe>
</body>
</html>
|
a.foo.com/back.html
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>back</h1>
</body>
</html>
|
参考资料
本文对你有帮助？请支持我
支付宝
微信