Question

我被要求在网络应用程序中实现“显示证明”......

这意味着我需要以某种方式获取在浏览器中显示（或关闭）客户端的屏幕截图，以便能够证明我们确实给了他所需要的“合法的“证据。

即使我不同意这种证据（浏览器有自己的方式来显示HTML，存储的截图很容易被破解或伪造......），我想知道它是否已经在某处完成了实现这种功能。

任何想法或经验？

为了简化，我们不能要求用户安装任何东西（插件，应用程序......）使用的技术：主要是Java，Spring-mvc，Thymeleaf和JQuery

Answer 1

您可以使用Selenium Webdriver制作屏幕截图并将其保存到本地磁盘。请查看有关How take screenshot using selenium webdriver with java.

的问题

但是，这又可以用作自动化测试工具，在没有任何用户交互的情况下操纵系统中的用户活动。我们的项目也使用您提到的相同技术堆栈，测试团队使用Selenium webdriver来制作某些条件的屏幕截图，以确保条件有效。

通常通过选择并检查使用Xpath选择器加载的html页面中的id和tag元素来完成。它将在他们运行的java代码中配置的单独文件夹中截取失败和成功条件的屏幕截图。然后，它即时创建Excel文档，以显示执行的任务和这些任务的结果。

Answer 2

好的，这里有2个解决方案：

一个服务器端：在使用过滤器将HTML流发送到客户端浏览器之前捕获HTML流：

    public class ProofDisplayFilter implements Filter {
        @Override
        public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws ServletException {

             HttpServletRequest request = (HttpServletRequest) req;
             HttpServletResponse response = (HttpServletResponse) res;  

             Mywriter writer = ...;
             ProofWriter proofWriter = new ProofWriter(response.getWriter(), writer);

              //doFilter will right in the proofWriter that will copy output flow
              chain.doFilter(request, wrapResponse(response, proofWriter)); 

              //do whatever you need with your copy
              saveHTMLAndStaticContentAsZip(proofWriter);
        }

        private static HttpServletResponse wrapResponse (final HttpServletResponse response, final PrintWriter writer){
                return new HttpServletResponseWrapper(response) {
                    public PrintWriter getWriter() throws IOException {
                        return writer;
                    }
                };
       }
    }

问题是您需要修改HTML流程以获得对js，css和图像资源的良好引用。

一个客户端 :(感谢@NimChimpsky）使用html2canvas.js API创建快照并将其作为图像发送到您的控制器：

JS

    html2canvas(document.body, {
                onrendered: function(canvas) {
                    $.post('/myApp/proof',
                            {
                                image : canvas.toDataURL()
                            },
                            function(data) {...});
                }
            });

CONTROLLER

    @RequestMapping(value = "/proof")
    @ResponseBody
    public void proof(@RequestParam(value="image") String imageBase64) throws IOException {
        long now = Calendar.getInstance().getTimeInMillis();
        byte[] bytes = imageBase64.replaceAll("data:image/.+;base64,", "").getBytes();

        File proof = new File("./proof", "display-"+now+".jpeg");

        if(!proof.exists()){
            Files.createParentDirs(proof);
        }
        Files.write(DECODER.decode(bytes), proof);
}

（或者你需要对此图片做任何其他事情）

两种解决方案都有利有弊：
服务器端：
赞成
- 捕获HTML，因为它是 - 处理/比较HTML流量的可能性
CONS
- 我们不知道它是如何显示给客户的 - 消耗大量磁盘空间：〜1Mo / capture（也需要保存静态文件）
- 使用AJAX调用的页面部分怎么样？

客户端：
赞成
- 精确：在需要它的页面中设置脚本
- 管理浏览器的渲染
CONS
- 使用HTML5画布，直到第9版才在IE中支持 - 侵入性（在我看来）

希望这可以帮助一些人感谢您的支持！

显示证明

2 个答案: