如何安全地将一个项目嵌入到另一个项目中

业务场景

期望将一个通用的业务模块(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有兼容性问题，已经被弃用。