业务场景
期望将一个通用的业务模块(X)嵌入到项目Y 中。X 与 Y 不同源。同时要阻止模块X被其它项目嵌入。
分析实现
前端项目部署到 Nginx 静态资源服务器上。在响应头中添加 HTTP 头部 Content-Security-Policy
。
Content-Security-Policy: frame-ancestors <source>;
Content-Security-Policy: frame-ancestors <source> <source>;
复制代码
Nginx 配置
server {
listen 9002;
server_name xxx;
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
add_header Content-Security-Policy "frame-ancestors http://yyy:9003/";
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
复制代码
注意事项
避免使用 X-Frame-Options,因为 X-Frame-Options 只有两个可能的值 DENY
和 SAMEORIGIN
。ALLOW-FROM
有兼容性问题,已经被弃用。